最简单的方式
无须引入插件,可直接命名(缺点,可能就是丑了)
javascript
// 组件命名
defineOptions({name: 'Menu'})
优雅的命名方式
安装 vite-plugin-vue-setup-extend
插件
javascript
npm i vite-plugin-vue-setup-extend -D
vite-plugin-vue-setup-extend
插件的作用
vite-plugin-vue-setup-extend
是一个 Vite 插件,它允许你在 <script setup>
语法中使用 name
属性以及其他一些特性。这个插件的主要功能包括:
-
支持在
<script setup>
中使用name
属性 :这使得你可以像在传统的<script>
标签中那样,在<script setup>
标签内定义组件的名字。 -
支持在
<script setup>
中使用inheritAttrs
:这允许你控制组件是否继承父组件传递过来的未声明的属性。 -
支持在
<script setup>
中使用defineEmits
和defineProps
:这使得你可以在<script setup>
中更灵活地定义组件的 props 和 emits。
配置 Vite:
在 vite.config.js
文件中添加以下代码:
javascript
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// 主要是这一行
import vueSetupExtend from 'vite-plugin-vue-setup-extend';
export default defineConfig({
// 还有这一行
plugins: [vue(), vueSetupExtend()],
});
使用示例
现在你可以使用 <script setup>
中的 name
属性了:
javascript
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script setup name="MyComponent">
import { ref } from 'vue';
const message = ref('Hello, Vue!');
</script>
注意事项
- 确保你的项目使用的是 Vue 3。
- 确保你的 Vite 版本足够新,以支持这个插件。
- 如果你使用的是 Vue CLI 创建的项目,通常不需要安装这个插件,因为 Vue CLI 通常已经支持
<script setup>
语法。