搭建vue+Typescript工程搭建vue+Typescript工程

开发工具 vscode

众所周知，vue2+Typescript的开发体验很不好，不过为了尝鲜，咱还是可以搭一个小工程玩一玩，下面就是搭建工程的步骤，以及遇到的一系列坑点。
1. 创建一个vue工程

vue init webpack 项目名称<项目名字不能用中文>

现在我们就有一个vue项目了，下面我们就需要安装各种插件，让他支持Typescript.
2. 安装必要的插件
安装vue的官方插件

npm i vue-class-component vue-property-decorator --save

vue-class-component支持类风格的vue代码编写
vue-property-decorator依赖于vue-class-component并对其进行强化,新增了如下7个装饰器和一个函数：
- @Emit
- @Inject
- @Model
- @Prop
- @Provide
- @Watch
- @Component (从 vue-class-component 继承)
- Mixins (vue-class-component提供的mixins帮助函数)

// ts-loader typescript 必须安装

npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

ts-loader Typescript的加载器，如果你是webpack3,请装3版本，比如3.5.0,如果你是webpack4，请装3以上的版本
typescript 显而易见
tslint 检查Typescript代码工具
tslint-loader tslint 加载器
tslint-config-standard JavaScript标准样式的TSLint配置

3. 配置webpack
修改webpack.base.conf.js文件

entry: { app: './src/main.js' }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src') } }

修改为

entry: { app: './src/main.ts' // main.js->main.ts }, resolve: { extensions: ['.js', '.vue', '.json', '.ts'],// 增加.ts alias: { '@': resolve('src') } }

【搭建vue+Typescript工程】module.rules里增加如下配置

{ test: /\.ts$/, exclude: /node_modules/, enforce: 'pre', loader: 'tslint-loader' }, { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } },

4. 添加vue的声明文件
Typescript默认不支持.vue结尾的文件，所以我们在import vue对象时会找不到，为了能正确引用，我们需要创建一个垫片。
根目录下添加vue.shim.d.ts文件，内容如下

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

接下来需要添加进tsconfig.json文件的include中，这样就能正确找到vue对象了。
5. 添加tsconfig.json文件
tsconfig.json存在的目录即为Typescript项目的根目录，tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。
生成命令

tsc --init

上面命令的前提是你全局安装了Typescript，如果没有，请先执行这条命令

npm update -g typescript

tsconfig.json初始化配置为

tsconfig初始配置.jpg
修改tsconfig.json文件

{ "include":[ "src/**/*", "vue.shim.d.ts" ], "exclude":["node_modules"], "compilerOptions": { "target": "es5", "module": "commonjs", "lib": [ "dom", "es5", "es2015.promise" ], "allowJs": true, "strict": true, "baseUrl": "./", "paths": { "@/*":["src/*"] }, "esModuleInterop": true, "experimentalDecorators": true, } }

由于json文件不允许写注释，另辟一处，介绍一下各个属性的意思

{ "include":[], // 编译包含哪些文件 "exclude":[], // 编译排除哪些文件 "compilerOptions": {// 编译选项 "target": "es5",// 指定ECMAScript目标版本'ES3' (默认)，'ES5'，或'ES6' "module": "commonjs",// 指定生成哪个模块系统代码 "lib": [// 编译过程中需要引入的库文件的列表 "dom", "es5", "es2015.promise" ], "allowJs": true,// 允许编译javascript文件。 "strict": true,// 严格模式 "baseUrl": "./",// 解析非相对模块名的基准目录。 "paths": {// 模块名到基于baseUrl的路径映射的列表 "@/*":["src/*"] }, "esModuleInterop": true,// 支持CommonJS和ES模块之间的互操作性 "experimentalDecorators": true,// 实验性启用ES7装饰器支持。 } }

6. 修改src下.js文件为.ts
初始化的vue项目会在src目录下有一个main.js文件，在src/router目录下有一个index.js文件，我们将其修改为ts文件
main.js -> main.ts
index.js -> index.ts
7. 运行yarn start
项目运行成功，但是会报错,不怕，你马上就要成功了！

文章图片
@号和.vue.png
这里是因为我们书写时省略了后缀名，而Typescript只能识别 .ts结尾的文件， .vue结尾的文件，所以我们需要给他们加上 .vue后缀名即可

import App from './App' -> import App from './App.vue'

然后，我们再运行一遍，就不会报错了。但是这时候，我们的代码还都只是js代码，下面我们就把他们改写为ts代码。
8. 修改.vue文件

利用vue-class-component插件
原HelloWorld.vue中的js代码

修改为

到这里，我们的架子就已经初步搭建完成，当然这离完全体还有一段距离，不过，先让我们爽一爽，我们为它增加上生命周期，计算属性，方法等。

大家可以自己试一试，看看效果。

利用vue-property-decorator
然后，我们在上面的基础上再来修改一下我们的ts代码

// 可以看到这里Vue和Component都可以从vue-property-decorator插件中获取 import { Vue, Component } from 'vue-property-decorator'@Component export default class HelloWorld extends Vue { // 初始化数据 msg = 123// 生命周期钩子 mounted () { this.greet() }// 计算属性 get computedMsg () { return 'computed ' + this.msg }// 方法 greet () { alert('greeting: ' + this.msg) } }

ok，现在我们已经可以初步编写我们的ts代码了，但是，有时候还会报一些其他错误，这多半是我们装的插件不够。。。
9. 添加其他额外插件

文章图片
修饰符报错.png

文章图片
修饰符报错2.png 大家还记得TS里的修饰符么，当我们为一个变量添加修饰符时，就会报语法错误，这是因为js是不支持这种写法的，而我们原来的工程里只安装了eslint,所以为了兼容这种写法，我们需要给eslint增加tslint功能，那么怎么增加呢？
添加以下两个插件

npm i @typescript-eslint/parser --save-dev npm i @typescript-eslint/eslint-plugin --save-dev

修改.eslintrc.js文件

parserOptions: { parser: 'babel-eslint' },

为

parserOptions: { parser: '@typescript-eslint/parser' },

至此，大功告成，大家已经可以愉快地编写ts代码了
10. 其他常见问题

引入第三方库
Typescript中引入第三方库除了要引用库本身外，还需引用库的声明文件
比如我想引入lodash库，那么我就要执行以下两条命令

npm i --save lodash npm i --save @types/lodash

以@types开头的就表示声明文件
大多数情况下，类型声明包的名字总是与它们在npm上的包的名字相同，但是有@types/前缀，如果你需要的话，你可以在 https://aka.ms/types这里查找你喜欢的库。
当然，你引用的库很可能暂时没有声明文件，如果你还想用他的话就需要自己写声明文件了，不过这不在本章的讨论范围类，大家可以自己研究下。