最近在自學(xué)vue,官方文檔基本基本敲了一遍,入門demo也寫(xiě)過(guò),于是就想搞個(gè)項(xiàng)目玩玩,遂上github上下了幾個(gè)項(xiàng)目打算看一下,發(fā)現(xiàn)他們有個(gè)明顯的特點(diǎn),里面的目錄結(jié)構(gòu)基本一樣(都有src,都需要npm下載依賴,生成dist)
![Uploading 屏幕快照 2017-03-06 上午11.25.51_831470.png . . .]](http://upload-images.jianshu.io/upload_images/1808957-6e1326a80cfd024d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
于是打開(kāi)最上邊的build目錄把里面的文件看了一下
感覺(jué)壓力陡增,這尼瑪什么鬼,這東西怎么寫(xiě)??(其實(shí)是webpack配置項(xiàng))
遂上網(wǎng)查資料看文檔,發(fā)現(xiàn)有個(gè)叫vue-cli的東西,官方解釋是
A simple CLI for scaffolding Vue.js projects.
一個(gè)簡(jiǎn)單的vue項(xiàng)目腳手架(通俗的講就是一個(gè)項(xiàng)目的空殼,o我這么理解),那么我們就來(lái)用一下吧
看文檔
需求:node版本4以上,npm版本3以上,并有g(shù)it
下面運(yùn)行終端運(yùn)行命令
npm isntall -g vue-cli
好了以后運(yùn)行
vue init webpack my-project(你自己的項(xiàng)目名)
然后根據(jù)提示yes/no,enter選擇自己需要的文件,最后效果如下
這些配置文件,服務(wù)文件都不用自己寫(xiě),目錄結(jié)構(gòu)也基本通用,構(gòu)建自動(dòng)升成,后續(xù)寫(xiě)項(xiàng)目需要安裝什么模塊都在package.json里添加即可
然后我們安裝依賴運(yùn)行一下看看效果
npm isntall
npm run dev
這就是一個(gè)vue-cli的空殼子,后續(xù)寫(xiě)項(xiàng)目在相關(guān)文件夾添加相關(guān)代碼即可,以上就是搭一個(gè)vue-cli殼子的大概過(guò)程,希望對(duì)剛?cè)肟油瑢W(xué)有點(diǎn)幫助,不足之處歡迎指導(dǎo).
