侧边elementplus图标vue3

vue3中如何通过遍历传入组件名称动态创建多个component 组件

背景 在 vue3 中,如果使用 component,可以动态加载一个组件,例如 <!-- 直接创建 --> <component :is="Image" /> 这样会将已经定义好并导入的比如 Image 组件加载出来,但是如果将需要展示的自定义组件放在一个数组中,遍历展示,则无法展示成功。 <!- ......
组件 component 多个 名称 动态

从0搭建Vue3组件库(七):使用 glup 打包组件库并实现按需加载

使用 glup 打包组件库并实现按需加载 当我们使用 Vite 库模式打包的时候,vite 会将样式文件全部打包到同一个文件中,这样的话我们每次都要全量引入所有样式文件做不到按需引入的效果。所以打包的时候我们可以不让 vite 打包样式文件,样式文件将使用 gulp 进行打包。那么本篇文章将介绍如何 ......
组件 Vue3 glup Vue

为 Linux 下 .AppImage 运行文件快速生成桌面和任务栏图标 .sh 文件

I had a friend make an install sh file: It seems to work well and I get an icon added to my ubuntu left app shortcut bar. Here it is below. I will del ......
文件 图标 AppImage 桌面 任务

Vue3中KeepAlive的使用

我们在开发一个功能是,经常会遇到从一个列表页面,点击列表项跳转到详情页面的需求,理想的情况下,从详情页面返回到列表页,应该回到跳转前的状态,可以继续浏览其他内容;但是在没做任何处理的情况下,返回列表页后,列表页会被刷新,回到初始的状态,这就与我们的预设不符;为了实现这样的需求,我们需要使用keep- ......
KeepAlive Vue3 Vue

Ubuntu 下关于 IDEA 或应用程序图标在 Dock 栏下显示异常的问题

解决逻辑步骤: 检查应用程序的桌面文件配置 在 /usr/share/applications/ 目录下检查应用程序的桌面文件路径是否正确。 如果路径不正确,可以尝试修改桌面文件中的 Exec 属性和 Icon 属性,以确保路径正确。 当你确保自己配置没有问题时,继续下述解决思路 查看启动该程序时, ......
应用程序 图标 程序 Ubuntu 问题

在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载的对象接口

在基于vue-next-admin 的 Vue3+TypeScript 前端项目中,可以整合自己的 .NET 后端,前端操作一些功能的时候,为了使用方便全局挂载的对象接口,以便能够快速处理一些特殊的操作,如消息提示、辅助函数、正则测试等等。本篇随笔介绍在Vue3+TypeScript 前端项目中全局... ......

vue的从0到1 p4—— vue2改vue3

背景:由于配置公司的vue2项目,什么东西都用不了很烦,我就重新卸载了vue2.9.6,参考文档:https://blog.csdn.net/qq_48736958/article/details/111405591 步骤: 1、卸载原有的版本,首先打开cmd,查看现有的vue版本 $ vue -- ......
vue vue2 vue3

Vue3 学习记录

VUE3 学习记录 模板语法 绑定文本值 <p>Using text interpolation: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> 绑定 Attribute <div v- ......
Vue3 Vue

vue3+vite+ts:使用@符号,找不到模块

报错问题 情况说明:在.vue后缀的文件中 导入.vue组件 import Drawers from '@/components/Drawer/index.vue' 找不到模块“../../../../components/Drawer/index”或其相应的类型声明 解决办法 第一步 配置vite ......
符号 模块 vue3 vite vue

Vue3 点击复制功能,利用vue-clipboard3

首先安装插件 vue-clipboard3 npm install vue-clipboard3 --save 然后在页面里面引入 <button class="btn" @click="copy()">点击复制</button> 建议用buttn标签,因为别的标签可能会失效 <script set ......
vue-clipboard clipboard 功能 Vue3 Vue

vue3+ts ckplayer播放监控视频

1、第一步下载ckplayer,然后把ckplayer复制到项目中public文件夹下 2、index.html引用ckplayer.js <script type="text/javascript" src="/ckplayer/ckplayer.min.js" charset="UTF-8" d ......
ckplayer 视频 vue3 vue ts

Vue3学习笔记 —— 状态管理、Vuex、Pinia (未完结)

优秀文章分享:vue中使用vuex(超详细) - 掘金 (juejin.cn) 一、状态管理 1.1、什么是状态管理? 理论上来说,每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例: <!-- 视图 --> <template>{{ count }}</t ......
状态 笔记 Pinia Vue3 Vuex

刷新桌面缓存图标

在桌面随便创建一个txt. 复制以下代码进去 @echo off taskkill /f /im explorer.exe CD /d %userprofile%\AppData\Local DEL IconCache.db /a start explorer.exe echo 3. 改为.bat后 ......
缓存 图标 桌面

[深入vue3之refs] ref、unref、toRef、toRefs、isRef、customRef、shallowRef、triggerRef等使用与讲解

ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property,指向该内部值。 如果将对象分配为 ref 值,则它将被 reactive 函数处理为深层的响应式对象。 template 内使用 ref 对象,会自动解包。 <template> <d ......
shallowRef triggerRef customRef toRefs isRef

一统天下 flutter - widget 媒体类: Icon - 图标

