Vue3 组件命名

最简单的方式

无须引入插件,可直接命名(缺点,可能就是丑了)

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 属性以及其他一些特性。这个插件的主要功能包括:

  1. 支持在 <script setup> 中使用 name 属性 :这使得你可以像在传统的 <script> 标签中那样,在 <script setup> 标签内定义组件的名字。

  2. 支持在 <script setup> 中使用 inheritAttrs:这允许你控制组件是否继承父组件传递过来的未声明的属性。

  3. 支持在 <script setup> 中使用 defineEmitsdefineProps :这使得你可以在 <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> 语法。
相关推荐
FuckPatience几秒前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹1 分钟前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo3 分钟前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse3 分钟前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye8 分钟前
前端架构师,是架构什么
前端·架构
全马必破三11 分钟前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库16 分钟前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库
一枚前端小能手20 分钟前
🔥 SSR服务端渲染实战技巧 - 从零到一构建高性能全栈应用
前端·javascript
Komorebi_999920 分钟前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js
用户14125016652734 分钟前
一文彻底掌握 ECharts:从配置解读到实战应用
前端