vue3后台管理第6页

【Vue3 工程自动化】自动导入多个组件

工程自动化参考视频概述在前端工程中，如果一个文件夹中的模块需要频繁引用，则可以使用如下自动化方式，实现一次性引入。一、Vue2.X版本：require.context()require.context(dirname,useSubdirectories,RegExp)是一个webpack的api，通过该函数可以获取一个上下文，从而实现工程的自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）

MagnumHou·2024-08-28 03:17

vue3 - element-plus 实现图片上传到服务器及预览、删除功能，支持显示进度条、上传失败错误占位的超好用的图像上传组件（详细运行示例及完整组件源码，一键复制开箱即用）

效果图本博客实现了vue3项目中，借助elementplus上传组件，实现二次封装上传组件，支持放大预览、删除、上传进度条、图片回显、上传服务器完整示例源码及详细步骤流程。

街尾杂货店&·2024-08-27 23:24

二、Vue3与element-ui插件集成

1、安装element-uinpminstallelement-plus--save官方网址：https://element-plus.gitee.io/zh-CN2、添加按钮小图标npmi@element-plus/icons-vue如果引入的时候，出现错误，tsconfig.json文件中，修改："moduleResolution"设置为"node"3、引入国际化会importElementP

程序员小蛋·2024-08-27 23:24

vue3+elementPlus：无法清空问题，清空表单没效果

查询清空清空表单constformRef=ref()formRef.value.resetFields();发现没起作用最后才意识到el-form-item标签上面必须有prop改成下面的就可以啦查询清空

肖肖肖丽珠·2024-08-27 23:22

Vue3背景设置

图片存放在assets下样品展示html{width:100px;height:100px;}body{width:100px;height:100px;}#background{ //图片路径background-image:url("../assets/image/3379.jpg");width:100%;height:100%;position:fixed;background-size

遇意·2024-08-27 22:17

04 vue3之to系列全家桶

