Vue 2.0 開發聊天程序（二）真正的開始

借我殺死庸碌的情懷，借我縱容的悲愴與哭喊
　　　　　　　　　　　　　　　　　　　- 謝知非

上一節已經把架子搭好了，接下來就要開始真正的使用vue2.0進行開發了。廢話很少說，先撈到幾句(^__^) 。

1. 既然是SPA項目，先把路由搞定

2. 既然是基於組件的開發，那組件怎麼寫，組件之間的通訊是個大問題

3. 確定有一個主對象，來控制全局的公共參數、方法

4. websocket要怎麼和vue完美結合

5. 我沒有服務器，後端怎麼辦？

以上是我羅列出來的關鍵，接下來的開發都是基於這些觀點的。

1、啓動原理

打開咱們的src目錄，能看到這樣的結構：

很簡單有木有，assets存放資源。components存放組件，也就是說咱們的.vue文件就存放在這裏，App.vue是咱們掛載的組件，main.js是入口文件。

.vue 文件是什麼？

不得不說，.vue文件真的很像一個小盒子，它把一個組件的html，css，js都存放到了一塊兒，就像一副撲克，很是的完整，拆開就能打鬥地主，多拿兩幅撲克能夠玩升級，雖然我不玩。
App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
/*js是些什麼鬼，看都看不懂*/
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

除了js部分比較陌生，其餘的都是old friend了。

先從入口文件提及....

太簡單了把，整個入口文件，引入了vue(這裏是node_modules中的vue模塊，也就是vue框架)，還有App(也就是App.vue)。new 了一個 Vue並傳入了一個對象。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'  // 沒有加路徑，會默認去node_modules找
import App from './App' // 沒有加後綴會根據對應的名稱匹配

/* eslint-disable no-new */
new Vue({
  el: '#app', // 掛載到id=app的element上 提供一個在頁面上已存在的 DOM 元素做爲 Vue 實例的掛載目標。能夠是 CSS 選擇器，也能夠是一個 HTMLElement 實例
  template: '<App/>', // 一個字符串模板做爲 Vue 實例的標識使用。模板將會 替換 掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發 slot。
  components: { App } // 包含 Vue 實例可用組件的哈希表，這裏只有一個App組件，也就是指App.vue
})

上面的註釋其實都是從vue官網扒下來的...http://cn.vuejs.org/
關於更詳細的vue教程，請以官網爲準。

根據上面的內容，咱們很容易就能得出這樣的啓動原理：根據引入的vue模塊和APP.vue,建立一個掛載到id爲app的元素上面的對象，並配置了tempate和components屬性。而後根據配置對document進行渲染。

原理看似很簡單，可是vue作了大量的工做。

2、組件的使用

仍是看咱們的App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello> // 相似angular中的自定義指令
  </div>
</template>

<script>
import Hello from './components/Hello' // 引入了Hello.vue

