之前分享過 不使用vue-cli，一步一步構(gòu)建Vue項(xiàng)目，這篇文章是主要是為了更好的理解運(yùn)行時(shí)構(gòu)建vue項(xiàng)目（都是以.vue為后綴的獨(dú)立組件）的構(gòu)建過程和webpack相關(guān)功能的，對(duì)vue初學(xué)者比較友好。
但是因?yàn)槭袌?chǎng)需要或者說是趨勢(shì)，需要更成熟的vue項(xiàng)目架構(gòu)，且能快速初始化一個(gè)vue項(xiàng)目，所以使用vue-cli也成為了開發(fā)vue項(xiàng)目的重要技能。
1、node安裝
vue-cli的使用是需要Node環(huán)境的，去Node.js中文網(wǎng)下載node安裝包就可以了，按著向?qū)б徊讲阶甙惭b完成就可以了。
2、安裝vue-cli
node安裝完成后，在你想創(chuàng)建項(xiàng)目的文件夾內(nèi)空白處，按住鍵盤shift鍵，鼠標(biāo)右鍵菜單，點(diǎn)擊在此處打開命令窗口，即可在當(dāng)前路徑下打開cmd窗口，輸入命令：npm install vue-cli -g
回車執(zhí)行。-g 代表全局安裝，這樣你在任何文件夾路徑里，都可以使用vue-cli的命令。
輸入命令：vue --version 顯示版本號(hào)即代表vue-cli安裝成功。至此，初始化vue項(xiàng)目所需的環(huán)境就全部安裝完成了，然后就可以開始生成項(xiàng)目了。使用命令：vue init webpack demovue意思是使用webpack作為模板，初始化一個(gè)名稱為demovue的項(xiàng)目，之后會(huì)出現(xiàn)一些配置選項(xiàng)，按照你的需求選擇 Yes or No
項(xiàng)目初始化需要網(wǎng)絡(luò)環(huán)境，記得要保證電腦連接網(wǎng)絡(luò)呦！
經(jīng)過上述配置一路回車下來，程序就會(huì)執(zhí)行，幾十秒后，你的當(dāng)前文件夾下就會(huì)出現(xiàn)一個(gè)demovue的文件夾，文件夾內(nèi)就是你的項(xiàng)目結(jié)構(gòu)了。打開文件夾，在 demovue 文件夾中，打開 cmd 命令窗口，輸入命令： npm run dev即可打開剛剛生成的vue項(xiàng)目了。如果命令失敗，請(qǐng)確認(rèn)路徑是否正確，必須在 demovue 文件夾下（如：D:\test-demo\demovue）執(zhí)行此命令。
程序執(zhí)行完成以后，虛擬服務(wù)器啟動(dòng)完成，會(huì)自動(dòng)打開瀏覽器預(yù)覽項(xiàng)目，如果沒有自動(dòng)打開，在瀏覽器中輸入生成的地址（如：http://localhost:8080），即可預(yù)覽項(xiàng)目。
在config/index.js 中可修改配置 autoOpenBrowser: true 在下次打開項(xiàng)目時(shí)，就會(huì)自動(dòng)打開瀏覽器進(jìn)行項(xiàng)目預(yù)覽了。
