vue3随手记第47页

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -用户投票实现

锋哥原创的uniapp微信小程序投票系统实战：uniapp微信小程序投票系统实战课程(SpringBoot2+vue3.2+elementplus)(火爆连载更新中...)

java1234_小锋·2024-01-12 06:02

vue3 useAttrs的使用场景，提取共有props

1场景多个类似组件都需要传参data，用于请求接口或者处理数据，想让组件干净整洁，把参数data提出来2方法选项式可以使用mixin混入或者extends继承（略）组合式可以使用hook无脑式踩坑（如下代码）：//hookimport{defineProps}from'vue';importservicefrom'@/utils/index';exportdefaultfunctionuseDat

无心使然云中漫步·2024-01-12 06:14

Vue3+Echarts：柱状图的图例（legend)不显示

一、问题在使用Echarts绘制堆积柱状图的时候，想给柱状图添加图例，但是添加完后，图例不显示。二、问题及解决原因这里图例不显示，是因为legend里面图例的文字内容跟series里每一项的name的内容不一致，必须得两者一致才会显示:将两者的内容统一之后，之前添加的图例就显示了：三、其他1、修改图例的大小itemWidth:15,//设置图例的宽度为15像素itemHeight:10,//设置图

十八只兔·2024-01-12 05:06

Vue3:使用解构赋值来读取对象里的键-值对（值也是对象）

