vue接入ts基本方法

下面将以项目搭建的方式完成改文章叙述:

项目基础架构是通过cli搭建的,主要是vue(2.5.16)+ webpack(3.6.0)+ element-ui(2.8.2),整体项目还简单用了vuex,eslint等。

一、依赖记

项目从基础js改为ts,因为是初次尝试,本着最小依赖、最小改动原则,只引入了一些基础依赖:

  • typescript:#3.1.6 -- 接入ts的基础依赖,版本需要根据项目相关版本进行修改
  • ts-loader:#3.5.0 -- 同样是基础依赖
  • ts-lint tslint-config-standard tslint-loader -- 这三个是将原来的eslint校验替换掉,没仔细研究过,应该是可以处理一些引入了ts之后eslint导致的莫名其妙的校验问题。

二、配置记

webpack.base.config.js修改:

入口文件将原来的.js改为.ts

entry: {
    app: ['babel-polyfill', './src/main.ts']
 },

resolve.extensions增加ts:

extensions: ['.tsx', '.ts', '.js', '.vue', '.json'],

rules增加对ts的解析:

{
    test: /\.(ts|tsx)?$/,
    loader: 'ts-loader',
    exclude: /node_modules/,
    options: {
      appendTsxSuffixTo: [/\.vue$/],  // ts不知道如何处理.vue结尾文件,需加此配置
      happyPackMode: true  // 开启多线程,加快编译
    }
 }

eslint替换为tslint:

{
    test: /\.ts$/,
    loader: 'tslint-loader',
    exclude: /node_modules/,
    enforce: 'pre'
}

同时在vue-loader.conf.js里增加配置,在根目录下增加tslint.json配置文件:

// vue-loader.conf.js
const mergeVue = require('webpack-merge')

loaders: mergeVue(utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
}), {
    ts: ['ts-loader', 'tslint-loader']   // 新增
}),

// tslint.json
{
    "extends": "tslint-config-standard",
    "globals": {
      "require": true
    },
    "rules": {
      "no-consecutive-blank-lines": false
    }
}

另外还有其他一些基础的修改,比如ts会校验不同文件间的重名,并给出错误提示。这点当然可以通过配置去处理,但是个人觉得这个提示可以保留,只需要修改对应的变量名就可以了。
新增配置文件tsconfig.json(个别配置字段会在后面填坑说明)

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": [
      "node"
    ],
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true
  }
}

src目录下增加 vue.d.ts 文件:

此文件主要是告诉ts,.vue结尾的文件交给vue去处理。但是这样会造成一个父子组件引用问题,同样后边填坑单说。

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

三、修改记

1.将必要文件的.js替换为.ts

这里说必要的js结尾文件,我处理的主要是逻辑相关的文件,对于一些config类型的文件并没有修改,依然保留了js结尾,目的是最小改动原则,避免一些难处理的问题。

2.vue文件修改

针对vue文件:

  • 需要在script标签上增加 lang='ts'
  • 同时需要用vue.extend定义组件
  • 如果有引用其他组件,未引入ts时候可以省略.vue后缀,但是引入ts之后,引入组建的时候一定要加上.vue后缀

                    
                    

你可能感兴趣的:(vue接入ts基本方法)