update readme

Author: SimonZhangITer

README.md

@@ -1,7 +1,7 @@
 
 <div align=center>
-    <img src="https://p1.meituan.net/dpgroup/60168751a8f4a79ca3c59edffdde00e423571.jpg" width="92"/>
-    <img src="https://p0.meituan.net/dpgroup/4a48f7ad4e6231c12c44b3422d67008116085.jpg" width="80"/>
+    <img src="https://p1.meituan.net/dpgroup/60168751a8f4a79ca3c59edffdde00e423571.jpg" width="126"/>
+    <img src="https://p0.meituan.net/dpgroup/4a48f7ad4e6231c12c44b3422d67008116085.jpg" width="110"/>
 </div>
 
 ## 功能
@@ -21,7 +21,7 @@
 - [x] mock数据
 - [x] tsconfig.json
 - [x] webpack配置
-- [ ] vue-typecript-cli
+- [ ] vue-typescript-cli
 
 ## 完成后的简单例子
 基于类的写法加上静态类型检查，简直不能再嗨
@@ -50,23 +50,28 @@ export default class Shops extends Vue {
 
 # 为什么使用TypeScript
 
+### JavaScript的超集
+支持所有原生JavaScript的语法
 ### 强类型语言
 现在很多主流语言都是强类型的，而这点也一直是JavaScript所被人诟病的地方。使用TypeScript之后，将会在代码调试、重构等步骤节省很多时间。
+
+> 比如说：函数在返回值的时候可能经过复杂的操作，那我们如果想要知道这个值的结构就需要去仔细阅读这段代码。那如果有了TypeScript之后，直接就可以看到函数的返回值结构，将会非常的方便
+
 ### 强大的IDE支持
 现在的主流编辑器如`VSCode`、`WebStorm`、`Atom`、`Sublime`等都对TypeScript有着非常友好的支持，主要体现在智能提示上，非常的方便
 ### 可运行于任何浏览器、计算机、操作系统
 强大的编译引擎
 ### 迭代更新快
 不断更新，提供更加方便友好的Api
 ### 微软和Google爸爸
-TypeScript是微软开发的语言，而Google的Angular使用的就是TypeScript，所以不用担心会停止维护，至少在近几年内TypeScript都会一门主流开发语言
+TypeScript是微软开发的语言，而Google的`Angular`使用的就是TypeScript，所以不用担心会停止维护，至少在近几年内TypeScript都会一门主流开发语言
 ### npm下载量非常高
-截止2017.12.17, TypeScript在全球范围内的npm日均下载量在30w左右，这个数字将近是vue下载量的10倍，可见TypeScript还是非常受欢迎的
+截止2017.12.17, TypeScript在全球范围内的npm日均下载量在`30w`左右，这个数字将近是vue下载量的10倍，可见TypeScript还是非常受欢迎的
 
 # TypeScript配置
 本项目已经配置完毕，这里记录一下当时的踩坑过程
 
-## Webpack
+## 1. Webpack
 首先需要安装`ts-loader`，这是TypeScript为Webpack提供的编译器，类似于`babel-loader`
 
 ```bash
@@ -93,7 +98,7 @@ npm i ts-loader -D
 }
 ```
 
-## tsconfig.json
+## 2. tsconfig.json
 
 创建tsconfig.json文件，放在根目录下，和`package.json`同级
 
@@ -156,13 +161,13 @@ npm i ts-loader -D
 }
 ```
 
-## 修改main.js
+## 3. 修改main.js
 1. 把项目主文件`main.js`修改成`main.ts`，里面的写法基本不变，但是有一点需要注意：
 引入Vue文件的时候需要加上`.vue`后缀,否则编辑器识别不到
 
 2. 把webpack的entry文件也修改成`main.ts`
 
-## vue-shims.d.ts
+## 4. vue-shims.d.ts
 TypeScript并不支持Vue文件，所以需要告诉TypeScript`*.vue`文件交给vue编辑器来处理。解决方案就是在创建一个vue-shims.d.ts文件，建议放在src目录下再创建一个`typings`文件夹，把这个声明文件放进去，如：`src/typings/vue-shims.d.ts`，文件内容：
 
 > `*.d.ts`类型文件不需要手动引入，TypeScript会自动加载
@@ -173,6 +178,134 @@ declare module '*.vue' {
   export default Vue
 }
 ```
