vue3+vite+tsx 配置及使用

以下在 vue3+vite+ts 基础上配置

配置

第一步 先安装 jsx 依赖 yarn add @vitejs/plugin-vue-jsx -d or npm i @vitejs/plugin-vue-jsx -d；
安装完成后如果报vite.createFilter is not a function查看vite版本和安装的依赖版本是否一致。

第二步 在vite.config.ts文件中引入并使用jsx依赖。以下配置仅为了展示jsx配置展示，详细配置可查看 vite详细配置 或 vite官网；tsconfig.json include 配置添加.tsx。

• jsx直接引入css文件少了sfc的scope会变成全局全局引入，vite使用了postcss-modules 可以开启模块化样式来避免样式冲突。样式命名需要加.modele，如果不想添加可参考 大佬博客。
• jsx的dom中变量需要以单层大括号包裹。
• 多层dom可以使用空标签包裹<></>。

import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import type { UserConfig, ConfigEnv  } from "vite";

export default ({command, mode}: ConfigEnv): UserConfig => {
	return {
	    css: {
	      modules: {
	        scopeBehaviour: 'local', // 'global' | 'local'
	      }
	    },
		plugins: [
	      vue(),
	      vueJsx()
	    ]
	}
}

tsconfig.json

{
	"include": [
    "src/**/*.tsx"
  ]
}

css配置完成后引入文件编辑器会爆红，可以在d.ts里面添加declare module '*.scss';使用方式：
.tsx文件引入

import styles from 'test.module.scss'

export default defineComponent({
  name: 'test',
  setup () {
    return () => (
      <div class={styles['test-wrap']}></div>
    )
  }
})

test.module.scss

.test-wrap{
  width: 80px;
  height: 20px;
  border: 1px solid #f0f0f0;
}

效果及dome

使用

jsx一些事件的写法及指令需要改写。

@click

@click 需要改成 onClick，当使用点击事件的时候需要写成onClick={(event) => toggleCate(event, data)}样式，当需要获取event事件时可以传值event不使用可为空。

v-if

if else语句在使用时需要以大括号包裹;

export default defineComponent({
  name: 'test',
  setup () {
    const status = ref(true)
    return () => (
      <>
        { 
          status.value ? <div>1</div> : <div>2</div>
        }
      </>
    )
  }
})

v-for

export default defineComponent({
  name: 'test',
  setup () {
    const list = [1, 2, 3, 4]
    return () => (
      <>
        <div class={styles['test-wrap']}></div>

        {
          list.map(item => (
            <div>{item}</div>
          ))
        }
      </>
    )
  }
})

v-slot

在jsx里面的插槽需要使用v-slots插入。如果有传值可以在箭头函数中接收。slot传值写入当发现未渲染时记得查看这个值是不是可输出的，如果是对象会直接显示为空。

const footerSlot = {
  footer: () => (<div>
    <el-button>取消</el-button>
    <el-button type="primary">确定</el-button>
  </div>)
}
return () => (
	<el-dialog v-model={visible.value} title="测试" v-slots={footerSlot} before-close={closeDialog}></el-dialog>
)