[Vue3.x]: script setup语法糖通过defineOptions定义组件namevue + vite +

vue + vite + typescript项目

首先，安装unplugin-vue-define-options依赖

$ npm i unplugin-vue-define-options -D

然后，配置vite.config.ts

import { defineConfig } from 'vite'
import DefineOptions from 'unplugin-vue-define-options/vite'
import vue from '@vitejs/plugin-vue'

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

接着，在tsconfig.json设置types，如下所示:

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

typescript项目中，如果不设置该属性，会报红。

注意: 若是项目中使用了eslint，可以在.eslintrc.js配置文件中，配置globals选项

// .eslintrc.js
module.exports = {
    globals: { defineOptions: 'writable' }
}

使用方式，如下:

<template></template>

<script setup lang="ts">
import { ref } from 'vue'

defineOptions({
  name: 'ComponentName'
})
</script>

<style scoped></style>

其它

Vue CLI项目中，在vue.config.js中添加如下配置:

module.exports = {
  configureWebpack: {
    plugins: [require('unplugin-vue-define-options/webpack')()],
  },
}

webpack项目中，在webpack.config.js中添加如下配置:

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

更多请参考: unplugin-vue-define-options