在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，基本配置

{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"],
  "compilerOptions": {
    "target": "es6",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowJs": true,
    "isolatedModules": true,
    "lib": ["es7", "dom"],
    "resolveJsonModule": true,
    "strict": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
25       "@/*": ["src/*"]
26     },//路径的别名   @表src
    "typeRoots": ["node_modules/@types"]
  }
}

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

{
  "defaultSeverity": "none",//默认关闭验证
  "extends": [
    "tslint:recommended"
  ],
  "linterOptions": {
    "exclude": [
      "node_modules/**"
    ]
  },
  "rules": {
    "quotemark": false,
    "indent": false,
    "member-access": false,
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-consecutive-blank-lines": false,
    "no-shadowed-variable": false,
    "no-trailing-whitespace": false,
    "semicolon": false,
    "trailing-comma": false,
    "eofline": false,
    "prefer-conditional-expression": false,
    "curly": true,
    "forin": false,
    "import-blacklist": true,
    "no-arg": true,
    "no-bitwise": true,
    "no-console": false,
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-super": true,
    "no-empty": true,
    "no-eval": false,
    "no-floating-promises": false,
    "no-for-in-array": false,
    "no-implicit-dependencies": false,
    "no-inferred-empty-object-type": false,
    "no-invalid-template-strings": true,
    "no-invalid-this": true,
    "no-misused-new": true,
    "no-null-keyword": false,
    "no-object-literal-type-assertion": false,
    "no-return-await": true,
    "arrow-parens": false,
    "adjacent-overload-signatures": false,
    "ban-comma-operator": true,
    "no-empty-interface": true,
    "no-internal-module": true,
    "no-magic-numbers": false,
    "no-namespace": [true, "allpw-declarations"],
    "no-non-null-assertion": true,
    "no-parameter-reassignment": true,
    "no-reference": true,
    "no-unnecessary-type-assertion": false,
    "no-var-requires": false,
    "prefer-for-of": true,
    "promise-function-async": false,
    "max-classes-per-file": [true, 2],
    "variable-name": false,
    "prefer-const": false
  }
}

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

declare module "*.svg";
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.gif";
declare module "*.bmp";
declare module "*.tiff";

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

 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>