1. 作用
快速創建一個基於webpack模板的項目
2. 安裝工具
-
安裝webpack：使用npm全局安裝webpack,打開命令行工具，輸入
npm install webpack -g，安裝完成之后，輸入webpack -v即可查看當前安裝版本，出現版本號說明安裝成功 -
全局安裝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 運行加編譯，既然已經說了推薦，就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時，已經有推薦了就選擇第一個了 -
Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數情況下都使用，這里就輸入“y”后回車即可。
-
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，一般項目中都會使用。
接下來也是選擇題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回車
-
-
配置完成之后，Vue目錄下面多了一個vue-cli-test的文件夾，進入文件夾，下載依賴
npm install
-
修改配置，啟動項目
- 修改 config里面的index.js文件
-
修改端口號是為了防止端口號被占用，修改assetsPublicPath屬性是因為打包后，外部引入js和css文件時，如果路徑是以
'/'開頭，在本地是無法找到對應文件的，所以如果要在本地打開打包后的文件，就得修改路勁為'/' -
輸入
npm run dev啟動項目，成功后輸入訪問地址，顯示如下界面
4. 項目目錄介紹
在 package.json中可以看到開發和生產環境的配置文件入口
- 可以看到dev中的設置，build/webpack.dev.conf.js，該文件是開發環境中webpack的配置入口。
- 在webpack.dev.conf.js中出現webpack.base.conf.js，這個文件是開發環境和生產環境，甚至測試環境，這些環境的公共webpack配置。可以說，這個文件相當重要。
- 還有config/index.js 、build/utils.js 、build/build.js等，具體請看這篇介紹：
https://segmentfault.com/a/1190000008644830
5. 打包部署
- 自己開發的項目文件都需要放到src目錄下面
- 在項目開發完成之后，使用
npm run build來打包項目，打包完成后會生成dist文件夾，如果已修改了文件路徑，可以直接在本地打開 - 項目上線時，直接將dist文件夾放到服務器即可