一、前言在Vue3中，想要读取一个对象的“键—值”对（值也是一个对象），数据格式如下：{1:{courseName:'课程1',study:'951526',visit:'3785553'}，2:{courseName

十八只兔·2024-01-12 05:05

vue3 ts面试题常问面试题（连更中.......有错欢迎提出)

Vue2和vue3区别Api？

阿金要当大魔王~~·2024-01-12 04:17

在Vue3项目中添加Vuepress作为内嵌文档

在Vue项目中添加Vuepress作为内嵌文档vuepress2vuepress作为一个静态网站库，可以有效的开发网站的文档部分。我们可以在已有的vue项目中添加vuepress作为文档页面。在你的vue项目的根目录中创建docs文件夹mkdirdocscddocs初始化项目gitinitnpminit-y安装Vuepresspnpminstall-Dvuepress@next在package.j

正宗咸豆花·2024-01-12 04:39

Vue3组件库 -- element plus 树形选择器组件怎样显示已有的树形菜单？

添加:props="{lable:'字段名',value:'字段id'}"完美解决

Z_B_L·2024-01-12 03:44

Vue3函数式弹窗实现

要在一些敏感操作进行前要求输入账号和密码，然后将输入的账号和密码加到接口请求的header里面。如果每个页面都去手动导入弹窗组件，在点击按钮后弹出弹窗。再拿到弹窗返回的账号密码后去请求接口也太累了，那么有没有更简单的实现方式呢？函数式弹窗的使用场景首先我们来看看什么是函数式弹窗？函数式弹窗是一种使用函数来创建弹窗的技术。它可以简化弹窗的使用，只需要在需要弹窗的地方调用函数就可以了。那么这里使用函数

xdpcxq1029·2024-01-12 03:21

妈妈，人生逆袭的凤凰

文/林江影月岁2.png五月，在这样一个温暖的季节里，随手记也为我们带来了相当暖心的一个活动——母亲节征文活动。在活动中要求我们观看一个关于前女强人，现全职妈妈的心路历程视频。

林江影月·2024-01-12 02:55

Vue3：vue-cli项目创建及vue.config.js配置

一、node.js检测或安装：node-vnode.js官方二、vue-cli安装：npminstall-g@vue/cli#ORyarnglobaladd@vue/cli/*如果安装的时候报错，可以尝试一下方法删除C:\Users**\AppData\Roaming下的npm和npm-cache文件夹删除项目下的node_modules重新运行安装命令*/vue-cli安装官方vue-cli检测

米柆·2024-01-12 02:59

Vue3：返回组件（运用keepAlive保留滚动位置）

$router.go(-1)（VUE3写法：proxy.

米柆·2024-01-12 02:29

Vue3：Axios配置及使用

Axios官方一、安装：//使用npm:$npminstallaxios//使用bower:$bowerinstallaxios//使用yarn:$yarnaddaxios在package-lock.json文件可以查看axios版本二、配置：milliaAxios.js配置axiosimportaxiosfrom'axios'//创建一个axios实例constmilliaAxios=axios

米柆·2024-01-12 02:57

Vue 3 最详细的Reactivity 数据响应式原理解析

Vue3如火如荼，与其干等，不如花一个下午茶的时间来看下最新的响应式数据是如何实现的吧。在本文中，会写到vue3的依赖收集和proxy数据代理，以及副作用(effect)是如何进行工作的。

前端劝退师·2024-01-12 01:56

前端学习笔记 5：大事件

1.准备工作1.1.创建工程创建一个名称为big-event的Vue3项目，具体可以参考这篇文章。

魔芋红茶·2024-01-11 23:57

前端学习笔记 6：Pinia

1.安装首先创建一个Vue3项目，具体方式可以参考这里。安装Pinia：npminstallpinia创建一个pinia实例(根store)并将其传递给应用：import'.

魔芋红茶·2024-01-11 23:26

vue3+ts+vite项目从0 搭建，配置安装router/pinia/element-plus/scss等

一、安装vite环境官网：https://cn.vitejs.dev/guide/why.htmlnpminitvite1.选择vue2.选择typescipt3.创建成功默认项目结构如下4.安装项目依赖npminstall5.启动项目npmrundev二。安装配置scss1.运行安装scssnpminstall-Dsasssass-loader@^10style-loadercss-loader

葫芦娃y·2024-01-11 23:09

vue3+ts+vite中封装axios,使用方法从0到1

一、安装axiosnpminstallaxios@types/axios--save二、配置代理vite.config.ts，如果没有需要新建该文件module.exports={server:{proxy:{'/api':{target:'http://localhost:5000',//设置代理目标changeOrigin:true,//是否改变请求源地址rewrite:(path)=>pat

葫芦娃y·2024-01-11 23:37

尚硅谷vite+vue3 （尚医通）项目实战笔记

如何配置项目运行后自动打开？在package.json启动命令中添加“dev”:“vite--open”,如何配置src的别名？利用node内置模块path设置一下在vite.config.ts中的别名import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path'//https://vitejs

MissXu666·2024-01-11 23:36

Vue3+Pinia实现持久化动态主题切换

PC端主题切换大家都用过，下面用Vue3+Pinia实现一下这个过程;【源码地址】1、准备工作npminstallpinianpminstallpinia-plugin-persist2、基础配置//main.jsimport

领秀5858·2024-01-11 22:17

Vue3+Vite打包跨平台(七牛、阿里OSS)上传部署前端项目

1、业务场景阅读之前，想了解一下各位观众老爷们，你们公司的项目是怎么部署的：1.本地打包手动上传服务器；2.本地打包自动上传服务器；3.代码仓库流水线自动构建；4.其他…；我们用的第3种部署方式，仓库代码合并到release之后自动打包部署，不过这个过程很耗费时间，且流水线是要收钱的。有一天，流水线到期了，部门主管打算节约成本，于是就开始让我们自己写一个脚本，用来部署公司项目；前端静态资源(项目图

领秀5858·2024-01-11 22:17

【Vue3 + Element Plus】CustomTable 带按钮和查询功能的分页列表组件

1.组件完整代码

Komorebi゛·2024-01-11 22:08

两周掌握Vue3（二）：Vue基本代码构成、Vue3指令详解

文章目录一、Vue项目代码逻辑1.main.js解析2.App.vue解析二、Vue3指令0.指令概述1.v-bind示例2.v-model示例3.v-if示例4.v-for示例5.v-show示例6.

TracyCoder123·2024-01-11 20:02

两周掌握Vue3（一）：安装、打包、目录结构

文章目录一、安装1.安装node.js和npm（windows）2.安装vue，创建vue项目报错：XXX不是内部或外部命令二、打包三、目录结构nodejs版本：v20.10.0npm版本：v10.2.3一、安装1.安装node.js和npm（windows）访问Node.js官方网站（https://nodejs.org）。在Node.js官方网站的首页，你会看到一个"下载"按钮。点击这个按钮，

TracyCoder123·2024-01-11 20:31

两周掌握Vue3（三）：全局组件、局部组件、Props

main.js中注册全局组件3.使用全局组件二、局部组件1.创建局部组件2.在另一个组件中注册、使用局部组件三、Props1.定义一个子组件2.定义一个父组件3.效果代码仓库：跳转本博客对应分支：03一、全局组件Vue3

TracyCoder123·2024-01-11 20:59

Vue3 中使用 Vuex 和 Pinia 对比之 Vuex的用法

本文基于Vue3的compositionAPI来展开Vuex和Pinia的用法比较Pinia传送门Vuex传送门Vuex状态管理的核心概念状态-驱动应用的数据源；视图-以声明方式将状态映射到视图；操作-

爱问的艾文·2024-01-11 20:48

vue3 uniapp + vant ui 实现上传图片后再次点击上传功能

效果代码起初想用vantui的chooseFile函数来实现重新上传的文件选择，用了之后没起用。。。改为用uni.chooseImage来实现。jsconstuploadImg=ref(null)consthandleReUpdate=()=>{uploadMenu.value=false//uploadImg.value.chooseFile()console.log(uploadList.va

查查茶茶丸·2024-01-11 19:48

vue3+uniapp 上传附件

uni-file-picker搭配uni.uploadFile在使用问题上踩了不少坑，我至今还是没办法在不改uniapp源码基础上实现限制重复文件的上传。因为始终怎么限制，uni-file-picker绑定的v-model的值fileList,好像只要上传了文件展示就一定会回显那一个附件。还有一个问题，就是上传的进度条并不能正常工作。直接css隐藏算了眼不见心不烦多次试图驯服该组件，发现如果要把上

tingkeiii·2024-01-11 19:47

vue3+echarts可视化——记录我的2023编程之旅

文章目录⭐前言⭐2023我在csdn的旅途痕迹node系列文章vue3系列文章python系列文章react系列文章js拖拽相关文章小程序系列文章uniapp系列文章在csdn的收获⭐可视化布局git数据的提取

yma16·2024-01-11 19:14

vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化

文章目录⭐前言vue3系列文章⭐html数据解析html字符串转为html对象深度遍历html对象内容⭐echarts树图的渲染处理html内容为树状结构渲染树状图inscode代码块⭐总结⭐结束⭐前言大家好

yma16·2024-01-11 19:12

5分钟搞定vue3函数式弹窗

前言最近接到一个需求，需要在一些敏感操作进行前要求输入账号和密码，然后将输入的账号和密码加到接口请求的header里面。如果每个页面都去手动导入弹窗组件，在点击按钮后弹出弹窗。再拿到弹窗返回的账号密码后去请求接口也太累了，那么有没有更简单的实现方式呢？函数式弹窗的使用场景首先我们来看看什么是函数式弹窗？函数式弹窗是一种使用函数来创建弹窗的技术。它可以简化弹窗的使用，只需要在需要弹窗的地方调用函数就

工业甲酰苯胺·2024-01-11 19:28

Vue3 为什么要用 Proxy 代替 Object.defineProperty 实现响应式

Object.defineProperty劫持数据只是对对象的属性进行劫持无法监听新增属性和删除属性需要使用vue.set,vue.delete深层对象的劫持需要一次性递归varobj={a:1,o:{b:2,o1:{}}}劫持数组时需要重写覆盖部分Array.prototype原生方法Proxy劫持数据真正的对对象本身进行劫持可以监听到对象新增删除属性只在getter时才对对象的下一层进行劫持(

coolheadedY·2024-01-11 18:51

面试题：vue2中option API的和vue3中composition API中的数据和方法能否交互？

结论：vue2中optionAPI中的数据和方法可以从vue3中的compositionAPI中进行调用，而vue3中的compositionAPI是不可以从vue2中的数据进行调用。

荀鼠不是鼠·2024-01-11 18:10

vite：极速、轻量构建工具（结合vue3 ）

1.创建一个vite项目npminitvite-appcdnpminstallnpmrundev或者yarncreatevite-appcdyarnyarndev2.vite简介vite是一个基于Vue3

好了来看下一题·2024-01-11 17:57

如何使用startCMS进行应用开发，前端开发，后端开发

简介StartCMS是一个基于ThinkPHP6.0+、ElementUI、MicroApp的极速微应用开发框架前端不限技术栈，支持Vue2、Vue3、Vite、React、Rangular...后端不限制语言

彼岸496·2024-01-11 17:57

基于Vue3+TypeScript+Vite实现的文件在线预览 file-viewer3使用指南

基于Vue3实现的文件在线预览file-viewer效果预览：Vue3纯前端文档预览演示本项目作为当前仓库的vue3构建版本，会跟随vue2版本持续更新，敬请期待，欢迎提交issue和交流技术。

小爬的老粉丝·2024-01-11 17:57

Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架【值得收藏】

从我最初接触vue3版本到现在已经有一年的时间。由于vue3.2版本的发布，的实验性标志已经去掉，已经陆陆续续有不少公司开始使用vue3.2开发项目了。

前端开发爱好者——·2024-01-11 17:25

开源Vue3组件库

ElementPlus官网：一个Vue3UI框架|ElementPlus简介：基于Vue3和TypeScript，提供了70多个易于使用的组件AntDesignVue官网：AntDesignVue—Anenterprise-classUIcomponentsbasedonAntDesignandVue.js

ken_coding·2024-01-11 17:25

为什么Vue3中声明响应式一般用const

为什么Vue3中声明响应式对象一般用const。

晨灰ash2·2024-01-11 17:13

Vue3.0中reactive与ref声明响应式对象使用计算属性值

TypeError:ConvertingcircularstructuretoJSON-->startingatobjectwithconstructor'ComputedRefImpl'|property'effect'->objectwithconstructor'ReactiveEffect'---property'computed'closesthecircleatJSON.stringi

晨灰ash2·2024-01-11 17:13

vue3移动端实现pdf预览

第一种方式：使用vue-pdf-embed和vue3-pdfjs使用的插件有：npmivue-pdf-embednpmivue3-pdfjshtml部分：js部分：//引入两个插件相关的importVuePdfEmbedfrom'vue-pdf-embed

虚诚·2024-01-11 17:56

element-plus 、element-ui —— Cascader 勾选内容后自动关闭内容选择面板

$refs.CascaderRef.dropDownVisible=falseelement-plus的关闭面板方式vue3.0写法CascaderRef.value.togglePopperVisible

爱吃果蔬的猫·2024-01-11 14:29

Vite+vue3+Ts+pinia开发（四：SCSS、Axios以及别名@的使用）

首先你完成了如下：Vite+vue3+Ts+pinia实战（一：初始、基础安装、踩坑）Vite+vue3+Ts+pinia开发（二：路由、pinia、UI库安装）Vite+vue3+Ts+pinia开发

邪七·2024-01-11 13:34

Vue3 实现列表虚拟滚动

前言近期在做一个网页播放器项目中，用到很多需要展示歌单的列表一个歌单动辄千百首歌曲，页面中的元素太多导致热重载的时候chrome直接崩了于是无限滚动列表提上日程写的有点乱，也是第一次用typescript写项目，先记录一下完成效果gif_001.gif思路和需要解决的问题与懒加载不同，虚拟滚动需要一次性获取所有数据，但是只显示屏幕可见范围内的数据要做到这些我需要知道：一行的高度屏幕范围内能显示的行

你会瘦·2024-01-11 13:35

HbuilderX使用Uniapp+Vue3安装uview-plus

如果你是vue2版本想使用uniapp去配置uviewui库可以参考之前的文章uView系列——使用教程小程序的第三方ui库推荐较多的还是uview的，看起来比较美观，功能也比较完善，下面将提一下Vue3

Southern Wind·2024-01-11 12:25

如何在 Monorepo 中制作支持多个框架的组件？

AgnosticUI适用于React、Vue3、Angular和Svelte。这正是我们今天在本文中要做的事情：构建一个可跨所有这些框架工作的按钮组件。为什么是Mono

前端玖耀里·2024-01-11 12:47

vue3常用插件的使用方法：按需引入自定义组件，自动导入依赖包，自动生成路由，自动生成模拟数据

文章目录一、按需引入自定义组件：unplugin-vue-components1.安装[unplugin-vue-components]2.在vite中使用二、自动导入依赖包：unplugin-auto-import1.安装2.vite.config.js配置3.使用效果三、自动生成路由：vite-plugin-pages1、安装2、配置-vite.config.js中配置3、配置-router/

邹荣乐·2024-01-11 11:50

vue3知识点5.2项目路由router教程 vue项目引入路由搭建路由嵌套路由路由传参导航守卫命名视图重定向别名

vue3知识点5.2项目路由router教程（汇总路由全部用法）前言：上一章我们学会了如何用vue3cli搭建项目。

luanmabug·2024-01-11 10:55

vue3权限管理——（路由权限）动态路由设置

1.大概思路设置基础路由login和home等页面；登录后从后端获取user,token,rights等数据，并将数据同时存储到vuex和sessionStorage中将后端获取的权限数据（作为不同用户显示不同菜单及不同路由的依据）和路由页面进行映射；写公共方法添加动态路由；在路由全局守卫中判断是否已添加过动态路由，如果已添加直接next()未添加调用添加动态路由方法，并且放行（next({...

Jyann~·2024-01-11 10:17

使用 Vue 3 实现基于身份的权限验证

在Vue3中，可以通过使用路由守卫和状态管理来实现基于身份的权限验证。

星空,二脚·2024-01-11 10:46

vue3用户权限管理（路由控制等）1

在前端开发的过程中，我们需要做前端的权限管理，我们需要根据后端提供的信息来控制权限，这时候就需要根据用户的操作来进行权限控制了。逻辑稍微有一点绕，多理解就好了。用户路由权限管理大致的实现原理：一般将路由分为2种，一种是静态路由，就是所有的账号都可以访问的路由，比如登录，比如主页等，还有一种是动态路由，就是我们需要做权限判断的路由。实现逻辑是，当我们登录完成后，获取到token，用token去接口请

香蕉麻花皮·2024-01-11 10:44

推荐频道

vue3随手记