setupSFC

稳定性: 实验性 ⚠️ 实验性功能，风险自负

TIP

如果你使用的是 setupSFC，则不能禁用 defineRender。

特性	支持
Vue 3	✅
Nuxt 3	✅
Vue 2	✅
TypeScript / Volar	✅

安装

ViteRollup🚧 esbuild🚧 Webpack

// vite.config.ts
import Vue from '@vitejs/plugin-vue'
import VueMacros from 'unplugin-vue-macros/vite'

export default defineConfig({
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue({
          include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],
          //                   ⬆️ 需要添加 setup 模式
        }),
      },
    }),
  ],
})

import VueMacros from 'unplugin-vue-macros/rollup'
import Vue from 'unplugin-vue/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
>
)

Volar 配置

tsconfig.json

jsonc

{
  "vueCompilerOptions": {
    "plugins": ["unplugin-vue-macros/volar"],
  },
}

贡献者

Young

页面历史

最后编辑于 3 个月前

查看完整历史

setupSFC ​

安装 ​

基本用法 ​

Volar 配置 ​

贡献者

页面历史

setupSFC

安装

基本用法

Volar 配置