![](https://img-blog.csdnimg.cn/a947dc64c9c9491ea378ee70f84d86b0.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue3
文章平均质量分 88
关于Vue3的一些知识点
鹏多多.
接受失败,但绝不选择放弃!
展开
-
使用TS进行Vue-Router的Meta类型扩展
使用Vue-Router时,会将一些字段信息附加到路由的Meta对象里面,比如图标icon,标题,权限等原创 2023-11-08 16:10:52 · 583 阅读 · 0 评论 -
使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理
最近在做一个文件夹管理的功能,要实现一个树状拖拽文件夹面板。里面包含两种元素,文件夹以及文件。原创 2023-09-25 17:48:18 · 1387 阅读 · 2 评论 -
element-ui的Tree树组件使用技巧
目录1,前言2,需求3,解决思路4,完整代码5,总结1,前言最近这段时间在做一个新的模块,其中有一个三层的树结构,产品经理提出了一个很古怪的需求,整的我只能自己控制树的交互,写完之后,感觉对这个组件的用法有了不一样的了解,故而写下来。2,需求如果上级节点勾选了,则底下所有节点也勾选如果是一个个勾选子级节点,直至勾选满所有子级,则该父级节点不能勾选,只能算选中状态已勾选的节点不能展开,如果是展开了再勾选的,要自动收缩回去遇见问题:问题1:后端数据不友好,无唯一key值(有重复key),原创 2021-09-24 18:09:37 · 2150 阅读 · 0 评论 -
vue项目JS播放音频音效和背景音乐
博主最近在做一个线上直播互动课堂的Vue项目,里面有一些这样的互动:老师奖励学生A一个奖章,要自动播放得奖的音效。得到这个需求,博主立马开码。myPlay(){ let mp3 = new Audio(); mp3.src = "./奖励的声音.mp3"; mp3.load(); mp3.play(); setTimeout(() => { mp3.pause(); }, 3000);}结果一直报错度娘告诉我,浏览器18年改版原创 2020-09-08 20:56:31 · 5824 阅读 · 6 评论 -
vue项目使用Echarts制作项目工期甘特图
目录1,前言1,前言项目迭代过程中,碰上一个需求,要求用甘特图的方式显示项目的工期进度,开完会我赶紧搜索一下甘特图是啥东东,大概了解之后,做出了如下样式;注:Echarts版本4.5.0<template> <div id="index"> <div id="chart" /> </div></template>...原创 2021-06-28 09:29:39 · 3234 阅读 · 0 评论 -
超详细,Vue-Router手把手教程
1,router-view<router-view>是一个功能性组件,用于渲染路径匹配到的视图组件。可以配合<transition>和<keep-alive>使用。如果两个一起用,要确保在内层使用<keep-alive>。<router-view></router-view><!--或--><router-view name="footer"></router-view>如果<rou原创 2021-08-09 11:10:41 · 1017 阅读 · 0 评论 -
超详细,Vuex手把手教程
目录1,前言2,Vuex 是什么3,5大属性说明4,详细介绍4.1,state4.2,getters4.3,Mutation4.4,Action1,前言最近在重温vue全家桶,再看一遍感觉记忆更深刻,所以专门记录一下。2,Vuex 是什么Vuex是专为Vue.js开发的状态管理模式。它采用集中式存储,管理所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化(我的理解就是全局变量)。3,5大属性说明state对象类型,类似于实例的 data属性,存放数据getters对象类原创 2021-07-26 10:02:12 · 963 阅读 · 0 评论 -
两种方式配置vue全局方法
目录1,前言2,第一种方式3,第二种方法1,前言在Vue项目开发中,肯定会有这样一个场景:在不同的组件页面用到同样的方法,比如格式化时间,文件下载,对象深拷贝,返回数据类型,复制文本等等。这时候我们就需要把常用函数抽离出来,提供给全局使用。那如何才能定义一个工具函数类,让我们在全局环境中都可以使用呢?请看下文分解。PS:本文vue为2.6.122,第一种方式直接添加到Vue实例原型上首先打开main.js,通过import引入定义的通用方法utils.js文件,然后使用Vue.prototy原创 2021-09-13 10:48:03 · 6177 阅读 · 7 评论 -
vue中element的DatePicker组件日期限制
目录1,前言2,代码背景3,上代码1,前言项目迭代过程中,碰上一个需求,table表格,其中一列计划开始时间一列计划结束时间,使用的是不同的日期选择器,开始时间会限制结束时间只能选相同日期以及之后的日期,反之结束时间也如此。项目用的是elementUi的Table组件,记录一下在Table中怎么写日期选择器DatePicker的picker-options。2,代码背景vue.js版本2.xelement版本2.15.2博主这边的数据格式是开始时间是一个字段,结束时间也是一个字段。post原创 2021-07-05 10:08:07 · 477 阅读 · 0 评论 -
使用webpack-bundle-analyzer查看vue项目打包依赖图
项目写完了准备上线,发现打包后的包很大怎么办?,但是打包后的文件晦涩难懂,如何了解打包文件的细节,到底是哪里占了体积,了解某一个文件是由哪些内容打包而成,从而针对性的优化项目体积。原创 2022-04-18 17:34:26 · 2074 阅读 · 0 评论 -
vue使用viewer.js结合jsZip和FileSaver.js实现图片预览和打包下载
需求是图片预览,并且可以放大缩小旋转和左右切换,然后可以一键打包下载所有图片。结合需求,我选择了viewer.js,jsZip和FileSaver.js,放一个实现的交互效果gif图;几个插件的网址和安装命令和代码;viewer.js文档安装npm install viewerjs在vue组件中import 'viewerjs/dist/viewer.css'import Viewer from 'v-viewer'import Vue from 'vue'Vue.use(Viewer原创 2020-09-15 15:12:11 · 1168 阅读 · 0 评论 -
Vue2中百度地图API的使用
目录1,前言2,申请账号,获取key3,安装依赖4,全局引入用法5,局部引入用法6,常用参数说明&文档1,前言记录一下Vue2项目中,百度地图API的简单使用。2,申请账号,获取key需要先申请百度账号,然后登陆百度地图开放平台:https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey,按照流程,申请成为开发者,然后创建应用。应用类型选择浏览器端,Referer白名单填*3,安装依赖npm i --sa原创 2021-05-14 11:31:19 · 1084 阅读 · 0 评论 -
超详细 vue组件通信的10种方式
vue:超级详细,项目常用的十种组件通信方式原创 2021-02-08 14:17:48 · 5852 阅读 · 0 评论 -
Element组件Upload修改上传文件名
目录1,前言2,问题定位3,实现3.1,before-upload回调3.2,自定义上传1,前言事情的起因是我的leader告诉我系统的合同上传出现问题了,文件上传失败,接口也没调用。我看了一下时间,17:15了,还有45分钟就要关机回家了,吓得我赶紧定位问题。2,问题定位公司的上传是用的emelent-ui的Upload二次封装,找到了组件源码(不是俺封装的),看了一下逻辑,发现问题出在后缀名上。客户上传的文件后缀是.PDF,而组件中未兼容大小写,在before-upload事件中就阻止了。于原创 2021-10-18 10:10:12 · 5097 阅读 · 2 评论 -
Vue2全家桶+Element搭建的PC端在线音乐网站
项目基于vue2全家桶及网易云音乐Node.js Api实现,网站风格参考了一些平台,样式简约清新,整体体验比较流畅原创 2021-12-08 17:45:53 · 1747 阅读 · 0 评论 -
Vue环境搭建和创建你的第一个项目
ps:如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。原创 2019-11-03 01:04:28 · 324 阅读 · 0 评论 -
vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
目录1,前言2,.env文件的作用3,配置.env文件4,配置启动命令5,获取.env中的全局变量5,实际用处1,前言分享一下vue项目中利用.env文件存储全局环境变量,以及利于项目开发的vue启动以及打包命令。2,.env文件的作用在vue项目中,env是全局配置文件,可以存储不同环境下的变量。使用vue-cli搭建项目,默认会在根目录创建一个.env文件,如果需要更多类型的.env文件,需要自行创建。其中:1,.env 后缀的文件是全局默认配置文件,不论什么环境都会加载并合并。2,原创 2021-04-29 16:18:37 · 4042 阅读 · 2 评论 -
Vue视频插件vue-video-player的使用
有些项目中,或者是视频网站,都需要视频播放功能。我们可以用H5的video标签实现播放,但是原生的样子视频播放器不太好看,功能也需要自己封装。这时候可以站在巨人的肩膀上,使用已造好的轮子vue-video-player原创 2021-09-06 18:05:52 · 16569 阅读 · 7 评论 -
vue2的指令和自定义指令
自定义指令。是Vue暴漏了自定义指令的API给我们,让我们除了使用内置指令外,我们还可以自己定义指令(比如:复制粘贴指令,图片懒加载指令,防抖指令等等)原创 2022-12-26 12:16:04 · 1911 阅读 · 1 评论 -
拖拽宫格vue-grid-layout详细应用及案例
vue-grid-layout是一个适用于vue的拖拽栅格布局库,功能齐全,适用于拖拽+高度/宽度自由调节的布局需求,本文将讲述一些常用参数和事件,以及做一个同步拖拽的Demo。原创 2023-08-07 11:09:14 · 3921 阅读 · 2 评论 -
vue-cli4升级到vue-cli5过程记录
本文主要分享vue-cli从4.x升级到5.x的过程,以及更新后的变化。原创 2022-08-25 14:05:27 · 4045 阅读 · 0 评论 -
助你上手Vue3全家桶之Vue-Router4教程
目录0,前言1,Router1.1,跳转1.2,打开新页面2,Route3,守卫3.1,onBeforeRouteLeave3.2,onBeforeRouteUpdate3.3,路由守卫语法4,重要变更0,前言因为没有了this,语法有所修改,模板中我们仍然可以访问$router和$route,所以不需要在setup中返回router或route。Vue-Router4.0官网超详细!Vue-Router3.0手把手教程1,Router1.1,跳转import { onMounted }原创 2021-11-01 09:49:40 · 2137 阅读 · 0 评论 -
助你上手Vue3全家桶之VueX4教程
目录0,前言1,State1.1,直接使用1.2,结合computed2,Getter2.1,直接使用2.2,结合computed3,Mutation3.1,直接使用3.2,结合computed4,Action4.1,直接使用4.2,结合computed0,前言这些内容是博主在学习过程中记录下来的,有一些不重要的点就跳过了。4.0对比3.0,区别不大。VueX4.0官网超详细!Vuex手把手教程1,State语法有所调整1.1,直接使用import { onMounted } from原创 2021-11-01 09:49:18 · 2468 阅读 · 1 评论 -
vue3+element-plus配置cdn
最近在做一个项目,项目配置版本如下原创 2022-01-17 09:48:59 · 4250 阅读 · 3 评论 -
Vue3中setup语法糖学习
是在单文件组件中使用Composition API的编译时语法糖。相比于普通的语法,它具有更多优势原创 2022-03-14 13:14:24 · 8644 阅读 · 0 评论 -
助你上手Vue3全家桶之Vue3教程
目录0,前言1,setup1.1,返回值1.2,注意点1.3,语法1.4,参数2,ref 创建响应式数据3,reactive 创建响应式数据4,computed 计算属性5,watch 监听6,watchEffect 监听回调7,生命周期7.1,改变7.2,语法8,toRef 创建ref9,toRefs 响应式转换10,shallowReactive 响应式外层转换11,shallowRef 基本数据响应式12,readonly 响应式变只读13,shallowReadonly 响应式变只读14,toRaw原创 2021-11-01 09:42:48 · 33743 阅读 · 26 评论 -
jsx/tsx使用cssModule和typescript-plugin-css-modules
不管是vue还是react,都可以写jsx/tsx,为了避免样式污染,常用的方式有两种。一种是每个组件都用一个唯一类名class包裹,使用less/scss嵌套样式。另一种是使用cssModule模块化。原创 2022-07-25 13:47:24 · 2612 阅读 · 0 评论 -
Vue3+TS使用element-plus 动态Icon图标
目录1,前言2,使用2.1,方式一2.2,方式二1,前言源于一段话Element Plus 团队正在将原有组件内的 Font Icon 向 SVG Icon 迁移,请多多留意更新日志, 及时获取到更新信息,Font Icon 将会在第一个正式发布被废弃,请尽快迁移在此记录一下如何使用element-plus中的icon组件环境:Vue:3.2.16Element-Plus:1.2.0-beta.3TypeScript:4.4.3Vite:2.6.42,使用在main.ts中原创 2021-11-29 09:31:53 · 10845 阅读 · 5 评论