首页 > 其他分享 >Vue3 使用setup语法糖时, 组件name命名

Vue3 使用setup语法糖时, 组件name命名

时间:2024-04-18 10:34:29浏览次数:24  
标签:vue name extend plugin setup Vue3 vite

1. 多使用一个 <script> 标签命名

<script>
  export default {
    name: 'Person'
  }
</script>
<script setup>
  ...
</script>

2.使用插件

  1. 安装插件 vite-plugin-vue-setup-extend
pnpm install vite-plugin-vue-setup-extend -D
  1. 在vite.config文件引入
 import VueSetuoExtend from 'vite-plugin-vue-setup-extend'

 export default defineConfig({
  plugins: [
    VueSetuoExtend()
  ]
})
  1. 使用
<script setup name="Person"></script>

标签:vue,name,extend,plugin,setup,Vue3,vite
From: https://www.cnblogs.com/mujianyouxia/p/18140671

相关文章

  • 面试官:来说说vue3是怎么处理内置的v-for、v-model等指令?
    前言最近有粉丝找到我,说被面试官给问懵了。粉丝:面试官上来就问“一个vue文件是如何渲染成浏览器上面的真实DOM?”,当时还挺窃喜这题真简单。就简单说了一下先是编译成render函数、然后根据render函数生成虚拟DOM,最后就是根据虚拟DOM生成真实DOM。按照正常套路面试官接着会问vue......
  • vue3 ts 建立项目
    1、安装pnpmnpminstallpnpm-g2、安装vitepnpminstallvite-D3、在需要的文件夹下建项目npmcreatevite@latest 打开4、main.ts引入element-plusnpminstallelement-plus--savemain.tsimportElementPlusfrom'element-plus'import*asElementPlusIconsVue......
  • vue3 快速入门系列 —— 组件通信
    vue3快速入门系列-组件通信组件通信在开发中非常重要,通信就是你给我一点东西,我给你一点东西。本篇将分析vue3中组件间的通信方式。Tip:下文提到的绝大多数通信方式在vue2中都有,但是在写法上有一些差异。准备环境在vue3基础上进行。新建三个组件:爷爷、父亲、孩子A、......
  • 点击菜单生成tabs(vue3.0)
    1.安装vuex npminstallvuex@next--save在main.js中引用vuex2.在main.js同级目录新建store/store.js文件 代码:import{createStore}from'vuex'exportdefaultcreateStore({ state:{ tabsList:[] }, mutations:{ addTab(state,tab){ //判断是否......
  • 08 Vue3项目搭建后台管理系统
    项目配置elementPlus1.下载安装npminstallelement-plus@element-plus/icons-vue2.main.ts全局注册import{createApp}from'vue';import{createPinia}from'pinia';//1.引入elementPlusimportElementPlusfrom'element-plus';//......
  • C:\Windows\System32\setup 目录中,这个目录包含了一些与系统安装和配置相关的文件
    C:\Windows\System32\setup目录中,这个目录包含了一些与系统安装和配置相关的文件。作用:cmmigr.dll:这是一个动态链接库文件,可能与移动设备中心相关。它可能包含了用于迁移和处理移动设备中心配置的函数和资源。comsetup.dll:这是ComponentServicesSetup工具的......
  • vue3 + vant4 checkbox多选弹框
    实现效果代码如下多选组件DictSelect.vue<template><van-popup:show="showPicker"position="bottom":style="{height:'34vh'}"><divclass="con"><divclass="confirmBtns"&......
  • vue2 mixin 和 vue3 hook
    mixin1.逻辑函数的复用2vue组件中的选项式API(例如:data,computed,watch)或者组件的生命周期钩子(created、mounted、destroyed)使用方法mixins:[mixins],//注册mixin,这样mixin中所有的钩子函数等同于组件中钩子1mixin中的生命周期函数会和组件的生命周期函数一起合并执行。2......
  • 前端学习-vue视频学习016-vue3新组件
    尚硅谷视频教程Teleport:让部分元素脱离原来的位置,到to指定的位置去此处指定了弹窗到body标签内<template><h4>Model</h4><button@click="isShow=true">打开弹窗</button><Teleportto='body'><divclass="tanchuang&q......
  • Parcharm-ModuleNotFoundError: No module named 'request'--解决方案
    问题:在Pycharm中报requestsmodule找不到特别的地方:已经通过“pip3installrequests”的命令安装过requests这个模块,并能顺利运行,但是不能在Pycharm中运行 解决方案如下:1.找到Pycharm中的setting设置,并打开2.找到自己工作的目录下的“PythonInterpreter”-->"+......