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> 语法。
相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果5 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询