記錄一下用vue-cli構(gòu)建項目的配置過程奔穿。
1蚣旱、全局安裝webpack和vue-cli
npm執(zhí)行三條命令：
npm install webpack -g
npm install webpack-cli -g
npm install --global vue-cli
2屹徘、構(gòu)建項目
在D盤新建一個文件夾掌逛，命令行cd進(jìn)入目錄沃呢；
執(zhí)行命令
vue init webpack project
這里的project是你自定義的項目名装盯，注意項目名不要用大寫件舵，原因可參考阮一峰老師的這篇博文：http://www.ruanyifeng.com/blog/2017/02/filename-should-be-lowercase.html
完成后颤练，會多出一個project文件夾碍舍，進(jìn)入文件夾柠座，執(zhí)行npm install命令。
npm install
看一下現(xiàn)在的目錄結(jié)構(gòu)：
image.png
我們主要用的是src源碼目錄片橡，其中assets是放資源文件的目錄妈经，compontents放組件，router放路由捧书，App.vue是頁面級組件吹泡，main.js是入口文件。
3经瓷、啟動項目
打開http://127.0.0.1:8080
image.png
如果8080端口被占用爆哑，則修改config文件夾下的index.js文件，修改端口了嚎。
image.png
我們在src目錄寫源碼泪漂，打包時執(zhí)行npm run build進(jìn)行打包廊营，打包后發(fā)現(xiàn)多出來一個dist目錄，打包后的文件都在這個目錄下萝勤。
npm run build
4露筒、安裝調(diào)試工具vue-devtools
可以翻墻安裝；不翻墻的可以手動安裝敌卓。
首先克隆github上的項目：
git clone https://github.com/vuejs/vue-devtools.git
然后進(jìn)入項目目錄慎式，執(zhí)行npm install
npm install
build：
npm run build
谷歌進(jìn)入chrome://extensions，加載已解壓的拓展程序趟径。
image.png
image.png
成功：
image.png
