vite插件vite-plugin-vue-setup-extend setup添加name属性

vite-plugin-vue-setup-extend插件

背景：在使用vue3写组建的时候用的是setup语法糖，需要把组件抽出来做成插件，在项目中install使用，需要给组建命名

方法：使用vite-plugin-vue-setup-extend在setup中添加name属性

1. 安装插件

npm i vite-plugin-vue-setup-extend@0.4.0 -D

2.配置vite.config.ts

import { defineConfig } from 'vite'
// 安装的插件
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
  plugins: [ VueSetupExtend() ]
})

3.在组件中使用

<script lang="ts" setup name="test">
</script>

在网络中看到网友使用vite-plugin-vue-setup-extend 0.4.0 及以前版本时，会有个问题：如果 script 标签内没有内容，即使给 script 标签添加上 name 属性，其在 vue-devtools 内也不会生效

解决方案

<script lang="ts" setup name="test">
// test
</script>

这篇好文章是转载于：学新通技术网