Vue3使用setup-extend简化组件名写法

最新推荐文章于 2024-08-17 20:24:48 发布
最新推荐文章于 2024-08-17 20:24:48 发布
阅读量995 收藏 13
点赞数 10
分类专栏： Vue 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xunlin233/article/details/135922145
版权

如果我们在Vue3中要使用setup的语法糖，就需要使用两个script标签，一个用于设置组件的name属性，一个用于编写setup中的代码。如下：

但是我们有觉得光是因为一个name属性就多写一个script标签有点麻烦了。

因此我们可以使用插件来进行简化，将name作为script标签的属性来设置组件名。

使用方法：

1. 安装setup-extend

npm i vite-plugin-vue-setup-extend -D

 

2. 在vite-config.js中调用插件

3. 在script标签上配置name

 

永久旅途
关注
专栏目录
vue脚手架,vue3 组件 vue-property-decorator 组件
09-11
`vue-property-decorator`是一个库，它是Vue.js和TypeScript的结合，提供了装饰器来帮助我们在TypeScript中更好地声明和管理组件的属性。它使得我们可以利用TypeScript的强类型系统，提高代码的可维护性和可读性。...
vue3中一些简单的小技巧
m0_50074446的博客
06-15 4638
学习vue3+vite中看到了一些小技巧，这个小技巧可以在写代码时更加的顺畅，更加的丝滑。
Vue 3 项目构建与效率提升：vite-plugin-vue-setup-extend 插件应用指南
俎树振的博客
04-17 4269
一、Vue3项目创建； 二、VSCode 工具的智能提示与自动添加 .value； 三、SASS安装 四、Vite 插件 vite-plugin-vue-setup-extend 的应用； 五、VSCode 自定义代码片段的创建与应用
插件vite-plugin-vue-setup-extend
最新发布
咸鱼滚滚
08-17 542
/ 使用插件后，可以直接导入 ref 和 reactive，无需显式从 'vue' 导入。是一个用于增强 Vue 3 在 Vite 项目中使用。插件可以通过扩展的方式，给。
5个促进Vue3开发更友好的插件
weixin_44727080的博客
03-01 5407
前言： 网上找到几个好用的插件，这里分享一下。 具体插件： 一、setup name 增强 Vue3的setup语法糖是个好东西，但使用setup语法带来的第一个问题就是无法自定义name，而我们使用keep-alive往往是需要name的，解决这个问题通常是通过写两个script标签来解决，一个使用setup，一个不使用，但这样必然是不够优雅的。 这时候借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题，不用写两个script标签，可以直接...
vite-plugin-vue-setup-extend和unplugin-auto-import让v3开发更丝滑
SunFlower914的博客
08-29 6081
1.vite-plugin-vue-setup-extend让v3的setup语法糖增强；2.unplugin-auto-import让API自动导入，可以让vue-router中的createRouter，createWebHashHistory，createWebHistory等API直接写在setup内。可以让vueAPI里面的ref,reactive,watch,watchEffect等等api直接写在setup内，也可以让pinia中的createPinia直接写在setup.........
VUE3里面 setup() 的常用方法一览
wanmeifengfeng的博客
03-22 5839
比较常用的方法加注视一览，我尽量写简单一点，通熟易懂，举一反三 响应式数据定义 ref、reactive reactive 创建一个响应式对象 <template> {{ state.count }} </template> <script> import { reactive } from 'vue'; export default { setup () { //创建响应式数据 const state = reactive({
vue3使用setup语法糖时无法定义组件name？使用vite-plugin-vue-setup-extend解决，但无效？
留白声的博客
09-25 909
使用vite-plugin-vue-setup-extend解决，setup语法糖如何定义组件name问题
Vue3使用vite-plugin-vue-setup-extend 不生效问题
weixin_45441173的博客
02-20 1596
Vue3使用vite-plugin-vue-setup-extend 不生效问题
vue-notification:使用Vue3的NotificationToast组件
03-28
@ dafcoe / vue-notification 使用Vue3构建的易于使用，可自定义的通知/吐司库。 在页面上查看操作。安装使用yarn或npm将软件包安装为项目依赖项： $ yarn add @dafcoe/vue-notification--- or ---$ npm install --...
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
10-14
本文将详细介绍如何在使用Vue框架开发的微信H5页面中集成wx-open-launch-app组件，实现用户点击后通过微信浏览器打开相应的App的功能。这项技术能够让用户在不离开微信环境的情况下，直接打开手机上的App，大大增加...
vue-setup-mixins：vue-setup-mixins
02-15
Practice_s19-s20项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
2. **预设模式**：为了简化使用，Vue-Cron通常会包含一些预设的定时任务模式，如每分钟、每小时、每天等，用户可以直接选择这些预设模式。 3. **实时预览**：当用户调整设置时，Vue-Cron会即时更新并显示对应的Cron...
Vue3开发小记
Koini
05-16 206
​插件名称：vite-plugin-vue-setup-extend1、安装2、配置 ( vite.config.ts )plugins: [vue(),})3、使用// test</script>问题：在使用 vite-plugin-vue-setup-extend 0.4.0 及以前版本时，会有个问题：如果 script 标签内没有内容，即使给 script 标签添加上 name 属性，其在 vue-devtools 内也不会生效。
如何在Vue3.2的setup中设置组件名、在vben-admin中实现页面缓存？
时清云的博客
10-22 3250
为什么会取这样的标题名？有很多小伙伴会有这样的问题。我先解答一下，和设置组件名的方式不一样，想要通过实现页面缓存，一定要设置组件名，所以有个先后顺序，先设置组件名，然后实现页面缓存。我们先看一下在和中分别是怎么设置组件名的？
Vue3.0-setup函数
qq_64067728的博客
09-16 591
第一种是正常的在script中使用setup函数，然后给出数据、方法的返回值就可以使用对应的数据、方法，这种情况下，vue2.0中的生命周期函数，data，methods、计算属性，监听器等都可以正常使用，但是data和setup两个的优先级，setup优先级更高。第二种是在script标签中将setup当成一个属性，这是setup的一种语法糖，添加进去，然后再script中不再需要像setup函数一样需要返回对应数据、方法，组件中所有用到的：数据、方法等等，都要配置在setup中。
Vue3使用vite-plugin-vue-setup-extend在setup中添加 name 属性
清云
11-22 7636
【代码】Vue3使用vite-plugin-vue-setup-extend在setup中添加 name 属性。
Vue3+vite搭建基础架构（10）--- 使用less和vite-plugin-vue-setup-extend
weixin_48040732的博客
02-20 2831
这里记录下自己在Vue3+vite的项目使用less来写样式以及使用vite-plugin-vue-setup-extend直接定义组件name，不使用ts语法，方便以后直接使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值