解锁 Vue 项目中 TSX 配置与应用简单攻略

在 Vue 项目中配置 TSX 写法

在 Vue 项目中使用 TSX 可以为我们带来更灵活、高效的开发体验，特别是在处理复杂组件逻辑和动态渲染时。以下是详细的配置步骤：

一、安装相关依赖

首先，我们需要在命令行中输入以下命令来安装 @vitejs/plugin-vue-jsx 插件：

pnpm i @vitejs/plugin-vue-jsx -D

这里使用 pnpm 进行安装，如果使用的是 npm 或者 yarn，将命令中的 pnpm 替换为相应的包管理器命令即可。这个插件是用于在 Vite 项目中支持 Vue 的 JSX 语法。

二、Vite 配置

在 vite.config.js 文件中进行如下配置：

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'export default defineConfig({plugins: [vue(), vueJsx()]
})

三、Vite 配置

在 tsconfig.json 文件中，需要添加以下配置：

  "compilerOptions": {"jsx": "preserve","jsxFactory": "h","jsxFragmentFactory": "Fragment",}

四、示例

//注意文件格式应该是tsx或jsx，这里由于csdn无法识别，所以代码格式写成js
import { defineComponent,ref } from 'vue'const MyComponent = defineComponent({setup() {const a=ref('helloworld!') return () => (<div><h1>{a.value}</h1></div>)}
})export default MyComponent

简单介绍Tsx

流程

vue编译时将tsx文件解析为typescript文件，然后编译为js文件，最后运行时解析js文件，将js文件解析为render function，通过h函数构建虚拟DOM

语法

1. v-model

// 注意tsx不会自动从ref中解析value
const message = ref<string>('Hello, World!');
<input type="text" v-model={message.value}/>//也可以
<input type="text" value={inputText.value}/>

2. v-show

<div v-show={message.value} >this is {message.value}</div>

3. v-if和v-else

使用三目运算符实现

<div>{message.value?'你输入了：'+message.value:'没有哦'}
</div>

4. 数组遍历v-for

使用map实现

<div>{arr.value.map((item,index)=>{return <div key={index}>{item}</div>})}
</div>

5. 绑定事件

如果不需要传参数，直接绑定

const count=ref<number>(0)
const handleClick=()=>{count.value++
}<div><button onClick={handleClick}>{count.value}</button>
</div>

如果需要传参

<button onClick={() => handleClick(count.value)}>{count.value}</button>

如果需要添加事件修饰符，使用驼峰写法将他们拼接在事件名后面

6. tsx中引入scss样式

• 新建样式文件 xx.module.scss，其中写样式
  module意味着这个文件被当作模块来处理，生成的css类名会被局部化，自动加上唯一哈希值，防止类名冲突
• 文件中引入样式文件

import styles from '../styles/parent.module.scss'//对应的元素上添加类名
<div class={styles.red}>红色</div>

• 也可以直接简单的引入

import '../styles/parent.scss'
<div class="blue">蓝色</div>

7. 父子组件传参

// 父组件传参
<InputSelect options={options.value} v-model={formData.value.data}></InputSelect>//子组件接收参数
props:{modelValue:{type:Object,default:()=>({})},options:{type:Array}},setup(props){//...}