在现代前端开发中，使用Vue-cli 3与TypeScript结合进行开发已成为一种趋势。特别是TSX（TypeScript XML）格式提供了灵活的组件描述方式，使得开发者能够更高效地构建复杂的用户界面。本文将为你提供一份详细的搭建指南，帮助你轻松完成基于Vue-cli 3和TypeScript的TSX开发模板。

1. 安装Vue-cli 3

首先，我们需要确保在系统中安装了Node.js。可以访问官网进行下载与安装，完成后在命令行中检查版本。

node -v

接下来，我们可以通过命令如下安装Vue-cli 3：

npm install -g @vue/cli

成功后，检查安装情况：

vue --version

2. 创建Vue项目

使用Vue-cli创建新项目的命令如下：

vue create my-tsx-app

在创建过程中，选择手动配置特性，并选择TypeScript和其他需要的选项。

2.1 配置TypeScript

在手动配置特性时，确保你选择了TypeScript，并可以选择使用Class风格还是导出风格。这里推荐使用Class风格，它与React的风格非常接近，适合TSX的开发。

3. 添加TSX支持

在项目创建完成后，我们需要安装Vue 3，因为TSX支持主要依赖Vue 3。使用以下命令添加依赖：

npm install vue@next @vue/compiler-sfc

同时，我们还需要安装babel-plugin-transform-vue-jsx以支持TSX语法：

npm install @babel/plugin-transform-vue-jsx

4. 修改配置文件

接下来，我们需要在项目中添加或修改babel.config.js文件，以启用TSX支持。

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    '@babel/plugin-transform-typescript',
    '@babel/plugin-transform-vue-jsx'
  ]
}

5. 创建TSX组件

现在我们可以开始创建使用TSX的组件。在src/components目录下新建一个文件，比如HelloWorld.tsx：

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return () => (
      

        
Hello, TSX with Vue 3!
      
    );
  }
});

在这个例子中，我们使用了defineComponent来定义一个组件，并用TSX语法创建了页面内容。

6. 运行项目

完成以上步骤后，运行项目以查看效果：

npm run serve

在浏览器中打开localhost:8080，你将看到利用TSX创建的组件动起来了。这就是基于Vue-cli 3和TypeScript的TSX开发模板的搭建全攻略！

7. 总结

通过以上步骤，你已经成功搭建了一个基于Vue-cli 3和TypeScript的TSX开发环境。TSX的使用使得代码更加清晰、有序，为开发提供了极大的便利。

希望这篇文章对你有所帮助，敬请继续关注后续的相关内容！