Vue
文章平均质量分 61
不怕麻烦的鹿丸
我啊,只想安稳地做个忍者,安稳地生活,和一个不美也不丑的女人安稳地结婚,安稳地生两个小孩,第一个是女孩,之后是男孩。等女儿结了婚,儿子独立后便退休,之后闲时和朋友下下象棋或围棋,过着悠哉悠哉的隐居生活,然后先太太一步离开这个世界,能有这种人生就好了。
展开
-
tensorflow 在 vue 项目中使用示例
【代码】tensorflow 在 vue 项目中使用示例。原创 2022-07-14 17:01:28 · 517 阅读 · 0 评论 -
如何开发npm依赖包,并发布到npm
若连接上xxx后就可以通过引入node_modules中的依赖的方式引用xxx进行测试,xxx本地修改后,测试项目中也会实时更新。如果希望打包的文件具有命名空间如@vue,只需修改pacakge.json的name,在前面加上命名空间,再执行打包命令即可。注:上传的npm包,在72小时后不可删除,如果是测试用的包,记得72小时内删除。此处如果有错误,有可能是因为你的npm用的是淘宝镜像,才导致的无法登录成功。输入自己的用户名,密码和邮箱(输入密码时是正常输入的,只是自己看不到)原创 2024-02-29 10:02:44 · 1148 阅读 · 0 评论 -
vue3 使用 postcss-pxtorem 实现自适应
if(/%/ig.test(px)) { // 有百分号%,特殊处理return px} else {// 144 为设计图尺寸1440除以10。原创 2024-02-20 16:45:49 · 2118 阅读 · 0 评论 -
vue3版本的录制视频上传案例
HTML5 提供了一种简单而强大的方式来实现视频录制和上传功能。通过使用 HTML5 的video元素和接口,我们可以在浏览器中录制视频,并将其上传到服务器。原创 2024-02-01 17:05:12 · 825 阅读 · 0 评论 -
使用vue3自定义指令实现Tooltip
【代码】使用vue3自定义指令实现Tooltip。原创 2024-01-31 09:23:55 · 724 阅读 · 0 评论 -
自定义vue通用左侧菜单组件(未完善版本)
传入一个菜单数组数据,自动生成一个左侧菜单栏。菜单栏可以添加、删除、展开、重命名,拖动插入位置等。原创 2024-01-29 15:32:48 · 633 阅读 · 0 评论 -
解决webpack或vite项目无效依赖以及子孙依赖安全漏洞升级与兼容性问题的方法
一旦执行升级操作,因为会忽略各依赖间的联系性并统一升级到最新版本,所以可能会出现升级失败的情况,此时会询问用户是否确定并加上 --force 强制升级,如果你仍然想升级,直接输入强制升级即可。根据组件库无风险版本,在 package-lock.json 文件中指定间接依赖的大版本或具体版本号,使用npm update 升级指定依赖。安装时忽略所有peerDependencies,忽视依赖冲突,采用npm版本4到版本6的样式去安装依赖,已有的依赖不会覆盖。原创 2024-01-26 10:02:46 · 1237 阅读 · 0 评论 -
小DEMO:在vue中自定义range组件
【代码】小DEMO:在vue中自定义range组件。原创 2023-11-15 16:08:10 · 298 阅读 · 0 评论 -
使用canvas实现时间轴上滑块的各种常用操作(仅供参考)
使用canvas,模拟绘制时间轴区域,有时间刻度标尺,时间轴区域上会有多行,每行都有一个滑块。1、时间刻度标尺可以拖动,会自动对齐整数点秒数,最小步数为0.1秒。2、滑块可以自由拖动,当滑块处于选中状态时,左右两边会出现可拖动的按钮,用于拉伸宽度。3、滑块与滑块之间对齐时会出现对齐虚线,滑块与刻度标尺对齐时,刻度标尺会变色用于提醒用户此时已对齐。4、当滑块拉伸到最右侧区域时,右侧空间不足时,会自动增加右侧空间区域。原创 2023-10-25 17:07:02 · 890 阅读 · 0 评论 -
vite + vue3 的项目中使用 vitest 做单元测试(仅供参考)
打开 vscode 新建一个 components 目录并新增一个button目录,然后再建一个__test__目录放测试文件,elemetn-plus 源码也是这样做的,在里面新建一个xxx.test.ts 或者 tsx 的文件(没安装tsx就建ts文件)。如果没安装c8,运行命令的话,Vitest 会提示安装 c8,默认yes,回车执行安装。vitest默认会检测项目中所有.test.ts或者.test.tsx等之类的测试文件,这个是可以修改的,具体配置可以参考官网去改。在 vitest 中 集成了。原创 2023-09-15 17:24:34 · 2418 阅读 · 0 评论 -
vue3使用canvas实现图层的移动、缩放、旋转等其他编辑操作
一些简单有规则的图形,比如矩形,椭圆,多边形......我们可以使用一些数学函数来计算判断。这种方式非常棒,当你的画布上没有大量的图形时,他可能是非常快的。但是这种方式很难处理那些非常复杂的几何图形。比如说,你正在使用具有二次曲线的线。原创 2023-08-25 11:00:26 · 2892 阅读 · 0 评论 -
Vue组件间的通信方式
子组件通过$emit触发自定义事件,$emit第二个参数为传递的数值父组件绑定监听器获取到子组件传递过来的参数# 父组件# 子组件。原创 2023-07-12 14:52:20 · 174 阅读 · 0 评论 -
vue项目中实现标签元素的拖动,缩放,旋转等操作
mousedownmouseupmousemovemouseleave用户在同一个位置先完成mousedown动作,再完成mouseup动作。因此,触发顺序是,mousedown首先触发,mouseup接着触发,click最后触发。会在mousedown、mouseup、click之后触发。都是鼠标进入一个节点时触发。两者的区别是,mouseenter事件只触发一次,而只要鼠标在节点内部移动,mouseover事件会在子节点上触发多次。都是鼠标进入一个节点时触发。原创 2023-07-12 11:19:28 · 3063 阅读 · 0 评论 -
在vue项目中使用video.js实现视频播放和视频进度条打点
严格大于0的数字数组,其中1表示常速(100%),0.5表示半速(50%),2表示双速(200%)等。markerStyle配置的是各个打点的默认颜色,如果要每个打点都有自己各自的颜色,可以在markers里给每个打点添加class名字,然后在css里单独设置颜色。Video.js表示用户通过"vjs-user-active"和"vjs-user-inactive"类以及"useractive"事件与玩家进行交互。此选项将用于Video.js(即video.novtt.js)的“novtt”版本中。原创 2023-02-24 10:59:17 · 11204 阅读 · 1 评论 -
在 vue 或 react 项目中使用 mockjs 搭建 mock server
有时候,在公司里一些项目开发前,后端接口没那么快给到前端时,前端可以先跟后端约定好各个接口的请求路径、请求参数以及返回数据格式,先整理出一份接口文档,这样前端可以通过mockjs参考接口文档,自己先模拟数据,写业务代码,等待后端准备好,再用后端真实的接口数据替换自己写模拟数据,实现前后端同时开发。原创 2023-02-23 15:11:27 · 4161 阅读 · 0 评论 -
Vue项目中添加单元测试
Vue项目的单元测试用的是Vue Test Utils,这是Vue.js 官方的实用工具库,在Vue和Jest之间提供了一个桥梁,暴露出一些接口,让我们更加方便的通过Jest为Vue应用编写单元测试。原创 2023-01-12 14:22:43 · 2107 阅读 · 0 评论 -
vue项目打包优化,防止项目代码泄漏
在开发VUE项目的时候,可能有些情况下,我们的VUE项目打包后发布到服务器上访问,但是在chrome开发调试里的Sources—> Page—> webpack 可以查看到项目的webpack 包。注意:vueCli3中productionSourceMap设置为false,有可能出现不生效的情况,这时候就还要同时设置。,如果没有就自己创建一个,然后在配置文件里设置productionSourceMap为false。将build对象下面的productionSourceMap设置成false。原创 2022-12-19 10:27:32 · 2151 阅读 · 0 评论 -
Vue3在setup中获取元素引用(ref)
在非setup钩子中, 我们可以通过this.$refs来获取指定元素,但是setup中没有"this",所以要用其他方式来获取元素。在setup函数中,可以使用ref函数,用于创建一个响应式数据,当数据发生改变时,Vue会自动更新UI一定要注意,ref创建的是一个响应式数据。这个在VUE3.0中非常灵活,几乎是怎么玩都行的。具体后边还会说到,这里大概说一下基本用法。1、引入ref2、使用注意点。原创 2022-09-27 11:50:58 · 10973 阅读 · 0 评论 -
vue3 中对Pinia的简单使用
为了从 Store 中提取属性同时保持其响应式,您需要使用。1、创建一个 pinia(根存储)并将其传递给应用程序。它将为任何响应式属性创建 refs。原创 2022-09-26 16:29:21 · 1727 阅读 · 1 评论 -
自定义vue项目的雷达图组件
还有一个难点,就是需要计算原点是否在有数值的几个点连成的图形中,如果在图形中,则不连接原点,如果是在图形外,则要连接原点的坐标形成新的图形。areaColor: ’rgba(140,144,220,0.55) // 雷达数据坐标点围起来的图形的填充颜色。利用canvas,通过传入一组数组数据,根据数组数据的个数,自动生成一个多边形的雷达图形,并在对应的坐标点绘制。diagonalLineColor: 'rgba(216,216,216,0.4)' // 雷达对角线的颜色。...............原创 2022-08-31 11:05:34 · 1055 阅读 · 0 评论 -
关于vue.extend的理解应用
使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。一般,我们会用Vue.extend接收一个组件对象来创建一个构造器,再利用创建的构造器 new 一个实例,并将这个实例挂载到一个元素上。............原创 2022-08-15 11:46:50 · 3988 阅读 · 2 评论 -
关于本地vue项目跨域的解决方案
新建一个MyChromeDevUserData文件夹,在文件夹右键开启一个终端,输入以下命令,这时候会自动弹出一个可以跨域请求的浏览器窗口界面。当我们在本地开发vue项目的时候,在对接后端接口会存在跨域问题,这时候可以采用以下方法去解决本地请求接口跨域的问题。根据电脑不同需要改的是。...原创 2022-07-29 11:41:12 · 4631 阅读 · 0 评论 -
vue项目使用 Recorder.js 实现录音功能
template代码。原创 2022-07-25 11:15:56 · 8892 阅读 · 5 评论 -
vueCli 4.x 升级 5.x 报错 - Progress Plugin Invalid Options的解决方法
2、检查vue.config.js里面的devServer是否有overlay配置,这个配置在vue-cli5.x版本里会不兼容,要去掉,否则运行也会报错。1、检查node_modules里的webpack版本是否也升级到5.x版本,没有就要升级到5.x版本。3、删错掉node_modules和package-lock.json。这个有可能是本地安装的webpack版本跟vue-cli版本不一致导致的。4、清除npm缓存npmcacheclean--force。...原创 2022-07-19 11:45:31 · 13693 阅读 · 1 评论 -
vue2和vue3 使用$bus事件总线的区别
一、vue2在main.js文件里Vue.prototype.$bus = new Vue() // event Bus 用于无关系组件间的通信监听this.$bus.$on('buried-point', (data) => {});触发this.$bus.$emit('buried-point', { event: 't-total', duration: tStartTime, explain: '总访问时间'})二、vue3原创 2022-05-17 15:33:12 · 1421 阅读 · 0 评论 -
VUE 3.x 实战项目从0到1搭建
一、开发环境配置1、安装node.js通过官网下载安装node.jshttp://nodejs.cn/在用 Vue 构建大型应用时需要使用到node里面的 npm 来安装各种插件Node 版本要求Vue CLI 4.x 需要Node.jsv8.9 或更高版本 (推荐 v10 以上)。你可以使用n,nvm或nvm-windows在同一台电脑中管理多个 Node 版本。2、npm配置淘宝镜像如果在本地一直装不上npm的包,可以考虑用国内的淘宝镜像,使用淘宝定制的 ...原创 2022-04-01 15:51:00 · 3565 阅读 · 0 评论 -
vue封装自定义组件,打包发布到npm上使用
封装vue组件库有2种形式:1、使用 webpack-simple 模板,没有vue-router的中间件,不需要路由时推荐使用,同时 webpack-simple 没有格式的检测2、使用 webpack 模板一、webpack-simple┌─testNpm 项目主目录├─ src│ └─ components 存放所有自定义组件目录│ ├─ xx-btn 单个自定...原创 2020-06-09 18:16:21 · 6710 阅读 · 1 评论 -
uni-app —— 小程序自定义封装支持多图上传(支持图片压缩功能)
最近在使用uni-app的上传功能时,发现目前只有APP端支持多张图一起上传,而小程序不支持,于是自己动手封装一下支持一次上传多张图片。原理:其实底层还是一张图片一张图片上传,只是获取的时候可以一次获取多张,然后写代码自动依次处理这多张图片上传,即把图片多次上传的麻烦手动过程给自动化了。<template> <view class="container">...原创 2020-04-16 16:23:15 · 3270 阅读 · 17 评论 -
Vue和React的样式穿透 —— 深度选择器
一般我们在写组件的时候,为了防止被其他组件内的样式冲突,习惯写一些局部样式,采用modules方案解决组件间的覆盖问题。但是如果html里有些class是需要根据条件判断来显示的话,在样式编译的时候,编译器会默认该样式不存在,从而直接把样式文件里写的class样式被忽略掉,最后编译出来的样式就会没有我们写的class样式,那这时候就需要使用解决。原创 2020-03-20 17:24:12 · 2474 阅读 · 1 评论