Pan的技术生涯

Appearance

Return to top
文章目录

解决setup语法糖下name定义问题

解决方案

安装 unplugin-vue-define-options 插件

shell
pnpm i -D unplugin-vue-define-options

在 vite 中配置插件

ts
// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'

export default defineConfig({
  plugins: [DefineOptions()],
})

在 ts 中配置插件

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

在 eslint 中配置

.eslintrc.cjs

ts
module.exports = {
  // 省略一堆配置...

  globals: {
    // 省略一堆配置...
    defineOptions: 'readonly',
  },

  // 省略一堆配置...
}

基本使用

html
<script setup lang="ts">
  import { useSlots } from 'vue'
  defineOptions({
    name: 'Foo',
    inheritAttrs: false,
  })
  const slots = useSlots()
</script>
html
<script setup lang="tsx">
  defineOptions({
    render() {
      return <h1>Hello World</h1>
    },
  })
</script>