1. 作用
快速創(chuàng)建一個基于webpack模板的項目
2. 安裝工具
安裝webpack：使用npm全局安裝webpack,打開命令行工具辙纬，輸入
npm install webpack -g瓤湘，安裝完成之后吏恭，輸入webpack -v即可查看當前安裝版本姐赡，出現(xiàn)版本號說明安裝成功全局安裝vue-cli：在命令行輸入
npm install --global vue-cli注整，安裝完成之后军熏，輸入vue -V查看當前版本號
3. 使用Vue-cli來構建項目
新建文件夾Vue，進入文件夾实蔽，輸入
vue init webpack vue-cli-test荡碾，其中vue-cli-test為新項目文件名-
跳入選擇項來進行項目信息填寫與確認
Project name (baoge)： -----項目名稱，直接回車局装，按照括號中默認名字（注意這里的名字不能有大寫字母坛吁，如果有會報錯Sorry, name can no longer contain capital letters）劳殖，阮一峰老師博客為什么文件名要小寫 ，可以參考一下拨脉。
Project description (A Vue.js project)： ----項目描述哆姻，也可直接點擊回車，使用默認名字
Author ()： ----作者玫膀，輸入mapengfei 接下來會讓用戶選擇：
Runtime + Compiler: recommended for most users 運行加編譯矛缨，既然已經(jīng)說了推薦，就選它了 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時帖旨，已經(jīng)有推薦了就選擇第一個了
Install vue-router? (Y/n) 是否安裝vue-router劳景，這是官方的路由，大多數(shù)情況下都使用碉就，這里就輸入“y”后回車即可盟广。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具瓮钥，是用來統(tǒng)一代碼風格的筋量，一般項目中都會使用。 接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設碉熄，編寫vue項目時的代碼風格桨武，直接y回車
Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，選擇安裝y回車
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 锈津，選擇安裝y回車
初始化測試.png
-
配置完成之后呀酸，Vue目錄下面多了一個vue-cli-test的文件夾，進入文件夾琼梆，下載依賴
npm install下載npm依賴.png
-
修改配置性誉，啟動項目
-
修改 config里面的index.js文件
修改配置.png 修改端口號是為了防止端口號被占用，修改assetsPublicPath屬性是因為打包后茎杂，外部引入js和css文件時错览，如果路徑是以
'/'開頭，在本地是無法找到對應文件的煌往，所以如果要在本地打開打包后的文件倾哺，就得修改路勁為'/'-
輸入
npm run dev啟動項目，成功后輸入訪問地址刽脖，顯示如下界面
啟動成功.png
成功界面展示.png
-
4. 項目目錄介紹
在 package.json中可以看到開發(fā)和生產(chǎn)環(huán)境的配置文件入口
可以看到dev中的設置羞海，build/webpack.dev.conf.js，該文件是開發(fā)環(huán)境中webpack的配置入口曲管。
在webpack.dev.conf.js中出現(xiàn)webpack.base.conf.js却邓，這個文件是開發(fā)環(huán)境和生產(chǎn)環(huán)境，甚至測試環(huán)境翘地，這些環(huán)境的公共webpack配置申尤“┠唬可以說衙耕，這個文件相當重要昧穿。
還有config/index.js 、build/utils.js 橙喘、build/build.js等时鸵，具體請看這篇介紹： https://segmentfault.com/a/1190000008644830
5. 打包部署
自己開發(fā)的項目文件都需要放到src目錄下面
在項目開發(fā)完成之后，使用
npm run build來打包項目厅瞎，打包完成后會生成dist文件夾饰潜，如果已修改了文件路徑，可以直接在本地打開項目上線時和簸，直接將dist文件夾放到服務器即可
