vue3 中使用 jsx 开发的详细过程

// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'
import { defineConfig } from 'vite'

export default defineConfig(() => {
  return {
    plugins: [vueJsx()]
  }
})

<!-- .vue -->
<template>
  <div>Hello World</div>
</template>

<!-- .jsx -->
<script>
export default defineComponent({
  setup() {
    return () => (
      <div>Hello World</div>
    )
  }
})
</script>

<!-- .vue -->
<el-input v-model="queryParams.pageNumber" />
<el-form model="queryParams" :inline="true">...</el-form>

<!-- .jsx -->
<el-input v-model={queryParams.value.pageNumber} />
<el-form model={queryParams.value} inline={true}>...</el-form>

<!-- .vue -->
<el-input v-model.trim={ queryParams.name } />

<!-- .jsx -->
<el-input v-model={ [queryParams.value.name, ['trim'] } />
<!-- 或 -->
<el-input v-model_trim={ refVal.value } />

<!-- .vue -->
<el-button
  v-hasPermission:arg.event="['xxx:add']"
  type="primary"
  plain
  icon="Plus"
  @click="handleAdd"
>
  新增
</el-button>

<!-- .jsx -->
<el-button
  v-hasPermission={[['xxx:add'], 'arg', ['event']]}
  type='primary'
  plain
  icon="Plus"
  onClick={handleAdd}
>
  新增
</el-button>

<!-- .vue -->
<h1 v-for="item in list" :key="item">{{item}}</h1>

<!-- .jsx -->
<script>
{list.value.map(item => (
  <h1>{item}</h1>
))}
</script>

<!-- .vue -->
<template v-for="col in columns">
  <el-table-column
    v-if="col.visible"
    :key="col.key"
    :label="col.label"
    :prop="col.field"
  />
</template>

<!-- .jsx -->
{columns.value.map(col =>
  col.visible ? (
    <el-table-column
      key={col.id}
      label={col.label}
      prop={col.field}
    />
  ) : null
)}

<!-- .vue -->
<el-button @click="handleQuery">搜索</el-button>

<!-- .jsx -->
<el-button onClick={handleQuery}>搜索</el-button>

<!-- .vue -->
<el-input
  v-model.trim="queryParams.number"
  clearable
  style="width: 180px"
  @keyup.enter="handleQuery"
/>

<!-- .jsx -->
<el-input
  v-model_trim={queryParams.value.number}
  clearable
  style={{ width: '180px' }}
  onKeyup={e => e.code === 'Enter' && handleQuery()}
/>

<!-- .vue -->
<el-dialog
  v-model="configOpen"
  title="弹出框"
  append-to-body
  >
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="configOpen = false">取 消</el-button>
    </div>
  </template>
</el-dialog>

<!-- .jsx -->
<el-dialog
  v-model={configOpen.value}
  title='弹出框'
  append-to-body
  v-slots={{
    footer: () => (
      <div class='dialog-footer'>
        <el-button
          onClick={() => {
            configOpen.value = false
          }}
        >
          取 消
        </el-button>
      </div>
    )
  }}
  >
  <!-- ... -->
</el-dialog>