摘要：一介紹是官方提供的腳手架，用來(lái)快速建立項(xiàng)目。標(biāo)識(shí)項(xiàng)目名稱(chēng)，這個(gè)你可以根據(jù)自己的項(xiàng)目來(lái)起名字。初始化完成之后，進(jìn)入安裝目錄，必須先安裝項(xiàng)目依賴(lài)，否則無(wú)法運(yùn)行。源文件需要注意的是是入口文件，下的是路由文件，文件是組件文件。

vue-cli是官方提供的腳手架，用來(lái)快速建立項(xiàng)目。

npm install vue-cli -g//全局安裝

vue init  

：表示模板名稱(chēng)，vue-cli官方為我們提供了5種模板，
webpack-一個(gè)全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測(cè)和CSS擴(kuò)展。
webpack-simple-一個(gè)簡(jiǎn)單webpack+vue-loader的模板，不包含其他功能，讓你快速的搭建vue的開(kāi)發(fā)環(huán)境。
browserify-一個(gè)全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測(cè)。
browserify-simple-一個(gè)簡(jiǎn)單Browserify+vueify的模板，不包含其他功能，讓你快速的搭建vue的開(kāi)發(fā)環(huán)境。
simple-一個(gè)最簡(jiǎn)單的單頁(yè)應(yīng)用模板。
：標(biāo)識(shí)項(xiàng)目名稱(chēng)，這個(gè)你可以根據(jù)自己的項(xiàng)目來(lái)起名字。
在實(shí)際開(kāi)發(fā)中，一般我們都會(huì)使用webpack這個(gè)模板

初始化命令是一條交互命令，用以完善項(xiàng)目信息：
Project name :項(xiàng)目名稱(chēng) ，如果不需要更改直接回車(chē)就可以了。注意：這里不能使用大寫(xiě)，所以我把名稱(chēng)改成了vueclitest
Project description:項(xiàng)目描述，默認(rèn)為A Vue.js project,直接回車(chē)，不用編寫(xiě)。
Author：作者，如果你有配置git的作者，他會(huì)讀取。
Install vue-router? 是否安裝vue的路由插件，我們這里需要安裝，所以選擇Y
Use ESLint to lint your code? 是否用ESLint來(lái)限制你的代碼錯(cuò)誤和風(fēng)格。我們這里不需要輸入n，如果你是大型團(tuán)隊(duì)開(kāi)發(fā)，最好是進(jìn)行配置。
setup unit tests with Karma + Mocha? 是否需要安裝單元測(cè)試工具Karma+Mocha，我們這里不需要，所以輸入n。
Setup e2e tests with Nightwatch?是否安裝e2e來(lái)進(jìn)行用戶(hù)行為模擬測(cè)試。

初始化完成之后，進(jìn)入安裝目錄，必須先安裝項(xiàng)目依賴(lài)，否則無(wú)法運(yùn)行。

npm install//安裝依賴(lài)

安裝完成依賴(lài)之后，看看是否可以正常運(yùn)行。

npm run dev

.
|-- build                            // 項(xiàng)目構(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開(kāi)發(fā)環(huán)境配置
|   |-- webpack.prod.conf.js         // webpack生產(chǎn)環(huán)境配置
|-- config                           // 項(xiàng)目開(kāi)發(fā)環(huán)境配置
|   |-- dev.env.js                   // 開(kāi)發(fā)環(huán)境變量
|   |-- index.js                     // 項(xiàng)目一些配置變量
|   |-- prod.env.js                  // 生產(chǎn)環(huán)境變量
|   |-- test.env.js                  // 測(cè)試環(huán)境變量
|-- src                              // 源碼目錄
|   |-- components                     // vue公共組件
|   |-- store                          // vuex的狀態(tài)管理
|   |-- App.vue                        // 頁(yè)面入口文件
|   |-- main.js                        // 程序入口文件，加載各種公共組件
|-- static                           // 靜態(tài)文件，比如一些圖片，json數(shù)據(jù)等
|   |-- data                           // 群聊分析得到的數(shù)據(jù)用于數(shù)據(jù)可視化
|-- .babelrc                         // ES6語(yǔ)法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳需要忽略的文件格式
|-- README.md                        // 項(xiàng)目說(shuō)明
|-- favicon.ico 
|-- index.html                       // 入口頁(yè)面
|-- package.json                     // 項(xiàng)目基本信息
.

已上文件，有兩大部分
項(xiàng)目源文件和配置文件
配置文件主要包括webpack，webpack是打包管理器，這又是另一個(gè)學(xué)習(xí)的重點(diǎn)。
源文件需要注意的是main.js是入口文件，router下的是路由文件，.vue文件是組件文件。