toReftoRefstoRawtoRef如果原始对象是非响应式的就不会更新视图数据是会变的如果原始对象是响应式的是会更新视图并且改变数据的针对响应式的有效修改某个对象的key值非响应式视图不会改变，源码没做依赖收集和更应依赖，做了会导致BUG会触发两次{{j}}toRefimport{ref,reactive,toRef,toRefs,toRaw}from"vue";letj=reactive(

流氓也是种气质 _Cookie·2024-08-27 22:43

03 vue3之Reactive全家桶

reactive用来绑定复杂的数据类型例如对象数组AarryObjectsetmapreactive源码约束了我们的类型他是不可以绑定普通的数据类型这样是不允许会给我们报错import{reactive}from'vue'letperson=reactive('sad')绑定普通的数据类型我们可以使用ref你如果用ref去绑定对象或者数组等复杂的数据类型我们看源码里面其实也是去调用reactive

流氓也是种气质 _Cookie·2024-08-27 22:13

vue2/3 - 实现高德地图根据位置经纬度获取天气信息，vue使用高德地图根据当前定位读取天气（温度、风向、风速等），可在地图上进行标记高亮展示天气信息，显示地图和查询天气（详细示例代码，复制即用）

效果图在vue2、vue3项目开发中，利用高德地图根据地理位置获取查询天气信息，详细vue高德地图根据经纬度或城市名获取天气数据，并在地图上标记气泡弹框式展示出来。

街尾杂货店&·2024-08-27 12:44

SpringBoot+Vue疫苗接种管理系统新冠疫苗接种系统预约疫苗接种管理系统Java

SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登录.png前端页面功能：首页、接种点、疫苗信息、疫苗咨询、个人中心、后台管理首页

计算机程序老哥·2024-08-27 12:46

vue3项目中引入高德地图

第一步登陆高德开放平台，申请密钥第二步安装高德地图加载器npmi@amap/amap-jsapi-loader--save第三步在index.html中引入window._AMapSecurityConfig={securityJsCode:'你的安全密钥',//所申请的安全密钥注意这是安全密钥而不是key}第四步点标记获取详细地址和天气信息城市/区：{{state.weather?.provin

阿怪睡不着·2024-08-27 12:42

Vue3 递归组件

在此之前，你必须掌握：html+css+js+Vue3基础用法，至少需要知道Vue组件是什么。用法讲解在讲解递归组件之前，我们需要先了解几个概念。什么是递归？

德育处主任Pro·2024-08-27 10:26

【长文细说】20个ElementPlus核心组件以及使用技巧

ElementPlus是一个基于Vue3和Vite的组件库，它提供了一套丰富的UI组件，用于构建高质量的网页应用程序。

威哥爱编程（马剑威）·2024-08-27 09:24

Vue3实现word预览

1.安装依赖pnpminstall@vue-office/docx2.页面导入//导入依赖importVueOfficeDocxfrom"@vue-office/docx";//导入样式文件import"@vue-office/docx/lib/index.css";3.使用（这里使用是文件上传方式）可以直接是在线地址importVueOfficeDocxfrom"@vue-office/docx

淑子啦·2024-08-27 02:43

vue3使用富文本

1、下载pnpminstall@wangeditor/editor@wangeditor/editor-for-vue2、引入和使用import'@wangeditor/editor/dist/css/style.css';import{Editor,Toolbar}from'@wangeditor/editor-for-vue';import{onBeforeUnmount,ref,shallo

淑子啦·2024-08-27 02:43

如何在Vue3中使用Vue.prototype

前端菜鸟最近在开发新的项目，准备用Vue3，遇到了一些问题在2.X版本中创建一个vue实例是通过newVue()来实现的，到了3.X中则是通过使用createApp这个API返回一个应用实例，并且可以通过链条的方式继续调用其他的方法话不多说

淑子啦·2024-08-27 02:42

序

自己就想做一个门店里的后台管理系统，当然这种东西网上是多之有多，但是通过自己这几天的工作来看，要一行行的写下来还是不太容易的，个中体会，只有自己才知道吧。

ZMRWEGo·2024-08-26 21:04

封装fetch请求

fetch请求对IE不友好，而Vue3也IE不友好，那么之后在创建Vue3项目的时候是不是可以尝试用Vue3+fetch去代替axios呢？当然也不知道行不行，所以先记录下我对fetch的封装。

略略大魔王丶·2024-08-26 20:35

create-react-app集成antd-mobile，customize-cra扩展配置addLessLoader，lessOptions,fixBabelImports，实现主题定制和按需加载

听之前同事说uni-app坑多（高手勿喷，本人小白，没学过uni，不了解，仅仅听别人说，勿骂），另外最近taro比较活跃，并且可以使用react语法开发（也支持了最新的vue3）,果断放弃uni-app

凉菜凉凉·2024-08-26 18:05

Vue2 - 详细实现解析富文本内容生成侧边栏Toc目录索引，识别富文本内容根据标题h1~h6自动生成文章目录，点击目录导航时跳转到文章内容对应的锚点位置带过渡动画，鼠标滚动内容滑过锚点时高亮对应标题

前言如果您需要Vue3版本，请访问这篇文章。

王佳斌·2024-08-26 17:03

创建前端项目中架构基本流程(vue版)

.md》整理编辑，不涉及具体项目实现，只整理项目前期准备的流程，具体项目实现可bilibili搜索黑马程序员获取此文档梳理搭建vue项目的基本流程及相应模板的创建本项目的技术栈本项目技术栈基于ES6、vue3

小徐努力中·2024-08-26 15:50

Vue3组件（18）组件间传值/共享的方法的汇总

方法集合父组件.png目前只能想到这些了，对了，还有事件总线这类的就不考虑了。props+emit最基础的方式，适用于父组件和子组件之间的直接传值，多用于基础控件，比如input、el-input、el-select这类。比较基础不多介绍了。Vuex老牌的状态管理方式，各种组件之间各种传值，好吧专业术语叫做状态管理。使用方法呢，其实就是一层窗户纸，捅破了大家就都知道了，这里不介绍了，可以看我的文集

自然框架·2024-08-26 12:56

单HTML文件集成vue3+ElementPlus的使用

1、新建一个HTML文件2、HTML文件引用vue3.js3、引用elementplus.js和elementplus.css4、Vue初始化ElementPlus5、页面中可以使用ElementPlus

bjzhang75·2024-08-26 08:07

vue ref和reactive区别

Vue3中的ref和reactive都是用于创建响应式数据的API，但它们在数据类型、使用方式、访问方式、设计理念以及应用场景等方面存在明显的区别。

灰海·2024-08-26 08:32

vue3生命周期源码浅析

概述生命周期在Vue3中是一个很重要的概念，它允许我们在特定的时间点执行一些代码，比如在组件创建、更新和销毁时执行一些操作。

Jinuss·2024-08-25 22:35

vue3 vue-router嵌套两级路由时，每一级路由都使用transition+keep-alive时，二级路由之间切换离场动效正常，一级路由之间切换会导致离场的页面组件离场动效重复1遍

vue3中使用vue-router嵌套两级路由时，每一级路由都使用transition+keep-alive时，二级路由之间切换离场动效正常，一级路由之间切换会导致离场的页面组件离场动效重复1遍，即播放了两遍离场动效场景复现问题场景和这篇文章中的是类似的

温温温B·2024-08-25 21:56

vue3表单中v-model指令的使用

当我改变input框的内容，外面内容也会随之改变用了v-model绑定数据，input就不用写value属性constapp=Vue.createApp({data(){return{msg:'hellovue3

木子木木lmd·2024-08-25 16:34

【Vue3 从入门到实战进阶式掌握完整知识体系】014-探索组件的理念：父子组件如何通过事件进行通信

5、父子组件如何通过事件进行通信子组件调用的方法让父组件处理子组件调用父组件的方法来改变父组件的数据。子组件无法改变父组件传过来的数据，可以通过此方法请求父组件来进行改变！hellovueconstapp=Vue.createApp({data(){return{count:1}},methods:{//在这里写一个handleAddOne()方法handleAddOne(){this.count

訾博ZiBo·2024-08-25 16:46

Vue3问题记录

Vue3问题记录使用elementPlus消息提示第一种方法先在组件中引入ElMessageimport{ElMessage}from"element-plus";然后使用ElMessage.success

栀椩·2024-08-25 14:14

【vue3|第25期】Vue3中的useRoute：轻松访问路由信息

我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^-^1.01365=37.7834；0.99365=0.02551.02365=1377.4083；0.98365=0.0006说在最前面：本文vue3

Commas.KM·2024-08-25 14:13

FastAPI+Vue3零基础开发ERP系统项目实战课 20240824上课笔记循环和函数以及大量的练习

巩固一下假设我们现在想要根据输入月份，判断是哪个季节，怎么做呀？输入1：一月，12月，1月，2月是冬季输入8：八月，夏季作为思考题，有时间就做一下，下节课开始我们先讲这个。#假设我们现在想要根据输入月份，判断是哪个季节，怎么做呀？month=int(input("请输入月份："))ifmonthin[12,1,2]:print("冬天")elifmonthin[3,4,5]:print("春天")

Python私教·2024-08-25 13:07

Java开发的企业级Spring Cloud ERP管理系统源码

为此，我们开发了一套基于Java技术的鸿鹄ERP管理系统，该系统整合了SpringCloudAlibaba、SpringBoot、MybatisPlus、Redis等前沿技术，并采用了VUE3和ElementUI

m0_67544708·2024-08-25 10:52

Vue-devtools 大揭秘：Vue3.X 和 Vue2.X 调试工具安装及使用指南

目录Vue-devtools介绍Vue2.X调试工具Vue-devtools的安装Vue2.X调试工具Vue-devtools的使用Vue3.X调试工具Vue-devtools的安装Vue3.X调试工具

前端基地·2024-08-25 10:21

基于vue3和audio封装的简易音频播放器

样式如图所示{{fileName}}{{transTime(audioCurrent)}}{{transTime(audioDuration)}}import{ref,onBeforeMount,onUnmounted,onMounted,watch,nextTick}from'vue';constprops=defineProps({//音频地址url:{type:String,required

九号窗口·2024-08-25 09:43

登录逻辑前后端全流程(vue3 pinia nodejs)

简述输入用户名密码，post请求发给后端；如果登陆成功，后端用JWT创建并返回token，前端保存token（pinia&localstorage）。跳转任意页面之前，如果没有token（没登陆的情况）ORtoken过期的情况，都要跳转至login页面详细讲解（前端）点击登录后，后端返回token，前端存在pinia（仓库）中，同时localstorage保存（浏览器记录）。注意token是域名下

aPurpleBerry·2024-08-25 08:34

vue3+vue-router4 路由守卫

router/index.ts:import{createRouter,createWebHistory}from'vue-router'constrouter=createRouter({history:createWebHistory(import.meta.env.BASE_URL),routes:[{path:'/',redirect:'/home',},{path:'/home',com

徐同保·2024-08-25 02:30

vue3框架腾讯地图v1版项目-MultiMarker点标记自定义样式和图片的写法

vue3框架腾讯地图v1版项目-MultiMarker点标记自定义样式和图片的写法一.项目\环境\需求介绍该项目原为vue3+高德地图项目,由于公司原因,打算换成腾讯地图,在原有项目基础功能上进行调整更改

麻瓜呀·2024-08-25 01:23

UniApp Vue3版如何实现微信小程序样式穿透

很多伙伴在写vue3的时候，都使用了组合式api。而在修改微信小程序的样式的时候，遇到不生效问题，H5却很听话。其实uniapp有个参数配置，需要开启小程序的样式穿透才行。

antlers777_·2024-08-24 21:59

vue3-巧用指令

不知道大家在工作中用上vue3了没有，vue3好是好，但是有部分插件并没有更新到3.0的，比如我比较喜欢的自定义滚动条overlayscrollbars，vue3直接使用overlayscrollbars-vue

qfxietian·2024-08-24 20:58

vue3+ElementPlus之CSS深度访问选择器

vue3+ElementPlus之CSS深度访问-deep前言一、demo环境二、问题1-重置elementpluscss无效三、问题2-引入icon无效1、element-plusIcon需要另外安装

Bennett_G·2024-08-24 20:57

Element Plus的deep穿透

ElementPlus的deep穿透主要用于解决在Vue3项目中使用ElementPlus组件库时，样式设置不生效的问题。

HWL5679·2024-08-24 20:27

vue3 使用element-plus动态渲染Icon图标

今天使用vue3+vite重构项目的时候，构建侧边栏的时候需要动态渲染图标之前的写法是这样就可以写一个数组，动态的绑定class但是在vue3中不能这样使用官方给出的实例是这样的但是这样动态渲染就不行了

山野见·2024-08-24 20:56

vue3使用elementui-plus时使用深度选择器穿透影响原样式

一、原样式：下拉框选择时，右边存在一个下拉的箭头符号，那么在许多场景下我们不需要显示，这个时候就可以通过开发者工具进行定位，选中该元素，可以看到，影响的样式是：.el-iconsvg二、深度穿透修改原样式我们修改原样式，增加display:none即可不显示该符号，此时有两种方案，一种是取消style里面的scoped属性，这样会影响全局样式，导致所有的下拉框都没有这个符号了，这并不是我想要的，所

lytcreate.·2024-08-24 20:26

Vue3的hooks实战演练

1.没使用钩子前：各种数据和方法都交织一起，组件易维护，代码复用性差，可读性差工资总计：{{sum}}工资求和狗的照片：获取狗的照片import{ref,reactive}from'vue';importaxiosfrom'axios'letsum=ref(12000)letdogList=reactive(['https://images.dog.ceo/breeds/pembroke/n021

J不A秃V头A·2024-08-24 15:27

vue3项目使用signalr（长链接/服务端推送到客户端）

需求项目中需要服务端主动向客户端发送通知消息后端是.net6的webapi项目，前端是vue3全家桶项目，前后端分离这里使用signalR来实现，官网：ASP.NETCoreSignalR概述|MicrosoftLearn

woflyoycm·2024-08-24 13:10

探秘Vue 3：watchEffect与watch选项的差异

2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录摘要：引言：正文：一、Vue2中的watch选项二、Vue3

阿珊和她的猫·2024-08-24 12:09

vue前端更新后需要清空缓存

场景：前端vue3网站项目使用wepack打包后进行部署，但是用户浏览器访问网站时加载了缓存，导致没有及时更新。

woflyoycm·2024-08-24 12:06

微信小程序uniapp+vue3+ts+pinia的环境搭建

一.创建uniapp项目通过vue-cli创建npxdegitdcloudio/uni-preset-vue#vite-tsmy-vue3-project二.安装依赖：1.pnpmi2.运行项目：将package.json

Outcir·2024-08-24 12:36

vue2 - 详细实现用户收货地址识别解析“姓名/手机号/省市区/街道/乡镇村庄“关键字，用户复制粘贴一段含有姓名电话/详细地址的文字文本信息，vue3自动识别拆分并填入到对应表单字段中，详细示例代码

效果图在vue2、nuxt2项目开发中，实现手机H5移动端网页/电脑PC端网站，“快递地址解析拆分姓名/电话/省市区地址/详细街道乡镇村庄”，提取文本内容中的手机号名称详细位置信息填充到指定表单或data数据中进行处理，解析拆分电商购物平台中，发货物流地址一段文字中含有的关键信息，常见淘宝、京东、拼多多等电商平台只要涉及到收货地址/姓名手机号的文本识别都适用，识别免费可靠，提供详细示例源码。提供详

街尾杂货店&·2024-08-24 11:05

uniapp+vue3的双向渐变

在App.vue中/*每个页面公共css*/@import'common/style/common-style.scss'在common-style.scss中//全局双向渐变.pageColor{background:linear-gradient(tobottom,rgba(0,0,0,0),#fff400rpx),//到400rpx才做白色渐变linear-gradient(toright,

总萌大人·2024-08-24 11:59

推荐频道

vue3后台管理