Rumah  >  Artikel  >  hujung hadapan web  >  Vue与Typescript构建项目

Vue与Typescript构建项目

php中世界最好的语言
php中世界最好的语言asal
2018-03-19 17:01:012651semak imbas

这次给大家带来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 文件中,都需要在