使用TypeScript創建Vue項目

　　Vue的靈活性總是讓代碼看起來非常洗練，對TypeScript來說也是一種挑戰， 好在Vue對TypeScript進行了一次全方位的適配。

　　相對於React嚴謹的代碼，Redux啰嗦的樣板代碼，Vue就顯得非常靈活。Vue采用雙向綁定原理，如下圖所示

　　雙向綁定的好處是這樣的，在數據發生變化的時候，會發布一個叫“model-update”的事件，類似，當視圖發生變化的時候，會發布一個叫“ui-update”的事件，Vue自動訂閱了這些事件，並能自動處理好，我們無需關心到底是數據變化了還是UI變化了，Vue都能自己處理好。尤其是在繪制長的Form表單時，只需要將變量綁定在輸入的模塊上，無論是用戶輸入還是通過代碼手動賦值，模塊都會自動變化，不需要再去關心每個輸入的細節。

　　雖然Vue很棒，但對TypeScript的支持並不是那么完美，還有一些細節需要我們去做。

⒈安裝Vue腳手架

npm install -g @vue/cli
# OR
yarn global add @vue/cli

⒉初始化項目

vue create ts-vue

　　Vue的組件和React非常不同

　　Vue的代碼是這樣的：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</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>

　　我們可以清晰看到style、script以及html都在一個Vue組件里，支持TypeScript也只是讓script標簽能兼容TypeScript語法，與Node及React開發中直接修改整個文件名是截然不同的。

　　同時你會發現，Vue的腳手架做的非常簡單易懂，項目結構已經完全給你部署好了。

⒊集成TypeScript

　　https://cn.vuejs.org/v2/guide/typescript.html

　　*vue-class-component是Vue官方維護的一個庫，可以讓我們在Vue里面按照類的形式寫代碼

　　*如果希望在Vue里使用props或者watch，推薦安裝vue-property-decorator

　　*如果你想在Vue中使用單向數據流的Redux，這也是允許的，官方推薦的工具是Vuex。Redux的架構由State、Reducer以及Action構成的，如圖所示：

　　*但Vuex的概念略有不同，如下圖所示：

　　Mutation相當於Reducer，用getter對State的查詢進行了封裝，使其有一個充滿含義的名字：

const store = new Vuex.Store({
  state:{
    todos:[
      {id:1.text:'...',done:true},
      {id:2.text:'...',done:false},
    ]
  },
  getters:{
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})