一、瞭解vue-cli：
- 在真實的vue項目中是要藉助webpack打包工具的，以便於維護。但是每做一個項目都要安裝webpack的話是很麻煩的，於是vue就提供了腳手架工具Vue-cli,通過這個腳手架就可以快速的搭建一個vue項目，並且這個腳手架還自帶了webpack的各種配置。通過這個工具我們就可以迅速上手工程級別的vue項目開發。
- 當用vue-cli構建一個工程的時候，發現需要熟練掌握es6，而vue的全家桶(vue-cli,vue-router,vue-resource,vuex)還是都要用上的。vue.js有著名的全家桶系列，包含了vue-router，vuex，vue-resource，再加上構建工具vue-cli，就是一個完整的vue項目的核心構成。
二、安裝vue-cli
【注意】在安裝vue-cli之前需要提前安裝好node和npm
（1） 在Vue的管網的學習菜單欄下的教程部分，在裏面可以找到vue-cli。
根據文檔:https://cli.vuejs.org/
命令進行安裝
打開命令行( win+r)
或者根據如下命令：
#全局安裝
$ npm install --global vue-cli
#創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
#安裝依賴
$ cd my-project
$ npm run dev
（2）其中npm run dev 命令是啓動項目的，這個命令實際上是啓動文件package.json裏面的webpack-dev-server
（3）輸入命令後，會跳出幾個選項讓你回答：
- Project name (baoge)：
-----項目名稱，直接回車，按照括號中默認名字（注意這裏的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters） - Project description (A Vue.js project)：
----項目描述，也可直接點擊回車，使用默認名字Author ()： ----作者，輸入dongxili
接下來會讓用戶選擇：
- 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回車
（4）安裝完成後可以在自己建立的項目目錄中看到如下文件,同時會在命令行提示我們可以在localhost:8080這個網址訪問我們的項目
（5）每個文件夾的大概意思是如下圖：
三、使用vue-cli
自己的項目文件都需要放到 src 文件夾下。
在項目開發完成之後，可以輸入 npm run build 來進行打包工作。打包完成後，會生成 dist 文件夾,項目上線時，只需要將 dist 文件夾放到服務器就行了。