一、安裝vue-cli
安裝vue-cli前提，你的電腦已經(jīng)安裝好了Node.js,因為vue-cli 安裝是給予
NPM（包管理工具）來進行安裝的，同時安裝好的同學(xué)温亲，建議你們把NPM下載地址指定到淘寶NPM鏡像地址棚壁，其原因就不說了，墻內(nèi)人都懂铸豁。
安裝命令
$ npm install -g vue-cli // 替換了淘寶鏡像的使用 cnpm
$ vue -V // 查看vue版本號
2.8.1
-g（global）：代表全局安裝，出現(xiàn)了 版本號菊碟，也就說明我們的Vue-cli已經(jīng)成功的安裝到了我們的計算機里了节芥。
二、創(chuàng)建一個vue項目（初始化）
我們用vue init 命令來初始化項目
$ vue init <template-name> <project-name>
init : 通過vue-cli 來初始化構(gòu)建一個vue項目
template-name : 模板名稱逆害，vue-cli官方給我們提供了5種模板头镊。
- vue-cli 官方模板
- webpack - 一個全面的webpack+vue-loader的模板，功能包括熱加載（更新）魄幕，linting（語法檢測）相艇，測試和Css擴展。
- webpack-simple - 一個簡單webpack+vue-loader的模板纯陨，不包含其他功能坛芽，讓你快速構(gòu)建vue開發(fā)環(huán)境。
- browserify - 一個全面的Browerify+vueify的模板翼抠，功能包括熱加載咙轩，linting，單元測試阴颖。
- browserify-simple - 一個簡單的Browerify+vueify的模板活喊，不包含其他功能，讓你快速的構(gòu)建vue的開發(fā)環(huán)境量愧。
- simple - 一個最簡單的單頁應(yīng)用模板钾菊。
<project-name> : 標識項目名稱
在實際開發(fā)中，普遍是使用webpack這個模板偎肃，我們來實際創(chuàng)建一個項目吧煞烫。
$ vue init webpack vuecliTest
執(zhí)行命令后，會詢問我們幾個簡單的選項累颂，根據(jù)自己的需要進行確認就好红竭。
- Project name :項目名稱 ，如果不需要更改直接回車就可以了喘落。注意：這里不能使用大寫茵宪，所以我把名稱改成了vueclitest
- Project description:項目描述，默認為A Vue.js project,直接回車瘦棋，不用編寫稀火。
- Author：作者，如果你有配置git的作者赌朋，他會讀取凰狞。
- Install vue-router? 是否安裝vue的路由插件篇裁，我們這里需要安裝，所以選擇Y
- Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風(fēng)格赡若。我們這里不需要輸入n达布，如果你是大型團隊開發(fā)，最好是進行配置逾冬。
- setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha黍聂，我們這里不需要，所以輸入n身腻。
- Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行為模擬測試产还，我們這里不需要，所以輸入n嘀趟。
項目構(gòu)建完成
三脐区、運行項目
根據(jù)上圖命令提示：
$ cd vuecliTest //進入項目目錄
$ npm install //安裝項目依賴包，根據(jù)package.json里的包她按，這里替換了淘寶鏡像 使用`cnpm`來安裝
$ npm run dev //開發(fā)模式下運行我們的項目程序牛隅。給我們自動構(gòu)建了開發(fā)用的服務(wù)器和瀏覽器中打開，并實時監(jiān)視我們的代碼更改酌泰，即時呈現(xiàn)給我們倔叼。
運行項目
出現(xiàn)上圖，說明我們的項目初始化已經(jīng)成功宫莱，我們可以開始來自由編寫我們的程序了丈攒。
四、Vue-cli 項目目錄解析
|-- build // 項目構(gòu)建(webpack)相關(guān)代碼
| |-- build.js // 生產(chǎn)環(huán)境構(gòu)建代碼
| |-- check-version.js // 檢查node授霸、npm等版本
| |-- dev-client.js // 熱重載相關(guān)
| |-- dev-server.js // 構(gòu)建本地服務(wù)器
| |-- utils.js // 構(gòu)建工具相關(guān)
| |-- webpack.base.conf.js // webpack基礎(chǔ)配置
| |-- webpack.dev.conf.js // webpack開發(fā)環(huán)境配置
| |-- webpack.prod.conf.js // webpack生產(chǎn)環(huán)境配置
|-- config // 項目開發(fā)環(huán)境配置
| |-- dev.env.js // 開發(fā)環(huán)境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產(chǎn)環(huán)境變量
| |-- test.env.js // 測試環(huán)境變量
|-- src // 源碼目錄
| |-- assets // 資源目錄
| |-- components // vue公共組件
| |-- store // vuex的狀態(tài)管理
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件巡验，加載各種公共組件
|-- static // 靜態(tài)文件，比如一些圖片碘耳，json數(shù)據(jù)等
| |-- data // 群聊分析得到的數(shù)據(jù)用于數(shù)據(jù)可視化
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
| |-- .postcssrc.js // 通過JS插件裝換樣式的工具
|-- README.md // 項目說明
|-- favicon.ico
|-- index.html // 入口頁面
|-- package.json // 項目基本信息
