vue.js有著名的全家桶系列箭阶，包含了vue-router仇参，vuex， vue-resource婆殿，再加上構建工具vue-cli诈乒，就是一個完整的vue項目的核心構成。
vue-cli這個構建工具大大降低了webpack的使用難度婆芦，支持熱更新怕磨，有webpack-dev-server的支持喂饥，相當于啟動了一個請求服務器，給你搭建了一個測試環(huán)境肠鲫，只關注開發(fā)就OK员帮。
1.安裝node.js
下載安裝node.js，一路默認安裝即可导饲，安裝完畢，啟動命令行帜消，輸入命令node -v棠枉，可以看到node.js的版本號
2.安裝vue-cli
- 使用npm（需要安裝node環(huán)境）全局安裝webpack，啟動命令行泡挺，輸入如下命令：
npm install -g webpack
耐心等待安裝完成之后輸入 webpack -v，可以看到如圖所示
- 從webpack 4.X開始命浴，需要全局安裝webpack-cli
npm install webpack webpack-cli -g
- 全局安裝vue-cli娄猫，在cmd中輸入命令
npm install --global vue-cli
耐心等待安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如下圖生闲，如果出現(xiàn)相應的版本號媳溺，則說明安裝成功。
打開C:\Users\Andminster\AppData\Roaming\npm目錄下可以看到
打開node_modules也可以看到：
4.用vue-cli來構建項目
首先在D盤新建一個VueStudy作為項目存放地碍讯，然后使用命令行cd進入到項目目錄悬蔽，輸入
vue init webpack demo
需要選擇一些選項，會跳出幾個選項讓你回答：
Project name (demo)： -----項目名稱捉兴，直接回車蝎困，按照括號中默認名字（注意這里的名字不能有大寫字母）
Project description (A Vue.js project)： ----項目描述，也可直接點擊回車倍啥，使用默認名字
Author ()： ----作者禾乘，輸入你的大名
接下來會讓用戶選擇：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ù)情況下都使用伍派。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具剩胁，是用來統(tǒng)一代碼風格的诉植。
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue項目時的代碼風格Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試
-
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試
image
配置完成后摧冀，進入demo項目目錄倍踪，安裝依賴
npm install
完成后系宫，查看項目路徑下各個目錄含義
啟動項目
npm run dev
如果瀏覽器打開之后，沒有加載出頁面建车，有可能是本地的 8080 端口被占用扩借，需要修改一下配置文件 config里的index.js
運行成功（服務啟動成功后瀏覽器會默認打開一個“歡迎頁面”）
備注：
npm淘寶鏡像安裝命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
