一、安裝vue-cli
安裝vue-cli前提，你的電腦已經安裝好了Node.js,因為vue-cli 安裝是給予
NPM（包管理工具）來進行安裝的，同時安裝好的同學，建議你們把NPM下載地址指定到淘寶NPM鏡像地址，其原因就不說了，墻內人都懂。
安裝命令
$ npm install -g vue-cli // 替換了淘寶鏡像的使用 cnpm
$ vue -V // 查看vue版本號
2.8.1
-g（global）：代表全局安裝，出現了 版本號，也就說明我們的Vue-cli已經成功的安裝到了我們的計算機里了。
二、創建一個vue項目（初始化）
我們用vue init 命令來初始化項目
$ vue init <template-name> <project-name>
init : 通過vue-cli 來初始化構建一個vue項目
template-name : 模板名稱，vue-cli官方給我們提供了5種模板。
- vue-cli 官方模板
- webpack - 一個全面的webpack+vue-loader的模板，功能包括熱加載（更新），linting（語法檢測），測試和Css擴展。
- webpack-simple - 一個簡單webpack+vue-loader的模板，不包含其他功能，讓你快速構建vue開發環境。
- browserify - 一個全面的Browerify+vueify的模板，功能包括熱加載，linting，單元測試。
- browserify-simple - 一個簡單的Browerify+vueify的模板，不包含其他功能，讓你快速的構建vue的開發環境。
- simple - 一個最簡單的單頁應用模板。
<project-name> : 標識項目名稱
在實際開發中，普遍是使用webpack這個模板，我們來實際創建一個項目吧。
$ vue init webpack vuecliTest
執行命令后，會詢問我們幾個簡單的選項，根據自己的需要進行確認就好。
- Project name :項目名稱 ，如果不需要更改直接回車就可以了。注意：這里不能使用大寫，所以我把名稱改成了vueclitest
- Project description:項目描述，默認為A Vue.js project,直接回車，不用編寫。
- Author：作者，如果你有配置git的作者，他會讀取。
- Install vue-router? 是否安裝vue的路由插件，我們這里需要安裝，所以選擇Y
- Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。我們這里不需要輸入n，如果你是大型團隊開發，最好是進行配置。
- setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha，我們這里不需要，所以輸入n。
- Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行為模擬測試，我們這里不需要，所以輸入n。
項目構建完成
三、運行項目
根據上圖命令提示：
$ cd vuecliTest //進入項目目錄
$ npm install //安裝項目依賴包，根據package.json里的包，這里替換了淘寶鏡像 使用`cnpm`來安裝
$ npm run dev //開發模式下運行我們的項目程序。給我們自動構建了開發用的服務器和瀏覽器中打開，并實時監視我們的代碼更改，即時呈現給我們。
運行項目
出現上圖，說明我們的項目初始化已經成功，我們可以開始來自由編寫我們的程序了。
四、Vue-cli 項目目錄解析
|-- build // 項目構建(webpack)相關代碼
| |-- build.js // 生產環境構建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- dev-client.js // 熱重載相關
| |-- dev-server.js // 構建本地服務器
| |-- utils.js // 構建工具相關
| |-- webpack.base.conf.js // webpack基礎配置
| |-- webpack.dev.conf.js // webpack開發環境配置
| |-- webpack.prod.conf.js // webpack生產環境配置
|-- config // 項目開發環境配置
| |-- dev.env.js // 開發環境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產環境變量
| |-- test.env.js // 測試環境變量
|-- src // 源碼目錄
| |-- assets // 資源目錄
| |-- components // vue公共組件
| |-- store // vuex的狀態管理
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件，加載各種公共組件
|-- static // 靜態文件，比如一些圖片，json數據等
| |-- data // 群聊分析得到的數據用于數據可視化
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
| |-- .postcssrc.js // 通過JS插件裝換樣式的工具
|-- README.md // 項目說明
|-- favicon.ico
|-- index.html // 入口頁面
|-- package.json // 項目基本信息
