一、搭建vue-cli脚手架 这个过程就不详细说明了不清楚的可以翻阅我以前的有关vue脚手架的文章 二、安装Typescript相关依赖 npm i vue-class-component vue-property-decorator --save npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
vue-class-component：强化 Vue 组件，使用 TypeScript/装饰器 增强 Vue 组件
vue-property-decorator：在 vue-class-component 上增强更多的结合 Vue 特性的装饰器如下： @Emit @Inject @Model @Prop @Provide @Watch @Component (从 vue-class-component 继承)
ts-loader：TypeScript 为 Webpack 提供了 ts-loader，其实就是为了让webpack识别 .ts .tsx文件
tslint-loader跟tslint：我想你也会在.ts .tsx文件 约束代码格式（作用等同于eslint）
tslint-config-standard：tslint 配置 standard风格的约束
三、配置webpack （1）找到文件build/webpack.base.conf.js 找到entry.app 将main.js 改成 main.ts, 顺便把项目文件中的main.js也改成main.ts, 里面内容保持不变 （2）找到resolve.extensions 里面加上.ts 后缀 （是为了之后引入.ts的时候不写后缀）
resolve: { extensions: ['.js', '.vue', '.json', '.ts'], alias: { '@': resolve('src') } }（3）找到module.rules 添加webpack对.ts的解析
module: { rules: [ { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }, // 开始 { test: /\.ts$/, exclude: /node_modules/, enforce: 'pre', loader: 'tslint-loader' }, { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } }, // 复制从开始以上的即可 } }四、添加配置 tsconfig.json 和 tslint.json文件 （1）在根路径下创建tsconfig.json文件，以下是简单的配置，详细的可访问http://json.schemastore.org/tsconfig
{ "include": [ "src/**/*" ], "exclude": [ "node_modules" ], "compilerOptions": { "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "allowJs": true, "module": "esnext", "target": "es5", "moduleResolution": "node", "isolatedModules": true, "lib": [ "dom", "es5", "es2015.promise", "scripthost" ], "sourceMap": true, "pretty": true, "strictFunctionTypes": false, "importHelpers": true } }（2）在根路径下创建tslint.json文件，就是 引入 ts 的 standard 规范
{ "extends": "tslint-config-standard", "globals": { "require": true } }五、识别 .vue 由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在项目项目对应使用目录下，例如 src/vue-shim.d.ts
declare module "*.vue" { import Vue from "vue"; export default Vue; }注意：在引入组件的使用加.vue 因为TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件：，例如import Component from 'components/component.vue' 六、改造.vue 文件 <template></template>和<style></style>内的内容和vue一样，主要修改<script lang="ts"></script>内的代码格式, 注意：在script 标签上加上 lang=“ts”, 意思是让webpack将这段代码识别为typescript 而非javascript，简单的代码格式如下，注意： @Component必须有没有子组件可以为空 （1）parent.vue
<script lang="ts"> import Vue from 'vue'; import Component from 'vue-class-component'; import Child from '../../components/Child.vue'; @Component({ components: { Child }, }) export default class parent extends Vue { num = 0; created(){ } } </script>(2)child.vue(子组件获取父组件的数据@Prop)
import Vue from 'vue'; import Component from 'vue-class-component'; import { Prop } from 'vue-property-decorator' @Component export class Child extends Vue { @Prop() num: number created(){ console.log(this.num); } }六、使用less （1）安装 npm install less -s (2) 找到文件build/webpack.base.conf.js里的module.rules 添加webpack对.ts的解析
{ test: /\.less$/, loader: "style-loader!css-loader!less-loader" },七、使用Axios 在常规的安装了axios发现报错，后来百度换了一种思路就可以了 因为在ts中，不识别vue下面挂$axios，不可以挂在原型链上 （1)安装axios和vue-axios npm install axios vue-axios （2）在main.ts中引入全局使用
import axios from 'axios' import Vueaxios from 'vue-axios' Vue.use(Vueaxios, axios)(3)在组件中直接this.axios.get/post直接使用
八、使用Vuex 今天先到这里改天继续完善，欢迎指正交流
