如題第一次使用vue的腳手架vue-cli搭建vue項(xiàng)目蘸际，所以特意寫篇文章記錄下來(lái)以便回味.
一步一步搭建
1.首先在windows系統(tǒng)下打開命令行工具鳖擒，然后輸入npm install -global vue-cli,這段代碼的作用就是全局安裝vue-cli婚惫，執(zhí)行完這段命令之后可以在我們安裝nodejs的文件夾下面看到一個(gè)名為vue-cli文件霞幅，這就代表安裝vue-cli成功续担。
npm install -global vue-cli
2然后在F盤目錄下面創(chuàng)建一個(gè)名為VueStudy的文件知市，可以把它理解為一個(gè)主的文件夾傻盟，后面我們創(chuàng)建的vue項(xiàng)目就是它的子文件。通過命令行到達(dá)VueStudy文件下面輸入vue init webpack my-project(自定義項(xiàng)目名稱)嫂丙，這段代碼的意思是：創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目娘赴。
接下來(lái)就跟著輸入項(xiàng)目名稱、項(xiàng)目描述跟啤、作者诽表、是否安裝vue-router、是否使用ESlint檢查你的代碼等等
跟著上面全部輸完之后隅肥，可以發(fā)現(xiàn)我們的VueStudy文件下面多出了一個(gè)名為showVue的文件竿奏，則說(shuō)明文件生成成功。如圖所示：這是項(xiàng)目的大體結(jié)構(gòu)腥放。
此時(shí)我們進(jìn)入到showVue文件下面泛啸，執(zhí)行如下命令npm install，它的作用是安裝依賴秃症。
可以很明顯的看到在執(zhí)行完npm install命令之后候址，項(xiàng)目文件中會(huì)多出了一個(gè)名為node_modules的文件，它就是我們所需要安裝的依賴种柑。
接下來(lái)我們輸入以下命令,這段代碼的作用是自動(dòng)幫我們啟動(dòng)一個(gè)端口號(hào)為8080的服務(wù)岗仑。
npm run dev
接下來(lái)就是見證奇跡的時(shí)候啦，這個(gè)時(shí)候?yàn)g覽器會(huì)自動(dòng)幫我們打開一個(gè)“http://localhost:8080/#/”窗口聚请，出現(xiàn)如下圖片則說(shuō)明成功啦荠雕。
當(dāng)然這只是服務(wù)器幫我們啟的頁(yè)面，要想自己在本地能夠啟動(dòng)還需要輸入最后一個(gè)命令
npm run build
執(zhí)行完此命令后良漱，你會(huì)驚喜的發(fā)現(xiàn)你的showVue文件下面有多出了一個(gè)名為dist的文件舞虱，這就是我們需要的本地起頁(yè)面的文件，這個(gè)時(shí)候執(zhí)行dist文件下面的index.html就能看到.
這個(gè)時(shí)候還會(huì)有一個(gè)小坑母市，就是可能你打開dist文件下index.html的時(shí)候發(fā)現(xiàn)頁(yè)面沒有一片空白同時(shí)發(fā)現(xiàn)控制臺(tái)報(bào)錯(cuò)矾兜，如圖：
不必驚慌，這只是說(shuō)明你的css與js文件的路徑配置有問題患久，只需要修改為正確的就行啦椅寺。
從圖上可以看出已經(jīng)成功啦
總結(jié)
其實(shí)用vue-cli搭建vue項(xiàng)目是算不上復(fù)雜的浑槽，只是第一次倒騰總覺得有點(diǎn)麻煩，重要的只需要記住這5行命令行就行啦:
//全局安裝 vue-cli
npm install -g vue-cli
//創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
vue init webpack my-project
//進(jìn)入項(xiàng)目目錄
cd my-project
安裝依賴
npm install
//創(chuàng)建8080端口
npm run dev
//生成dist文件
npm run build
Vue的文件結(jié)構(gòu)介紹
關(guān)于npm run dev(啟動(dòng)Node.js本地開發(fā)服務(wù)器)和npm run build(建立資產(chǎn)進(jìn)行生產(chǎn))官方的解釋
7月1號(hào)更新(個(gè)人分析通過官網(wǎng)vue-cli腳手架啟動(dòng)的項(xiàng)目)
components文件夾中Hello.vue就是一個(gè)名為Hello的vue的子組件返帕。
export default{
name:'hello',
data(){
return{
msg:'Vue-Cli-Study'
}
}
}
這段代碼就相當(dāng)于定義了一個(gè)局部的子組件桐玻，組件的名稱為hello，返定義了一個(gè)data函數(shù)并且返回了一個(gè)msg屬性荆萤。然后通過router文件夾中的index.js文件镊靴，在實(shí)例化路由對(duì)象中寫上路徑就可以被引用了。
