使用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)
    }
  }
})