+
+到这里TypeScript在Vue中配置就完成了，可以愉快的撸代码了~
+
+# 第三方插件库
+现在Vue官方已经明确提出支持TypeScript，并考虑出一个对应的`vue-cli`，在这之前，Vue开发团队已经开发出了一些插件库来支持TypeScript，这里简单和大家介绍一下。
+
+### Vue-Class-Component
+[vue-class-component](https://github.com/vuejs/vue-class-component)是官方维护的TypeScript装饰器，写法比较扁平化。Vue对其做到完美兼容，如果你在声明组件时更喜欢基于类的 API，这个库一定不要错过
+
+ps：用了这个装饰器之后写方法不需要额外加逗号，贼嗨~~~
+
+```javascript
+import Vue from "vue";
+import Component from "vue-class-component";
+
+@Component
+export default class App extends Vue {
+  name:string = 'Simon Zhang'
+
+  // computed
+  get MyName():string {
+    return `My name is ${this.name}`
+  }
+
+  // methods
+  sayHello():void {
+    alert(`Hello ${this.name}`)
+  }
+
+  mounted() {
+    this.sayHello();
+  }
+}
+```
+这个代码如果用原生Vue语法来写的话就是这样：
+
+```javascript
+export default {
+  data () {
+    return {
+      name: 'Simon Zhang'
+    }
+  },
+
+  mounted () {
+    this.sayHello()
+  },
+
+  computed: {
+    MyName() {
+      return `My name is ${this.name}`
+    }
+  },
+
+  methods: {
+    sayHello() {
+      alert(`Hello ${this.name}`)
+    },
+  }
+}
+```
+
+### Vuex-Class
+[vuex-class](https://github.com/ktsn/vuex-class)是基于基于`vue-class-component`对Vuex提供的装饰器。它的作者同时也是`vue-class-component`的主要贡献者，质量还是有保证的。
+
+```javascript
+import Vue from "vue";
+import Component from "vue-class-component";
+import { State, Action, Getter } from "vuex-class";
+
+@Component
+export default class App extends Vue {
+  name:string = 'Simon Zhang'
+  @State login: boolean;
+  @Action initAjax: () => void;
+  @Getter load: boolean;
+
+  get isLogin(): boolean {
+    return this.login;
+  }
+
+  mounted() {
+    this.initAjax();
+  }
+}
+```
+上面的代码就相当于：
+
+```javascript
+export default {
+  data() {
+    return {
+      name: 'Simon Zhang'
+    }
+  },
+
+  mounted() {
+    this.initAjax()
+  },
+
+  computed: {
+    login() {
+      return this.$store.state.login
+    },
+    load() {
+      return this.$store.getters.load
+    }
+  },
+
+  methods: {
+    initAjax() {
+      this.$store.dispatch('initAjax')
+    }
+  }
+}
+```
+
+### Vue-Property-Decorator
+[vue-property-decorator](https://github.com/kaorun343/vue-property-decorator) 是在 vue-class-component 上增强了更多的结合 Vue 特性的装饰器，新增了这 7 个装饰器
+
+- `@Emit`
+- `@Inject`
+- `@Model`
+- `@Prop`
+- `@Provide`
+- `@Watch`
+- `@Component` (从 vue-class-component 继承)
+
 # 坑
 ### 引入部分第三方库的时候需要额外声明文件
 比如说我想引入`vue-lazyload`,虽然已经在本地安装，但是typescript还是提示找不到模块。原因是typescript是从`node_modules/@types`目录下去找模块声明，有些库并没有提供typescript的声明文件，所以就需要自己去添加
@@ -207,6 +340,12 @@ export default class modules extends Vue {
   }
 }
 ```
+# 总结
+TypeScript还是非常值得学习和使用一个语言，还是有很多优点的
+
+欢迎大家对我的项目提建议，欢迎Star~
+
+QQ交流群：323743292
 ## Build Setup
 
 ``` bash

src/views/main.vue

@@ -40,7 +40,7 @@ export default class App extends Vue {
   get isLogin(): boolean {
     return this.login;
   }
-  // 声明周期钩子
+
   mounted() {
     this.initAjax();
   }