vue2+項目中使用typescript入門

1、建立vue項目

vue init webpack '項目名稱'

2、安裝typecript以及解析器

cnpm i typescript ts-loader --save-dev

注意：這兩個是配置typescript必須的文件，後面一步一步深刻咱們會安裝更多插件。

3、配置webpack

打開build/webpack.base.config.js

entry: {
  app: './src/main.ts' // 修改main.js 爲main.ts後面會提到main.ts
}
resolve: { 
    ...
    extensions: ['.js', '.ts', '.tsx', '.vue', '.json'] // 新增ts tsx
    ...
}, 
module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        enforce: 'pre',
        loader: 'tslint-loader'
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
     ]
    // 添加ts、tsx解析配置

4、在根目錄下添加tsconfig.json並配置

{ 
    "include": [ 
        "./src/**/*" 
    ], 
    "exclude": [ 
        "node_modules"
    ],   
    "compilerOptions": { 
        "allowSyntheticDefaultImports": true, 
        "experimentalDecorators": true, 
        "strict": true, 
        "allowJs": true, 
        "module": "es2015", 
        "target": "es5", 
        "moduleResolution": "node", 
        "isolatedModules": true, 
        "lib": [ "dom", "es5", "es2015.promise" ], 
        "sourceMap": true, "pretty": true 
    } 
}

5、在src目錄下面建立文件：vue-shim.d.ts，並配置

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

6、修改項目中的js文件爲ts

main.js => main.ts

router/index.js => index.ts

main.ts中 import App from './App' => import App from './App.vue'
router/index.js中 import HelloWorld from '@/components/HelloWorld' 修改成 import Helloworld from '@/components/HellowWorld.vue'

注意：原來import的文件都必須加上.vue後綴

7、修改hellowWorld.vue文件爲ts格式

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
})
</script>

這裏作了初步修改，後面咱們會使用插件vue-class-component進行修改，若是寫過angular2+那麼就很容易上手

8、運行和遇到的問題

npm run dev

若是運氣好，那麼項目就這麼啓動了。

問題1：

vue typescript Module build failed: Error: You may be using an old version of webpack; please check you're using at least version 4

解決：package.json 中修改ts-loader版本爲3.5，而後cnpm install 最後從新啓動 npm run dev 就行了。

問題2：

TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.

解決：.tsconfig.json 中缺乏配置 "experimentalDecorators": true

9、使用插件 vue-class-component

安裝插件

cnpm i vue-class-component --save-dev

修改HelloWorld文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  // 屬性 props
  props: {
    propMessage: String
  }
})
export default class HelloWorld extends Vue {
  // data 初始化變量
  msg: string = 'typescript learn'
  list: string[] = []
  // hook 生命週期函數
  mounted () {
    console.log('mounted')
  }
  // computed 計算屬性
  get computedMsg () {
    return this.msg + 'computed'
  }
  set computedMsg (val) {
    console.log(val)
  }
  // method 方法
  showList () {
    this.list.push('nihao')
  }
}
</script>
<style scoped>
</style>

插件地址：https://github.com/vuejs/vue-...
github項目地址：https://github.com/zxc1989092...

10、使用vue-property-decorator插件

安裝

cnpm i vue-property-decorator --save-dev

使用

github地址：https://github.com/kaorun343/...

vue-class-component配置

methods 方法

get/set 計算屬性

data 屬性

生命週期鉤子

全部其餘屬性，須要放在裝飾器中

vue-property-decorator配置

@Prop

@Model

@Watch

@Inject、@Provide

@Emit

11、vuex插件使用 vuex-class

待續......