摘要：它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。安裝和使用在之后的實(shí)踐過程中講解。有一套良好的代碼規(guī)范，對(duì)于項(xiàng)目的開發(fā)和維護(hù)都很友好。

努力了，不一定能成功，但是不努力，感覺好舒服啊
　　　　　　　　　　　　　　　　　　　——努訓(xùn)

沒有了解過vue1.*，直接上手vue2.0；雖然有些吃力但還是很愉快了學(xué)下來了。

node.js
使用6.2.2版本來開發(fā)
我使用了nvm來管理我的node，nvm可以很方便的切換要使用的node版本

npm 使用3.9.5版本
npm配置了淘寶鏡像

npm config set registry https://registry.npm.taobao.org

sublime-text 3
這款編輯器非常好用，雖然沒有webstorm那么全面，但是裝多點(diǎn)插件也差不多啊
裝了以下好用的插件：

Vue Syntax Highlight 這個(gè)必須的好嘛，沒有這個(gè).vue文件都不高亮

Theme - Coffee 比較喜歡的一款配色

ColorPicker 裝了這款插件之后就可以愉快的編輯顏色了

Emmet 可以自動(dòng)拓展html和css代碼的插件

SublimeCodeIntel 代碼提示了不全插件 支持很多語言

Alignment 代碼對(duì)齊插件 之前用2的時(shí)候安裝了 現(xiàn)在3上面還沒有安裝

SublimeEnhancements 這個(gè)插件給側(cè)邊欄增加了很多的拓展功能，比如新建文件或文件夾，用瀏覽器打開文件等

webpack 安裝版本 [email protected]
webpack是一款前端資源模塊化管理和打包工具，它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際需要的時(shí)候再異步加載。通過 loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
學(xué)習(xí)鏈接：http://blog.csdn.net/keliyxyz...
確認(rèn)安裝webpack成功并查看安裝的webpack版本

    webpack

直接在命令行輸入webpack？，對(duì)的。如果安裝成功，就能看到一下的信息，第一行的1.14.0就是我安裝的版本號(hào)o(∩_∩)o

    webpack 1.14.0
Usage: https://webpack.github.io/docs/cli.html

Options:
  --help, -h, -?
  --config
  --context
  --entry
  --module-bind
  --module-bind-post
  --module-bind-pre
  --output-path
  --output-file
  --output-chunk-file

vue-cli 我安裝的版本2.5.1
vue-cli是一個(gè)用于生成vue項(xiàng)目的腳手架工具，不推薦新手直接用vue-cli，尤其是對(duì) Node.js 構(gòu)建工具不夠了解的同學(xué)。還好自己會(huì)點(diǎn)node，于是很不害臊的用了

npm install -g vue-cli

同樣在命令行輸入 vue -V 檢測(cè)是否安裝成功并查看安裝的版本，注意是大寫的V
如果成功返回：

C:Users59227Desktop>vue -V
2.5.1

vuex 我安裝的版本為2.1.1
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能。
可以理解為組件通信的集中管理。
安裝和使用在之后的實(shí)踐過程中講解。

vue-router
用于SPA實(shí)現(xiàn)單頁路由，類似angular的angular-ui-router。
安裝和使用在之后的實(shí)踐過程中講解。

搭建項(xiàng)目之前，去看了別人的文章，試著擼了一遍代碼，也就是個(gè)重復(fù)造輪子的過程，感覺沒有意思，所以才萌生出寫個(gè)自己的項(xiàng)目的想法，正好答應(yīng)幫別人做一個(gè)npp聊天插件的前端，就拿來練手了。

直接開始：

前面提到了vue-cli腳手架工具，使用起來很簡(jiǎn)單，在你想創(chuàng)建項(xiàng)目的目錄下輸入cmd：

    vue init webpack x-chat //x-chat就是項(xiàng)目的名字

在輸入之后會(huì)出現(xiàn)許多配置項(xiàng)，一路enter就可以了。但是其中的ESLint推薦不使用(運(yùn)行的時(shí)候會(huì)檢查代碼規(guī)范，規(guī)范什么的太麻煩，畢竟是小demo)，ESlint是可以配置規(guī)范的，在多人協(xié)作開發(fā)的過程中，代碼的規(guī)范非常的重要。有一套良好的代碼規(guī)范，對(duì)于項(xiàng)目的開發(fā)和維護(hù)都很友好。我這里不用，是因?yàn)榕渲寐闊?，以及運(yùn)行的時(shí)候總報(bào)錯(cuò)很影響心情。。

下面對(duì)每個(gè)配置項(xiàng)做個(gè)注釋：

? Project name x-chat   //項(xiàng)目名默認(rèn)就是x-caht
? Project description A Vue.js project // 文檔描述，會(huì)在README.md文件上生成輸入的內(nèi)容，默認(rèn) A Vue.js project
? Author _**** <****@**.com> // 作者，如果有g(shù)it，就是讀取git的User信息
? Vue build standalone // 有兩個(gè)選項(xiàng)，第一個(gè)選項(xiàng)寫著recommended for most users果斷選了（至于干什么用到并不知道）
? Use ESLint to lint your code? Yes// 是否使用ESlint 默認(rèn)是
? Pick an ESLint preset Standard // 選這個(gè)一個(gè)ESlint類型
? Setup unit tests with Karma + Mocha? Yes //使用單元測(cè)試工具karma和mocha 默認(rèn)是
? Setup e2e tests with Nightwatch? Yes // 使用e2e測(cè)試框架 NightWatch 默認(rèn)是

打開我們的項(xiàng)目，可以看到如下的目錄結(jié)構(gòu)：

build：webpack打包配置文件夾

config： 同樣是打包配置的文件夾，只是職能不同

src：源碼存放文件夾

static： 靜態(tài)文件存放位置

test：測(cè)試代碼存放位置，展開可以看到單元測(cè)試和e2e測(cè)試兩個(gè)目錄

.babelrc ： babel的配置文件，有關(guān)babel可參見：http://www.ruanyifeng.com/blo...

index.html: 單頁應(yīng)用的html文件，可以看成是一個(gè)窗口(window)

package.json: npm的配置文件，配置項(xiàng)目信息，需要安裝的模塊之類

README.md： 項(xiàng)目說明文檔

目錄分析完了，怎么啟動(dòng)這個(gè)項(xiàng)目呢？

在啟動(dòng)之前還需要安裝我們的依賴模塊，也就是package.json里面的模塊，在根目錄下cmd：

    npm install

這個(gè)過程有點(diǎn)久，建議將npm配置為國內(nèi)鏡像，比如我之前說得淘寶鏡像
安裝完了之后我們的項(xiàng)目目錄會(huì)多出一個(gè)node_modules目錄，里面會(huì)有很多很多文件夾，賊大。

安裝完之后就運(yùn)行我們項(xiàng)目了，在根目錄下cmd：

    npm run dev

這個(gè)命令可以在package.json中找到：

{
  "name": "x-chat",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "ex_fulin ",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js", //就是這里
    "build": "node build/build.js",
    "unit": "karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e"
  },
  "dependencies": {
    "vue": "^2.1.0"
  },
    .....

然后瀏覽器中輸入localhost:8080（其實(shí)會(huì)自動(dòng)彈出），就可以看到如下頁面

大功告成?。∵@一章就到這里了。