1.安裝vue-cli
① 使用npm（需要安裝node環境）全局安裝webpack，打開命令行工具輸入：npm install webpack -g或者（npm install -g webpack），安裝完成之后輸入 webpack -v，如下圖，如果出現相應的版本號，則說明安裝成功。
② 全局安裝vue-cli，在cmd中輸入命令:
npm install --global vue-cli
安裝成功：
安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如下圖，如果出現相應的版本號，則說明安裝成功。
打開C:\Users\Andminster\AppData\Roaming\npm目錄下可以看到：
2.用vue-cli來構建項目
vue init webpack baoge
baoge是自定義的項目名稱，命令執行之后，會在當前目錄生成一個以該名稱命名的項目文件夾。
輸入命令后，會跳出幾個選項讓你回答：
Project name (baoge)： -----項目名稱，直接回車，按照括號中默認名字（注意這里的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters），阮一峰老師博客為什么文件名要小寫 ，可以參考一下。
Project description (A Vue.js project)： ----項目描述，也可直接點擊回車，使用默認名字
Author ()： ----作者，輸入XXXX
接下來會讓用戶選擇：
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回車
回答完畢后上圖就開始構建項目了。
② 配置完成后，可以看到目錄下多出了一個項目文件夾baoge，然后cd進入這個文件夾：
安裝依賴：
npm install
( 如果安裝速度太慢。可以安裝淘寶鏡像，打開命令行工具，輸入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝依賴cnpm i
npm install ：安裝所有的模塊，如果是安裝具體的哪個個模塊，在install 后面輸入模塊的名字即可。而只輸入install就會按照項目的根目錄下的package.json文件中依賴的模塊安裝（這個文件里面是不允許有任何注釋的），每個使用npm管理的項目都有這個文件，是npm操作的入口文件。因為是初始項目，還沒有任何模塊，所以我用npm install 安裝所有的模塊。安裝完成后，目錄中會多出來一個node_modules文件夾，這里放的就是所有依賴的模塊。
然后現在，baoge文件夾里的目錄是這樣的：
解釋下每個文件夾代表的意思(仔細看一下這張圖）：
啟動項目 npm run dev
如果瀏覽器打開之后，沒有加載出頁面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js
還有，如果本地調試項目時，建議將build 里的assetsPublicPath的路徑前綴修改為 ' ./ '（開始是 ' / '），因為打包之后，外部引入 js 和 css 文件時，如果路徑以 ' / ' 開頭，在本地是無法找到對應文件的（服務器上沒問題）。所以如果需要在本地打開打包后的文件，就得修改文件路徑。
我的端口沒有被占用，直接成功（服務啟動成功后瀏覽器會默認打開一個“歡迎頁面”）：
4.vue-cli的webpack配置分析
從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等，具體請看這篇介紹：傳送門