前言：

　　對于剛剛接觸vue的同學(xué)來說，直接用官方的構(gòu)建工具vue-cli來生成一個(gè)項(xiàng)目結(jié)構(gòu)會存在一些疑惑，比如:? ?.vue組件 為什么可以寫成三段式（tempalte、script、style）? 整個(gè)項(xiàng)目是怎樣組織運(yùn)行起來的，main.js - App.vue - 各個(gè)組件 之間是怎么相互引用的？

　　為了讓更多同學(xué)理解，我們不借助官方構(gòu)建工具，自行構(gòu)建一個(gè)類似于官方的項(xiàng)目結(jié)構(gòu)，去體會它的運(yùn)作機(jī)制。

　　在自行構(gòu)建的項(xiàng)目中，我們的組件并不使用.vue文件方式，因?yàn)檫@種文件是經(jīng)過了vue-loader做了相應(yīng)的處理，意思可以理解為將組件<template></template>中的模板編譯到了組件對象中。而我們既然選擇原生的方式，那么我們就應(yīng)該將模板寫在組件選項(xiàng)'template'中（雖然這種方式?jīng)]有語法高亮，但要記得我們這樣做的目的），而我們的組件后綴是.js。

?

開始：

　　1. 進(jìn)入自己的項(xiàng)目根目錄，初始化npm

　　??npm init??

　　2. 安裝vue包到項(xiàng)目

　　? npm install --save vue??

　　3. 創(chuàng)建index.html/src目錄/dist目錄

　　? touch index.html　　mkdir src　　mkdir dist??

?

文件功能：

　　到目前，我們的項(xiàng)目結(jié)構(gòu)：

　　

　　接下來我們在src路徑下創(chuàng)建，js入口文件main.js，項(xiàng)目根組件App.js，和組件目錄components，并且我們象征性的創(chuàng)建兩個(gè)組件cp1.js、cp2.js ：

　　

　　main.js 是所有js的入口，（那么我們在index.html文件中只需要引入這個(gè)文件就夠了？ -- 并不是），該文件將會聲明與其他組件的依賴關(guān)系（而其他組件又會聲明和別的組件的關(guān)系），我們在寫完項(xiàng)目的時(shí)候需要使用webpack打包整個(gè)項(xiàng)目的js代碼，而這個(gè)main.js就是打包尋找依賴的入口。

　　我們得知通過Vuejs構(gòu)建的項(xiàng)目，是組件化的，項(xiàng)目可以說是由一個(gè)個(gè)組件構(gòu)成的，在一個(gè)組件中可以使用其他的組件作為自己的子組件，那么必然會存在一個(gè)根組件，它就是App.js。

?

組件：

　　components文件夾下存放的是項(xiàng)目中的除根組件外的其他組件，我們在寫這些組件的時(shí)候應(yīng)該遵循的一個(gè)原則就是：與外界隔絕，不做任何與外界耦合的假設(shè)。那么我們就來我們就開始編寫組件cp1.js吧：

　　

　　請注意它和.vue組件寫法的區(qū)別，我們的組件模板是寫在template選項(xiàng)中的。并且提供給外界一個(gè)props參數(shù)接口msg。

?

　　接下來我們需要在根組件中引用這個(gè)組件，根組件的寫法遵循同樣的原則：

　　

　　要使用cp1組件，首先要將其import導(dǎo)入，因?yàn)閏p1.js中導(dǎo)出的寫法是export default，所以我們在這可以給cp1組件對象隨意命名（import后緊隨的'cp1'就是我們的命名），這是ES6的語法規(guī)則。

　　記住：每個(gè)組件對象我們都需要使用export default進(jìn)行導(dǎo)出，因?yàn)檫@樣外界才可以調(diào)用它，并且將 給此組件的命名權(quán) 遞交給使用者。

　　我們看到，在根組件中我們有components選項(xiàng)，用來注冊將使用的組件（局部注冊）。此選項(xiàng)對象中的key將作為模板中標(biāo)簽，value為其他組件對象。

　　在模板中我們使用了cp1標(biāo)簽，并且給其props屬性msg賦值為'Message from parent ~'。

?

入口：

　　組件都寫好了，那如何將其掛載到html頁面中呢，這個(gè)時(shí)候我們需要一個(gè)橋梁，就是main.js：

　　

　　這次我們終于用到Vue了！（記得先導(dǎo)入），并且導(dǎo)入App根組件，將其注冊為Vue實(shí)例的組件，并且在模板中使用它（template:'<app></app>'），然后將這個(gè)Vue實(shí)例掛載到index.html中id為app的元素中。

?

打包：

　　在打包之前我們需要先修改vue npm包的package.json文件，將默認(rèn)導(dǎo)出的‘只包含運(yùn)行時(shí)’改為‘完整版’，即將如下兩項(xiàng)的'runtime'去掉（運(yùn)行時(shí)不包含編譯器 | 編譯器作用：用來將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼>，因此組件對象不支持 template 選項(xiàng)）：

　　

　　在項(xiàng)目根路徑執(zhí)行打包（全局安裝過webpack）

　　webpack ./src/main.js ./dist/main.bundle.js

?

index.html：

　　將打包后的文件引入到頁面：

　　

　　接下來去瀏覽器訪問它吧～

?

?

效果：

　　

?

?

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/xingyazhao/p/7767602.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的不借助vue-cli，自行构建一个vue项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。