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格式

这里做了初步修改，后面我们会使用插件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文件

插件地址：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

待续......