Vue与Typescript构建项目
- php中世界最好的语言原创
- 2018-03-19 17:01:012668浏览
这次给大家带来Vue与Typescript构建项目，Vue与Typescript构建项目的注意事项有哪些，下面就是实战案例，一起来看一下。
Typescript 在前端圈已经逐渐普及，Vue 2.5.0 改进了类型声明，使得对 TypeScript 更加友好
不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造
PS: 建议使用 Visual Studio Code 进行开发
一、安装依赖
首先还是用 vue-cli 生成项目
vue init webpack demo
然后安装必要依赖项：typescript、ts-loader、vue-class-component
npm install typescript vue-class-component -D
npm install ts-loader@3.3.1 -D
上面安装 ts-loader 的时候，指定了版本 3.3.1
这是因为在写这篇博客的时候（2018-03-14），在安装 ts-loader 的最新版 4.0.1 的情况下，启动项目会报错
另外还有几个库可以按需引入：
tslint: 规范 ts 代码，需要配合 tsllint-loader 使用，最好再加上 tslint-config-standard；
vue-property-decorator: vue-class-component 的扩展，添加了几个结合 Vue 特性的装饰器（@Emit，@Prop 等）；
vuex-class: 在 vue-class-component 基础上加强了对 vuex 的支持。
二、配置 Webpack
然后修改 ./build/webpack.base.conf.js 文件：
在 resolve.extension 中添加 ‘.ts’，使引入 ts 文件时不用写 .ts 后缀
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
在 module.rules 中添加 webpack 对 ts 文件的解析
三、其他配置
在项目根目录下创建 tsconfig.json 文件：
// tsconfig.json{ "compilerOptions": { // 与 Vue 的浏览器支持保持一致
"target": "es5", // 这可以对 `this` 上的数据属性进行更严格的推断
"strict": true, // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
"module": "es2015", "moduleResolution": "node"
}
}
完整的 tsconfig.json 配置项可以参考官方文档
在 ./src 目录创建 vue-shim.d.ts 文件，让 ts 识别 .vue 文件：
// vue-shim.d.tsdeclare module "*.vue" {
import Vue from "vue";
export default Vue;
}
四、文件改造
将 src 目录下的所有 js 文件后缀改为 .ts
然后将 webpack 配置文件 ./build/webpack.base.conf.js 中的入口 entry 修改为 main.ts
改造之后的 ts 文件不会识别 .vue 文件，所以在引入 .vue 文件的时候，需要手动添加 .vue 后缀
在所有 .vue 文件中，都需要在