Vue-cli3+typescript构建tsx开发模板步骤详解

"本文主要分享了如何搭建基于vue-cli3和typescript的tsx开发模板，通过实例代码和截图详细阐述了整个过程，适用于需要使用vue、typescript和tsx进行前端开发的人员参考。" 在现代Web开发中，Vue.js是一个非常流行的前端框架，而TypeScript则是一种静态类型的语言，它为JavaScript提供了更强大的类型检查和工具支持。Vue CLI 3 是Vue官方提供的脚手架工具，用于快速搭建Vue项目。当结合typescript使用时，可以提高代码的可维护性和可读性。tsx是TypeScript与React JSX语法的结合，允许在Vue组件中使用类似于React的JSX语法。 要创建一个基于vue-cli3和typescript的tsx开发模板，首先需要使用vue-cli 3 创建一个新的项目，并选择typescript模板。命令如下： ```bash vue create my-project --template vue-typescript ``` 项目创建完成后，为了启用tsx支持，需要安装`vue-tsx-support`库，这将使Vue组件能够使用tsx语法。安装命令如下： ```bash npm install vue-tsx-support --save # 或者 yarn add vue-tsx-support ``` 安装完毕后，对项目做一些配置调整。删除`src/shims-tsx.d.ts`文件，因为这个文件可能会与`vue-tsx-support/enable-check`的声明产生冲突。接着，在`vue.config.js`中更新`configureWebpack`的`resolve`选项，添加`.ts`和`.tsx`的扩展名，以便webpack能正确解析tsx文件： ```javascript // vue.config.js module.exports = { // ... configureWebpack: { resolve: { extensions: ['.js', '.vue', '.json', '.ts', '.tsx'] // 添加.ts和.tsx } } } ``` 完成以上步骤后，就可以开始编写tsx风格的Vue组件了。例如，在`/components`目录下创建`button.tsx`文件，然后使用tsx语法定义组件： ```typescript // components/button/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<ButtonProps>({ // 组件定义 }) export default class Button extends tsx.Component<ButtonProps> { render() { return ( <button onClick={() => this.$emit("btnClick", this.props.text)}> {this.props.text} </button> ); } } ``` 在上述代码中，我们定义了一个名为`Button`的Vue组件，它接受一个文本属性`text`和一个可选的点击事件处理函数`btnClick`。在`render`方法中，使用jsx语法创建了一个HTML按钮元素，并绑定了点击事件。 通过这种方式，开发者可以在Vue项目中利用typescript的强类型特性，同时享受tsx带来的jsx便利，提升开发效率和代码质量。这个模板可以作为基础，进一步扩展到复杂的前端应用。