Vue Macros

简体中文

English

简体中文

English

外观

defineOptions ​

稳定性: 稳定

可以通过 defineOptions 宏在 <script setup> 中使用选项式 API，也就是说可以在一个宏函数中设置 name, props, emits, render。

在 Vue >= 3.3 中，此功能将默认关闭。

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

安装独立版本 ​

如果你只需要 defineOptions 功能, 那么独立版本更适合你。

安装 ​

bash
npm i -D unplugin-vue-define-options @vue-macros/volar
npm i -D unplugin-vue-define-options @vue-macros/volar
bash
yarn add -D unplugin-vue-define-options @vue-macros/volar
yarn add -D unplugin-vue-define-options @vue-macros/volar
bash
pnpm add -D unplugin-vue-define-options @vue-macros/volar
pnpm add -D unplugin-vue-define-options @vue-macros/volar
ts
// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'

export default defineConfig({
  plugins: [DefineOptions()],
})
// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'

export default defineConfig({
  plugins: [DefineOptions()],
})
ts
// rollup.config.js
import DefineOptions from 'unplugin-vue-define-options/rollup'

export default {
  plugins: [DefineOptions()],
}
// rollup.config.js
import DefineOptions from 'unplugin-vue-define-options/rollup'

export default {
  plugins: [DefineOptions()],
}
js
// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [require('unplugin-vue-define-options/esbuild')()],
})
// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [require('unplugin-vue-define-options/esbuild')()],
})
js
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [require('unplugin-vue-define-options/webpack')()],
}
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [require('unplugin-vue-define-options/webpack')()],
}

TypeScript 支持 ​

json
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
  }
}
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
  }
}

基本用法 ​

vue
<script setup lang="ts">
import { useSlots } from 'vue'
defineOptions({
  name: 'Foo',
  inheritAttrs: false,
})
const slots = useSlots()
</script>
<script setup lang="ts">
import { useSlots } from 'vue'
defineOptions({
  name: 'Foo',
  inheritAttrs: false,
})
const slots = useSlots()
</script>
编译后的代码
vue
<script lang="ts">
export default {
  name: 'Foo',
  inheritAttrs: false,
}
</script>

<script setup>
const slots = useSlots()
</script>
<script lang="ts">
export default {
  name: 'Foo',
  inheritAttrs: false,
}
</script>

<script setup>
const slots = useSlots()
</script>

<script setup> 中使用 JSX ​

vue
<script setup lang="tsx">
defineOptions({
  render() {
    return <h1>Hello World</h1>
  },
})
</script>
<script setup lang="tsx">
defineOptions({
  render() {
    return <h1>Hello World</h1>
  },
})
</script>
编译后的代码
vue
<script lang="tsx">
export default {
  render() {
    return <h1>Hello World</h1>
  },
}
</script>
<script lang="tsx">
export default {
  render() {
    return <h1>Hello World</h1>
  },
}
</script>

Volar 配置 ​

jsonc
// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3, // 或 2.7 用于 Vue 2
    "plugins": [
      "@vue-macros/volar/define-options"
      // ...更多功能
    ]
  }
}
// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3, // 或 2.7 用于 Vue 2
    "plugins": [
      "@vue-macros/volar/define-options"
      // ...更多功能
    ]
  }
}