Vue 2.0 開發聊天程序（一）: 初建項目

努力了，不必定能成功，可是不努力，感受好舒服啊
　　　　　　　　　　　　　　　　　　　——努訓

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

一丶環境配置

• node.js
  使用6.2.2版原本開發
  我使用了nvm來管理個人node，nvm能夠很方便的切換要使用的node版本

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

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

• sublime-text 3
  這款編輯器很是好用，雖然沒有webstorm那麼全面，可是裝多點插件也差很少啊
  裝瞭如下好用的插件：

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

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

  3. ColorPicker 裝了這款插件以後就能夠愉快的編輯顏色了

  4. Emmet 能夠自動拓展html和css代碼的插件

  5. SublimeCodeIntel 代碼提示了不全插件 支持不少語言

  6. Alignment 代碼對齊插件 以前用2的時候安裝了 如今3上面尚未安裝

  7. SublimeEnhancements 這個插件給側邊欄增長了不少的拓展功能，好比新建文件或文件夾，用瀏覽器打開文件等

• webpack 安裝版本 webpack@1.14.0
  webpack是一款前端資源模塊化管理和打包工具，它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader 的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
  學習連接：http://blog.csdn.net/keliyxyz...
  確認安裝webpack成功並查看安裝的webpack版本

  webpack

  直接在命令行輸入webpack？，對的。若是安裝成功，就能看到一下的信息，第一行的1.14.0就是我安裝的版本號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是一個用於生成vue項目的腳手架工具，不推薦新手直接用vue-cli，尤爲是對 Node.js 構建工具不夠了解的同窗。還好本身會點node，因而很不害臊的用了

  npm install -g vue-cli

  一樣在命令行輸入 vue -V 檢測是否安裝成功並查看安裝的版本，注意是大寫的V
  若是成功返回：

  C:\Users\59227\Desktop>vue -V
  2.5.1

• vuex 我安裝的版本爲2.1.1
  Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
  能夠理解爲組件通訊的集中管理。
  安裝和使用在以後的實踐過程當中講解。

• vue-router
  用於SPA實現單頁路由，相似angular的angular-ui-router。
  安裝和使用在以後的實踐過程當中講解。

2、開始搭建項目x-chat

搭建項目以前，去看了別人的文章，試着擼了一遍代碼，也就是個重複造輪子的過程，感受沒有意思，因此才萌生出寫個本身的項目的想法，正好答應幫別人作一個npp聊天插件的前端，就拿來練手了。

直接開始：

前面提到了vue-cli腳手架工具，使用起來很簡單，在你想建立項目的目錄下輸入cmd：

vue init webpack x-chat //x-chat就是項目的名字

在輸入以後會出現許多配置項，一路enter就能夠了。可是其中的ESLint推薦不使用(運行的時候會檢查代碼規範，規範什麼的太麻煩，畢竟是小demo)，ESlint是能夠配置規範的，在多人協做開發的過程當中，代碼的規範很是的重要。有一套良好的代碼規範，對於項目的開發和維護都很友好。我這裏不用，是由於配置麻煩，以及運行的時候總報錯很影響心情。。

下面對每一個配置項作個註釋：

? Project name x-chat   //項目名默認就是x-caht
? Project description A Vue.js project // 文檔描述，會在README.md文件上生成輸入的內容，默認 A Vue.js project
? Author _**** <****@**.com> // 做者，若是有git，就是讀取git的User信息
? Vue build standalone // 有兩個選項，第一個選項寫着recommended for most users果斷選了（至於幹什麼用到並不知道）
? Use ESLint to lint your code? Yes// 是否使用ESlint 默認是
? Pick an ESLint preset Standard // 選這個一個ESlint類型
? Setup unit tests with Karma + Mocha? Yes //使用單元測試工具karma和mocha 默認是
? Setup e2e tests with Nightwatch? Yes // 使用e2e測試框架 NightWatch 默認是

打開咱們的項目，能夠看到以下的目錄結構：

• build：webpack打包配置文件夾

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

• src：源碼存放文件夾

• static： 靜態文件存放位置

• test：測試代碼存放位置，展開能夠看到單元測試和e2e測試兩個目錄

• .babelrc ： babel的配置文件，有關babel可參見：http://www.ruanyifeng.com/blo...

• index.html: 單頁應用的html文件，能夠當作是一個窗口(window)

• package.json: npm的配置文件，配置項目信息，須要安裝的模塊之類

• README.md： 項目說明文檔

目錄分析完了，怎麼啓動這個項目呢？

在啓動以前還須要安裝咱們的依賴模塊，也就是package.json裏面的模塊，在根目錄下cmd：

npm install

這個過程有點久，建議將npm配置爲國內鏡像，好比我以前說得淘寶鏡像
安裝完了以後咱們的項目目錄會多出一個node_modules目錄，裏面會有不少不少文件夾，賊大。

安裝完以後就運行咱們項目了，在根目錄下cmd：

npm run dev

這個命令能夠在package.json中找到：

{
  "name": "x-chat",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "ex_fulin <lin.fu@partner.midea.com>",
  "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（其實會自動彈出），就能夠看到以下頁面

大功告成！！這一章就到這裏了。