export default {
  name: 'app', // 給組件指定名字
  components: { // 包含 Vue 實例可用組件的哈希表 和main.js中的用法同樣
    Hello // 將導入的hello組件賦給對象，這樣在渲染dom的時候遇到<hello>就將Hello.vue中的tamplate替換
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

export default ？

這是ES6的語法，使用關鍵字default，可將對象標註爲default對象導出。default關鍵字在每個模塊中只能使用一次。它既能夠用於內聯導出，也能夠用於一組對象導出聲明中。也就是將default後面跟着的對象看成default對象導出。

default導出的對象(能夠看做是組件對象)屬性有不少，官網上都有很是詳細的解釋。http://cn.vuejs.org/v2/api/#c...

根據main.js和App.js能夠獲得這樣的一個層級關係：

Vue.comenonts ==> { App } ===> App.conenonts ==> { Hello }

看上去貌似就是定義了組件的包含關係呢。這樣的話不是很簡單？寫一個組件測試下：

Test.vue

<template>
 <!--最外層只能有一個標籤 -->
  <div class="test">
   <p>我是全英雄聯盟最騷的騷豬</p>
   <p></p> 
  </div>
  <!-- <div>加了我會報錯</div> -->
</template>

<script>
export default {
  name: 'test'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
  color: red;
}
</style>

而後在App.vue中引用

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
<!-- 這裏加上對應的標籤  注意名字不能和html原有的標籤重複 -->
    <test></test>
  </div>
</template>

<script>
import Hello from './components/Hello'
import Test from './components/Test'  // 這裏引入Test組件

export default {
  name: 'app',
  components: {
    Hello,
    Test // 在components中添加Test
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

而後在瀏覽器打開：

紅色的字就是咱們的Test.vue組件的內容了。

3、增長路由

須要在頁面顯示一個組件，像上面那樣添加上去就行了，那想切換組件的顯示呢？固然是用路由了。vue提供了一個vue-router的插件，用來實現路由之間的轉換。關於這個插件的文檔在這裏：http://router.vuejs.org/zh-cn/

首先，先增長咱們的路由插件。在根目錄下安裝：

npm install vue-router --save

--save表明將在你的package.json中添加對應的依賴。
安裝成功會看到以下信息：

C:\Users\59227\Desktop\x-chat>npm install vue-router --save
x-chat@1.0.0 C:\Users\59227\Desktop\x-chat
`-- vue-router@2.1.1

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.15

而後在入口文件main.js中引用:

官網上的例子：

// 0. 若是使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)

// 1. 定義（路由）組件。
// 能夠從其餘文件 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每一個路由應該映射一個組件。 其中"component" 能夠是
// 經過 Vue.extend() 建立的組件構造器，
// 或者，只是一個組件配置對象。
// 咱們晚點再討論嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 建立 router 實例，而後傳 `routes` 配置
// 你還能夠傳別的配置參數, 不過先這麼簡單着吧。
const router = new VueRouter({
  routes // （縮寫）至關於 routes: routes
})

// 4. 建立和掛載根實例。
// 記得要經過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 如今，應用已經啓動了！

我本身寫的main.js

import Vue from 'vue'
import App from './App'
import Apart from  './components/Apart' // 新建立的組件
import Bpart from  './components/Bpart' // 新建立的組件
import VueRouter from 'vue-router' // 引入vue-router模塊

Vue.use(VueRouter) // 安裝 Vue.js 插件
/* 建立一個組件 並指定組件的template屬性，相似穿件一個 const爲ES6語法，標識聲明一個不可改變的變量 */
const Error = {template: '<p style="color: red">is Error!!</p>'}

const routes = [  //建立一個路由數組
    {
        path: '/',
        component: Apart //將組件Apart做爲路由‘/’下顯示的組件
    },
    {
        path: '/bb',
        component: Bpart 
    },
    {
        path: '*', // ‘*’表明在上面的路由中查找不到就默認顯示‘*’路由的內容，必須放在最後，否則在‘*’以後的路由都不起做用
        component: Error
    }
]

const router = new VueRouter({ routes }) //建立一個router對象
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, // 將router對象傳給vue，這樣就能夠經過this.$router獲取到router對象了
  template: '<App/>', 
  components: { App }
})

新建的組件：

Apart.vue

<template>
    <div>
        <p>我是Apart</p>
        <!-- 相似anguar的ng-click，用於綁定事件監聽 -->
        <a v-on:click="goPage">點我切換</a>
    </div>
</template>

<script>
export default {
  name: 'test',
  methods: { // methods參數用來聲明組件下的方法
      goPage: function () {
/*push方法會向 history 棧添加一個新的記錄，因此，當用戶點擊瀏覽器後退按鈕時，則回到以前的 URL。*/
          this.$router.push('/bb')
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
  color: red;
}
div {
    width: 100%;
    height: 100px;
    background-color: green;
}
</style>

Bpart.vue：

<template>
    <div>
        <p>我是Bpart</p>
        <a v-on:click="goPage">點我切換</a>
    </div>
</template>

<script>
export default {
  name: 'test',
  methods: {
      goPage: function () {
          this.$router.push('/')
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
  color: red;
}
div {
    width: 100%;
    height: 100px;
    background-color: yellow;
}
</style>

而後修改咱們的App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <test></test>
    <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這裏 -->
    <router-view></router-view>
  </div>
</template>

<script>
import Test from './components/Test'  // 這裏引入Test組件

export default {
  name: 'app',
  components: {
    Test // 在components中添加Test
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

完成以上步驟以後，在cmd輸入：

npm run dev

打開瀏覽器就能夠看到以下效果了：

很完美，路由功能擼好了。還有嵌套路由又該怎麼作呢？官網上有很詳細的例子，對着官網擼，絕對能搞得很完美。