首页 > 其他分享 >Vue3 setup语法糖添加name属性

Vue3 setup语法糖添加name属性

时间:2023-04-11 14:33:49浏览次数:49  
标签:vue name extend plugin setup Vue3 import vite

1. 安装插件vite-plugin-setup-extend

npm i vite-plugin-setup-extend -D

2. 配置vite.config.ts

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
// 引入插件并使用
import vueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [vue(), vueSetupExtend()],
  ...
})

3. 使用

<template></template>
// 直接在vue文件的script标签中添加name属性即可
<script setup lang="ts" name="First">
...
</script>

4. 结果

标签:vue,name,extend,plugin,setup,Vue3,import,vite
From: https://www.cnblogs.com/gyxc/p/17306106.html

相关文章

  • 报错信息:Failed to Setup IP tables: Unable to enable SKIP DNAT rule: (iptables
    一、报错提示   二、原因对关闭防火墙执行开启/关闭操作之后,没有重启docker服务三、解决办法方式一:重启docker服务systemctlrestartdocker方式二:若不想重启docker服务,则修改网络模式将docker的网络模式network_mode由映射改为host模式 ......
  • 用quasar+vue3+组合式api 实现小米商城标题栏动画
    先来看一下小米商城标题栏动画:  小米商城标题栏动画主要特点:移入时二级菜单缓慢出现;移出时二级菜单缓慢消失;在一级菜单之间移动时,二级菜单内容直接切换,没有过渡效果。实现思路一、纯css实现(❌)首先肯定是考虑:hover,但是经过试验发现,:hover可以实现鼠标移入移出时的......
  • Springboot报错:Could not resolve view with name 'index' in servlet with name 'dis
    该异常是因为用定义了带@EnableWebMvc注解的配置类后发生的,在带该注解的配置类中加入下面的代码就可以了:@BeanpublicInternalResourceViewResolverviewResolver(){InternalResourceViewResolverviewResolver=newInternalResourceViewResolver();viewResolver.......
  • vue3 el-table-column 修改时间格式
    根据element文档说明,el-table中的el-table-column是可以使用formatter格式化时间的。  先添加绑定函数formatter <el-table-columnprop="createdTimeFormat":formatter="dateFormat"label="日期"width="170"></el-table-column> 新建格式......
  • ZR.Admin小改和VUE3版本体验
    前言孔乙己显出极高兴的样子,将两个指头的长指甲敲着柜台,点头说:“对呀,对呀!......回字有四样写法,你知道么?”大家好,我是44岁的大龄程序员码农阿峰。阿峰从事编程二十年了,虽然没有成为架构师,却也用过很多种架构。几年前开始研究JAVA企业级快速开发框架若依,后来发现了它的.net版本......
  • 使用vue3创建后台管理项目
    最后案例:    一:创建一个Vue应用打开控制台:npminitvue@latest输入你需要创建的项目名称,一路回车   下载需要的包,如下:"dependencies":{"@element-plus/icons-vue":"^2.1.0","axios":"^1.3.5","element-plus"......
  • 解决ModuleNotFoundError: No module named ‘numpy.core._multiarray_umath‘的方法
    1,卸载numpy,pip3uninstasllnumpy2,清华numpy安装,pipinstall-ihttps://pypi.tuna.tsinghua.edu.cn/simple--upgradenumpy   ......
  • spring的beanName规则
    背景比如下面的AService为什么beanName是AService,首字母为什么没有小写。小写反而获取不到。@ComponentpublicclassAService{}...applicationContext.getBean("AService")源码逻辑protectedStringbuildDefaultBeanName(BeanDefinitiondefinition){......
  • vue3中的自定义指令
    1.适用到自定义指令的场景 防抖、图片懒加载、一键Copy的功能、拖拽、页面水印、权限校验、输入框自动聚焦、相对时间转换、下拉菜单2.个人需求:在后台系统中,有很多表单提交组件,其中很多限制数字且限制条件不同。最初使用oninput="value=value.replace(/[^\d]/g,'')"来显示......
  • Pycharm中安装了pandas模块,但在引入该模块时提示No module named 'pandas'
    之前遇到一个问题,先放上问题截图  pandas模块是安装在site-packages目录下的一个文件,但是引用时可以看到有红色的波浪线提示没有该模块,我们可以这样试试将projectstructure添加site-packages目录,步骤:(1)选择File—>settings—>project:pythonWork—>projectstructure  ......