Vue MacrossetupSFC
稳定性:
实验性 ⚠️ 实验性功能，风险自负TIP
如果你使用的是 setupSFC，则不能禁用 defineRender。
| 特性 | 支持 |
|---|---|
| Vue 3 | ✅ |
| Nuxt 3 | ✅ |
| Vue 2 | ✅ |
| TypeScript / Volar | ❌ |
安装
ts
// vite.config.ts
import VueMacros from 'unplugin-vue-macros/vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
VueMacros(),
Vue({
include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],
// ⬆️ 需要添加 setup 模式
}),
],
})// vite.config.ts
import VueMacros from 'unplugin-vue-macros/vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
VueMacros(),
Vue({
include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],
// ⬆️ 需要添加 setup 模式
}),
],
})ts
import Vue from 'unplugin-vue/rollup'
import VueMacros from 'unplugin-vue-macros/rollup'
export default defineConfig({
plugins: [
VueMacros({
plugins: {
vue: Vue({
include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],
// ⬆️ 需要添加 setup 模式
}),
},
}),
],
})import Vue from 'unplugin-vue/rollup'
import VueMacros from 'unplugin-vue-macros/rollup'
export default defineConfig({
plugins: [
VueMacros({
plugins: {
vue: Vue({
include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],
// ⬆️ 需要添加 setup 模式
}),
},
}),
],
})🚧🚧🚧🚧基本用法
tsx
// Foo.setup.tsx
defineProps<{
foo: string
}>()
defineEmits<{
(evt: 'change'): void
}>()
export default () => (
<div>
<h1>Hello World</h1>
</div>
)// Foo.setup.tsx
defineProps<{
foo: string
}>()
defineEmits<{
(evt: 'change'): void
}>()
export default () => (
<div>
<h1>Hello World</h1>
</div>
)已知的问题
- Source map 在 JSX/TSX 文件中不能正确的映射。
- TypeScript 支持尚未完成。