用了这么久的vue，终于踏出第一步使用ts去开发，发现真的是一时用ts一时爽，一直用ts一直爽。所以今天大概说一下怎么用ts简单开发。
1.首先，更改一下webpack配置
- 修改入口文件 [因为使用ts开发，所以文件都是ts]
entry: { app: '.src/main.js'}复制代码 - 根路径下添加 tsconfiog.js配置文件，下面的是自己的一份简单的配置可参考
{ // 编译选项 "compilerOptions": { "module": "esnext", "strict": true, "jsx": "preserve", "typeRoots" : ["./typings"], "importHelpers": true, "moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "skipLibCheck": true, "skipDefaultLibCheck": true, "strictNullChecks": true, "downlevelIteration": true, "target": "es5", "noImplicitAny": false, "allowJs": true, "outDir": "./dist/", // 输出目录 "noImplicitThis": false, "removeComments": false, "types": [ "webpack-env" ], "paths": { // @代表src模块的路径 "@/*": [ "src/*" ] }, "lib": [ // 编译过程中需要引入的文件 "esnext", "dom", "dom.iterable", "scripthost", "es5", "es2015", "es2016", "es2017", "es2015.promise", "es2015.collection", "es2015.iterable", "es2015.core", "dom" ] }, "awesomeTypescriptLoaderOptions": {}, "declaration": true, "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", ], "exclude": [ "node_modules", "src/main.ts" ]}复制代码 - 根目录下添加 tslint.json文件 ，[规范一下书写ts]，下面的也是一些简单配置
{ "extends": [ "tslint:recommended" ], "lib": [ "ES2015", "ES2016", "ES2017" ], "linterOptions": { "exclude": [ "node_modules", "dist", "config", "build", "./**/*.js", "src/api/**", "src/components/common/**", "src/components/page/**", "src/components/public/**", "static/**" ] }, "rules": { "member-access": [ true, "no-public" ], "interface-name": [ true, "always-prefix" ], "align": [ true, "parameters", "statements" ], "class-name": true, "comment-format": [ true, "check-space" ], "curly": true, "eofline": true, "forin": false, "indent": [ true, "spaces" ], "noImplicitThis": false, "jsdoc-format": false, "label-position": true, "max-line-length": [ true, 200 ], "no-any": false, "no-arg": true, "no-bitwise": false, "no-conditional-assignment": true, "no-consecutive-blank-lines": true, "no-console": [ false, "debug", "info", "log", "time", "timeEnd", "warn", "trace" ], "no-construct": true, "no-constructor-vars": false, "no-debugger": false, "no-duplicate-variable": true, "no-empty": false, "no-eval": true, "no-internal-module": true, "no-namespace": true, "no-reference": true, "no-shadowed-variable": false, "no-string-literal": true, "no-switch-case-fall-through": false, "no-trailing-whitespace": true, "no-unused-expression": [ true, "allow-fast-null-checks" ], "no-use-before-declare": false, "no-var-keyword": true, "no-var-requires": false, "object-literal-sort-keys": false, "one-variable-per-declaration": [ true, "ignore-for-loop" ], "quotemark": [ true, "single", "jsx-double" ], }复制代码 - 要让ts认识vue文件，[在src路径下面添加vue-shim-d.ts]
import router from '@/config/router';import { Comfirm, MessageBox } from 'element-ui';import Vue from 'vue';import VueRouter from 'vue-router';import { Route } from 'vue-router';import Tools from '@/utils/tools';import Api from '@/config/api';// 扩充declare module 'vue/types/vue' { // 这些是全局属性，可以直接this.$api这样类似使用 interface Vue { $router: VueRouter; $route: Route; $message: MessageBox; $conform: Comfirm; $tools: Tools; $api: Api; }}复制代码
需要注意一点的是在导入vue文件的时候，要写上.vue后缀，因为TypeScript默认识别ts文件。
2. 改造一下vue文件
在这之前我们需要安装一个插件
vue-property-decorator，是在 vue-class-component 上增强了更多的结合 Vue 特性的装饰器，新增了一些装饰器。 src/app.vue
[lang="ts"，让webpack把这段代码识别为ts，除了需要改造一下script标签内的内容，其他地方都无需修改]
复制代码
下面举例一下常用的装饰器使用
复制代码
其他的文件也是参照方式去修改即可。
最后重新运行就行了。