在vue cli3.0中使用typescript

基于vue项目已搭建完成。

1.安装所需要的插件

"vue-class-component": "^7.2.6",是一个 Class Decorator,也就是类的装饰器
"vue-property-decorator": "9.0.2",是基于 vue 组织里 vue-class-component 所做的拓展import { Vue, Component, Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'
"vuex-module-decorators": "^1.0.1"用 typescript 写 vuex 很好用的一个库import { Module, VuexModule, Mutation, Action, MutationAction, getModule } from 'vuex-module-decorators'
"vuex-class": "^0.3.2",可以包装vuex的写法，使代码简化

2.结构上的改造

1.在根目录下创建tsconfig.json，基本配置

 1 {
 2   "include": ["src/**/*"],
 3   "exclude": ["node_modules", "dist"],
 4   "compilerOptions": {
 5     "target": "es6",
 6     "esModuleInterop": true,
 7     "allowSyntheticDefaultImports": true,
 8     "module": "esnext",
 9     "moduleResolution": "node",
10     "sourceMap": true,
11     "emitDecoratorMetadata": true,
12     "experimentalDecorators": true,
13     "removeComments": false,
14     "noImplicitAny": false,
15     "skipLibCheck": true,
16     "suppressImplicitAnyIndexErrors": true,
17     "allowJs": true,
18     "isolatedModules": true,
19     "lib": ["es7", "dom"],
20     "resolveJsonModule": true,
21     "strict": true,
22     "outDir": "dist",
23     "baseUrl": ".",
24     "paths": {
25       "@/*": ["src/*"]
26     },//路径的别名   @表src
27     "typeRoots": ["node_modules/@types"]
28   }
29 }

2.在根目录添加tslint.json，ts编码习惯校验规则，

 1 {
 2   "defaultSeverity": "none",//默认关闭验证
 3   "extends": [
 4     "tslint:recommended"
 5   ],
 6   "linterOptions": {
 7     "exclude": [
 8       "node_modules/**"
 9     ]
10   },
11   "rules": {
12     "quotemark": false,
13     "indent": false,
14     "member-access": false,
15     "interface-name": false,
16     "ordered-imports": false,
17     "object-literal-sort-keys": false,
18     "no-consecutive-blank-lines": false,
19     "no-shadowed-variable": false,
20     "no-trailing-whitespace": false,
21     "semicolon": false,
22     "trailing-comma": false,
23     "eofline": false,
24     "prefer-conditional-expression": false,
25     "curly": true,
26     "forin": false,
27     "import-blacklist": true,
28     "no-arg": true,
29     "no-bitwise": true,
30     "no-console": false,
31     "no-construct": true,
32     "no-debugger": true,
33     "no-duplicate-super": true,
34     "no-empty": true,
35     "no-eval": false,
36     "no-floating-promises": false,
37     "no-for-in-array": false,
38     "no-implicit-dependencies": false,
39     "no-inferred-empty-object-type": false,
40     "no-invalid-template-strings": true,
41     "no-invalid-this": true,
42     "no-misused-new": true,
43     "no-null-keyword": false,
44     "no-object-literal-type-assertion": false,
45     "no-return-await": true,
46     "arrow-parens": false,
47     "adjacent-overload-signatures": false,
48     "ban-comma-operator": true,
49     "no-empty-interface": true,
50     "no-internal-module": true,
51     "no-magic-numbers": false,
52     "no-namespace": [true, "allpw-declarations"],
53     "no-non-null-assertion": true,
54     "no-parameter-reassignment": true,
55     "no-reference": true,
56     "no-unnecessary-type-assertion": false,
57     "no-var-requires": false,
58     "prefer-for-of": true,
59     "promise-function-async": false,
60     "max-classes-per-file": [true, 2],
61     "variable-name": false,
62     "prefer-const": false
63   }
64 }

3.根目录下添加images.d.ts 编译中支持的图片格式

1 declare module "*.svg";
2 declare module "*.png";
3 declare module "*.jpg";
4 declare module "*.jpeg";
5 declare module "*.gif";
6 declare module "*.bmp";
7 declare module "*.tiff";

4.src下面添加vue-shim.d.ts

1 declare module "*.vue" { 2 import Vue from "vue"; 3 export default Vue; 4 }

5.对main.ts的改造

import Vue from "vue";
import App from "./App.vue";
import Vuex from 'vuex'
//引入路由
import router from "./router"; //
//引入element
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

import "./element-variables.scss";
import "./assets/css/changeElement.scss";
// 样式初始化
import "./assets/css/common.scss";
//iconfont
import "./assets/css/font/iconfont.css";
import AFTableColumn from "af-table-column";

import * as echarts from 'echarts';
import store from "@/services/global-store";

Vue.prototype.$echarts = echarts

Vue.use(Vuex)
Vue.use(AFTableColumn);
Vue.use(ElementUI);
Vue.config.productionTip = false;

new Vue({
    router,
    store,
    render: (h) => h(App),
}).$mount("#app");

6.组件中的使用

<template>
  <div id="app" class="fadeIn animated">

  </div>
</template>

<script lang='ts'>
  import { Component, Inject, Vue } from "vue-property-decorator";

  @Component
  export default class proView extends Vue {

  }
</script>

<style lang='scss' scoped>
 
</style>