搭建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')
    }
  }

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+Typescript工程_第1张图片
@号和.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

搭建vue+Typescript工程_第2张图片
修饰符报错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. 其他常见问题

  1. 引入第三方库
    Typescript中引入第三方库除了要引用库本身外,还需引用库的声明文件
    比如我想引入lodash库,那么我就要执行以下两条命令
npm i --save lodash
npm i --save @types/lodash

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

  1. 不支持下划线语法
    有时候,接口返回的字段会是这样的
access_token

但是呢,我们的eslint默认要求所有变量遵循驼峰原则,即accessToken,这样的话,我们的编辑器就会报错,那么怎么解决呢?
我们找到根目录下的.eslintrc.js文件,他是负责eslint配置的,我们给他的rules对象增加一条属性

'camelcase':0

这样就关闭了eslint的驼峰检测了
ok,以上就是这篇要说的全部内容,如果,你已迫不及待,就打开vscode搭建一遍吧。

以下是一个已经搭建好的小demo
vue+typescript demo

参考链接/推荐阅读

  • typescript官网 tsconfig章节
  • vue + typescript 项目起手式
  • 增强eslint的tslint插件

你可能感兴趣的:(搭建vue+Typescript工程)