vue2+项目中使用typescript入门

一、创建vue项目

vue init webpack '项目名称'

二、安装typecript以及解析器

cnpm i typescript ts-loader --save-dev

注意：这两个是配置typescript必须的文件，后面一步一步深入我们会安装更多插件。

三、配置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解析配置

四、在根目录下添加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 
    } 
}

五、在src目录下面创建文件：vue-shim.d.ts，并配置

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

六、修改项目中的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后缀

七、修改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+那么就很容易上手

八、运行和遇到的问题

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

九、使用插件 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...

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

十一、vuex插件使用 vuex-class

待续......