vue3探索——在setup script中使用tsx语法

vue3+ts+eslint配置tsx

vite.config.ts

• 安装 @vitejs/plugin-vue-jsx

# npm
npm i @vitejs/plugin-vue-jsx -D
# yarn
yarn add @vitejs/plugin-vue-jsx -D
# pnpm
pnpm add @vitejs/plugin-vue-jsx -D

• 在vite.config.ts 中使用

……
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
	plugins: [vueJsx()]
})
……

tsconfig.json

{
	"compilerOptions": {
		……，
		"jsx": "preserve",
		"jsxImportSource": "vue",
	}
}

.eslintrc.js

module.exports = {
	……，
	parserOptions: {
		……，
		ecmaFeatures: {
			jsx: true,
		},
	}
}

在vue文件中使用

使用<script setup lang="tsx">

<template>
	<div>
		<myDiv />
	</div>
</template>

<script setup lang="tsx">
const myDiv = <div>myDiv</div>;
</script>