使用 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