一统天下 flutter https://github.com/webabcd/flutter_demo 作者 webabcd 一统天下 flutter - widget 媒体类: Icon - 图标 示例如下: lib\widget\media\icon.dart /* * Icon - 图标 * ......
一统天下 图标 flutter 媒体 widget

一统天下 flutter - widget 按钮类: IconButton - 图标按钮

一统天下 flutter https://github.com/webabcd/flutter_demo 作者 webabcd 一统天下 flutter - widget 按钮类: IconButton - 图标按钮 示例如下: lib\widget\button\icon_button.dart ......

一统天下 flutter - UI: 闪屏页,程序名称,程序图标

一统天下 flutter https://github.com/webabcd/flutter_demo 作者 webabcd 一统天下 flutter - UI: 闪屏页,程序名称,程序图标 示例如下: lib\ui\splash_screen.dart /* * 闪屏页,程序名称,程序图标 * ......
程序 一统天下 图标 名称 flutter

vue3 + el-date-picker(element-plus) 两种方式限制只能选一个月区间

1. <div style="float: right"> <el-date-picker v-model="state.rangeData[0]" type="date" value-format="YYYY-MM-DD" placeholder="开始" :disabled-date="pick ......

vue3

一、简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) github.com/vuejs/vue-n… 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% 2.源码的升级 使用Proxy代替defineProperty实 ......
vue3 vue

前端切图之svg图标的复用基于defs和use 亲测有用

切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合、更好看的图标,相比于字体图标更加多样性,而且svg图标加载更快,而当svg的图标被多次使用的时候,我们需要一种类似于变量的定义,然 ......
前端 图标 有用 defs svg

vue3+ts初学之创建一个vue3项目

(1)使用vue-cli创建: ## 安装或者升级 npm install -g @vue/cli ## 保证 vue cli 版本在 4.5.0 以上 vue --version ## 创建项目 vue create my-project 然后的步骤: Please pick a preset - ......
vue3 vue 项目 ts

vue3+ts初学之安装路由(router)

一、安装路由 1.安装vue-router vue3需要安装4.0以上版本 vue2最好安装4.0以下版本 安装命令: npm install vue-router@next --save // 安装最新版本router // 如需按版本安装,需将命令行中 next 改成相应的版本。如下: // n ......
路由 router vue3 vue ts

idea工具栏没了设置建包建类图标

https://blog.csdn.net/qq_37919082/article/details/123981137 https://blog.csdn.net/jiayou516/article/details/117745967 ......
工具栏 图标 工具 idea

Vue3 企业级优雅实战 - 组件库框架 - 9 实现组件库 cli - 上

上文搭建了组件库 cli 的基础架子,实现了创建组件时的用户交互,但遗留了 cli/src/command/create-component.ts 中的 createNewComponent 函数,该函数要实现的功能就是上文开篇提到的 —— 创建一个组件的完整步骤。本文咱们就依次实现那些步骤。(友情 ......
组件 实战 框架 企业 Vue3

vue2升级vue3:vue-i18n国际化异步按需加载

vue2异步加载之前说过,vue3还是之前的方法,只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage 但是本文还是详细说一遍: 为什么需要异步加载语言包 主要还是缩小提代码包,没有按需加载前,语言包内容太多 好几屏幕全部是,虽然从webpa ......
vue 国际 vue-i vue2 vue3

在Vue3+TypeScript 前端项目中使用事件总线Mitt

事件总线Mitt使用非常简单,本篇随笔介绍在Vue3+TypeScript 前端项目中使用的一些场景和思路。我们在Vue 的项目中,经常会通过emits 触发事件来通知组件或者页面进行相应的处理,不过我们使用事件总线Mitt来操作一些事件的处理,也是非常方便的。 ......
前端 总线 TypeScript 事件 项目

从0搭建Vue3组件库(四): 如何开发一个组件

本篇文章将介绍如何在组件库中开发一个组件,其中包括 如何本地实时调试组件 如何让组件库支持全局引入 如何在 setup 语法糖下给组件命名 如何开发一个组件 目录结构 在packages目录下新建components和utils两个包,其中components就是我们组件存放的位置,而utils包则 ......
组件 Vue3 Vue

从0搭建Vue3组件库(五): 如何使用Vite打包组件库

本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(*.d.ts) 打包配置 vite 专门提供了库模式的打包方式,配置其实非常简单,首先全局安装 vite 以及@vitejs/plugin-vue pnpm add vite @vitejs/ ......
组件 Vue3 Vite Vue

从0搭建Vue3组件库(六):前端流程化控制工具gulp的使用

前言 随着前端诸如webpack,rollup,vite的发展,gulp感觉似乎好像被取代了。其实并没有,只不过它从台前退居到了幕后。我们仍然可以在很多项目中看到它的身影,比如elementplus、vant等。现在gulp更多的是做流程化的控制。 比如我们要把一个大象放进冰箱里就需要 打开冰箱门- ......
前端 组件 流程 工具 Vue3

从0搭建Vue3组件库(二):Monorepo项目搭建

本篇文章是从0搭建Vue3组件库系列文章第二篇,本篇文章将带领大家使用pnpm搭建一个简单的Monorepo项目,并完成包的关联与测试 什么是 Monorepo 其实很简单,就是一个代码库里包含很多的项目,而这些项目虽然是相关联的,但是在逻辑上是独立的,可以由不同人或者团队来维护 为什么要用 pnp ......
组件 Monorepo 项目 Vue3 Vue