使用vue-cli3+typescript构建tsx开发模板的步骤分享

基于 Vue CLI 3+TypeScript 的 TSX 开发模板搭建过程分享 本文将详细介绍使用 Vue CLI 3+TypeScript 创建基于 TS 的模板，并将模板方式改成 TSX 的方式，借助 vue-tsx-support 库。 知识点一：使用 Vue CLI 3+ 创建基于 TS 的模板 使用 Vue CLI 3+ 可以快速创建一个基于 TypeScript 的模板，命令如下： ``` vue create my-project ``` 这将创建一个名为 my-project 的项目，并使用 TypeScript 作为默认语言。 知识点二：安装 vue-tsx-support 库 为了将模板方式改成 TSX 的方式，我们需要安装 vue-tsx-support 库，命令如下： ``` npm install vue-tsx-support --save ``` 或 ``` yarn add vue-tsx-support ``` 安装结束后，我们需要对我们的文件做一些小改动。 知识点三：配置 main.ts 文件 在主入口文件 main.ts 中，我们需要引入 vue-tsx-support 库，代码如下： ``` import * as tsx from 'vue-tsx-support'; ``` 知识点四：删除 src/shims-tsx.d.ts 文件 为了避免和 vue-tsx-support/enable-check 声明重复冲突，我们需要删除 src/shims-tsx.d.ts 文件。 知识点五：配置 vue.config.js 文件 在 vue.config.js 文件中，我们需要在 configureWebpack 属性下增加一项 resolve，代码如下： ``` module.exports = { // ... configureWebpack: { resolve: { extensions: ['.js', '.vue', '.json', '.ts', '.tsx'] // 加入 ts 和 tsx } } } ``` 知识点六：创建 TSX 文件 现在，我们可以在 /components 下新建一个文件 button.tsx，代码如下： ``` import { Component, Prop } from 'vue-property-decorator'; import * as tsx from 'vue-tsx-support'; interface ButtonClick { (value: string): void } interface ButtonProps { text: string; btnClick?: ButtonClick } @Component export default class ZButton extends tsx.Component<ButtonProps> { // ... } ``` 这样，我们就可以开始开发基于 TSX 的 Vue 项目了。