使用 typescript 开发 Vue

基础配置:

1.

准备一个使用 vue-cli 生成的项目

2.

使用 npm 一建安装基础配置

npm i -S @types/node typescript vue-class-component vue-property-decorator vuex vuex-class ts-loader@3.2.0
// vue-cli 的 webpack 大版本为 3
// 所以不支持 ts-loader 4以上

3.

修改配置文件

3.1 文件 bulid/webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json', '.ts' ,'.tsx'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
}

entry: {
    app: './src/main.ts'
}

rules: [
      //... 省略 Vue js png 等 loader
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          {
            loader: "ts-loader",
            options: { appendTsxSuffixTo: [/\.vue$/] }
          }
        ]
      }
]

3.2 在 src 下新建文件 vue-shim.d.ts ,用于识别单文件vue内的ts代码

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

3.3 修改 main.js 后缀为 main.ts

修改 main.ts 里

import App from './App' 为 import App from './App.vue'

3.4 在根目录下添加 tsconfig.json 文件

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "jsx": "preserve",
    "strictFunctionTypes": false,
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node",
    "isolatedModules": false,
    "lib": [
      "dom",
      "es5",
      "es6",
      "es7",
      "es2015.promise"
    ],
    "sourceMap": true,
    "pretty": true
  }
}

3.5 router 里的 index.js 可以选择 ts 结尾,不过影响不大

3.6 如果需要使用 router 的钩子则需要

在 src 目录下新建文件 class-components-hooks.ts

import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate' // for vue-router 2.2+
])

在 main.ts 中

import './class-components-hooks'

使用

可查看 app.vue

vue-property-decorator 的使用

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

const s = Symbol('baz')

@Component
export class MyComponent extends Vue {

  @Emit()
  addToCount(n: number){ this.count += n }

  @Emit('reset')
  resetCount(){ this.count = 0 }

  @Inject() foo: string
  @Inject('bar') bar: string
  @Inject({from: 'optional', default: 'default'}) optional: string
  @Inject(s) baz: string

  @Model('change') checked: boolean

  @Prop()
  propA: number

  @Prop({ default: 'default value' })
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  @Provide() foo = 'foo'
  @Provide('bar') baz = 'bar'

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }

  @Watch('person', { immediate: true, deep: true })
  onPersonChanged(val: Person, oldVal: Person) { }
}

详情使用查看 https://github.com/kaorun343/vue-property-decorator

vue-class 使用:

@Component
  export default class Hello extends Vue {
    helloMsg = 'hello,grewer';
    @State userName // 获取 vuex 中 state 的 userName
  }

详情使用查看 https://github.com/ktsn/vuex-class

使用 element-ui 和 axios

下载:

npm i -S axios element-ui

element 的使用已经不需要额外的添加

使用 axios 的话需要添加声明

import axios from 'axios'
Vue.prototype.axios = axios

declare module "vue/types/vue" {
  interface Vue {
    axios:any
  }
}

在使用 refs 时也需要特使的声明:

const ele:any = this.$refs.ele
ele.func()

如果还有什么不明白的可以看我的 github 里面有详细的配置

地址:https://github.com/Grewer/vue-with-typescript