一切福田,不離方寸,從心而覓,感無不通。

vue

Vue2.X集成typeScript

1.安装依赖

安装 vue 的官方插件 npm i vue-class-component vue-property-decorator -S
typescript 必须安装 npm i typescript -D
ts-loader 必须安装 npm i ts-loader -D
请注意:ts-loader 请与你的 webpack 版本对应,我的 webpack 版本为 3.6.0,因此我应该安装的 ts-loader 版本为 3.x.x,因此我在ts-loaderGithub上找到了我最新的 3.x.x 的版本为 3.5.0,所以我的安装命令为npm i ts-loader@3.5.0 -D

2.配置 webpack.base.conf.js

首先找到./build/webpack.base.conf.js

  • 找到 entry.appmain.js 改成 main.ts并且把项目文件中的 main.js 也改成 main.ts , 里面内容保持不变

 

  • 找到resolve.extensions,里面加上.ts 后缀 (是为了之后引入.ts 的时候不写后缀)

 

  • 找到module.rules 添加webpack.ts的解析

 

3.添加 tsconfig.json

在根路径下创建tsconfig.json文件,添加一下配置


 

4.让 ts 识别 .vue

由于 TypeScript 默认并不支持 *.vue后缀的文件,所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件,放在项目对应使用目录下,所以新建 src/vue-shim.d.ts,写入以下代码


 

5..js 文件重命名为.ts 文件

src下的所有**.js文件重命名**.ts,包括src/router/index.js等逐一从.js重命名为.ts

注意:重命名后对vue文件的import,需添加.vue后缀

因为Typescript默认只识别*.ts文件,不识别*.vue文件

之前:


 

需改为:


 

6.改造 .vue 文件

要点:

之前:


 

改造后:


 

之后请将所有的.vue按照vue-class-component改造

7.运行 npm run dev

至此运行项目,即可正常运行,vue对typescript的初步引入,基本完成。

8.让vue识别全局方法/变量

因为在项目中,会存在自己写的一些方法是放在 vue.prototype上的。
如:Vue.prototype.$api = myApi,然后想在每个.vue里面这样使用this.$api,然而使用ts改造之后,在.vue里面使用this.$api会报错

Property '$api' does not exist on type 'Text'

请在main.ts里面加上这段: 请放在 new Vue上面


 

然后就能使用 this.$api 和 this.$tool

项目地址:
vue2.x:https://github.com/momoSph/Vue2.x-ElementUI
vue3.x:https://github.com/momoSph/Vue3.x-ElementUI

作者:Sun____
链接:https://www.jianshu.com/p/75f6b5b263bf
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。