![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 59
DLGDark
生活不止眼前的枸杞,还有热水~
展开
-
electron-vue框架的替代开源框架electron-vue-new
本框架作为弃用 electron-vue 框架的最新替代品,electron-vue弃用原因:框架作者长时间没更新,一些东西已经老旧,项目工程结构也不一样,使用起来问题很多故此,本人自行使用当前最新版本electron,结合vue2独立搭建的electron桌面版框架使用electron v28.2.7+vue2+cli4 构建的electron桌面版项目模板使用的node版本为v18.19.0,项目中自带vue-Tools功能。原创 2024-03-27 17:30:59 · 1164 阅读 · 0 评论 -
vue脚手架创建项目失败,报错淘宝镜像地址证书过期问题解决
使用vue-cli脚手架创建vue新项目时,控制台报错,创建失败。最终发现,本地有一个.vuerc文件,里面有个配置项。,这个的值改为false即可。原创 2024-03-09 17:59:22 · 1346 阅读 · 3 评论 -
移动端原生实现列表列固定横向滚动功能
在移动端开发中,会用到列表作为信息展示方式,一般希望上下滚动时,可以固定表头,左右滚动时,可以固定最左列。是列排序功能,与此文章无关,实现代码未贴出,除此之外,其他未贴出的代码均与此文章所讲功能无关,忽略即可。2、表头数组与列表数据数组之间互相联系,表头属性可以控制列表列排序、列表宽度、是否为固定列等;3、四个dom之间增加联动,使用@scroll、scrollLeft、scrollTop;3、左右滚动时,可以固定左边一列或多列可以固定显示;2、上下滚动时,可以固定表头在最顶端显示;原创 2023-12-11 17:07:00 · 671 阅读 · 0 评论 -
移动端Vant中的Calendar日历增加显示农历(节日、节气)功能
内部使用原生calendar.js, 中国农历(阴阳历)和西元阳历即公历互转JavaScript库,具体实现感兴趣的可自行查看其实现源码。使用 vue-jlunar-datepicker 依赖插件实现即可,具体样式可以自己根据需求进行修改处理。使用 js-calendar-converter 库实现。在main.js文件中引入。原创 2023-12-11 16:04:48 · 1439 阅读 · 2 评论 -
vue实现大转盘抽奖
本案例为在小程序中实现的转盘抽奖,其他手机端项目思路类似。注意: 转盘上的东西是由后台web项目里的配置页进行配置的,可以配置每个位置的奖品,中奖概率等。此文章只讲了抽奖转盘的实现,配置可根据真实需求进行开发即可,这里不作叙述。真实上线的时候,只需要将其中的转盘奖品信息,中奖位置索引,中奖次数,活动说明,中奖记录改成后台接口调用即可,此处仅在代码里模拟数据。效果图如下:代码如下:上面所用到的图片资源文件截图(并非真实图片文件大小,真实需要可自行让UI设计制作即可):原创 2023-08-08 17:40:10 · 2741 阅读 · 7 评论 -
vue2初始化代码快捷生成自定义配置
2.如下图示配置文件,如没有,则新建即可。4.使用时,输入vue,回车即可。1.找到如下图所示位置点击。5.快捷生成结果示意图。3.配置代码如下所示。原创 2023-02-21 12:36:09 · 345 阅读 · 0 评论 -
vue配置文件中的 publicPath和路由里的配置参数base的作用及区别
一个针对的是项目部署的路径问题,一个针对的是页面路由url的路径问题,缺一不可。基础路由路径,会导致整个路由路径不对,所以,这里配置完后,每次重新登录或刷新页面都不会出现找不到页面的问题,刷新也不会出现url不对的问题。路径,如果是在history路由模式下,一般需要在服务器配置项目页面访问路径,否则刷新页面会出现404,找不到路径页面。这里面的base参数,在hash模式下,一般不需要配置,默认跟路由,如果在history模式下,由于项目配置了。,项目这里则需要与服务器上配置的项目路径保持一致,故。原创 2023-01-12 19:40:27 · 4249 阅读 · 4 评论 -
vue实现企业微信扫码登录后台管理系统
vue实现企业微信扫码登录后台管理系统。 1. 在登录页面构建内嵌式登录二维码(这种方式好处:无需跳转到企业微信域下登录后再返回,提升企业微信登录的流畅性与成功率) 2. 扫二维码之后,微信那边会跳转到redirect_uri你重定向的地址,后面会拼接code参数,一般重定向地址都是本页面(这里指的是是登录页面) 3. 在本页面获取url后面拼接的code,用code去请求后台接口 4. 后台接口服务那边用access_token和code去获取用户的企业微信号 5. 通过企业微信号查找数据库原创 2022-12-09 18:33:13 · 3989 阅读 · 12 评论 -
electron-vue中报错 Cannot use import statement outside a module解决方案(亲测有效!!!)
错误: Cannot use import statement outside a module(不能在模块之外使用导入语句)。原因: 安装的某个依赖包里使用了import语法,因为我们打包输出的是commonjs规范,所以不识别import语法而导致报错。可以从 .electron-vue/webpack.renderer.config.js目录文件中看到如下一段代码:上面图示中代码就可以看出打包输出的目标文件为commonjs规范,对es2015规范中import语法不识别。解决方案: 使用webpac原创 2022-12-07 16:35:34 · 10068 阅读 · 0 评论 -
在electron-vue项目中使用websocket和vue中的provide及inject实现在线离线状态的检测
实现思路:先通过在APP.vue根组件中去全局创建websocket连接到服务器,通过服务器推送的那内容来区分在线或离线,拿到内容并判断出状态后,再通过provide和inject通信方式将状态值传送到需要显示在线或离线状态的页面组件中并显示即可。官方文档:provide / inject引用提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。核心代码:APP.vue根组件://APP.原创 2022-03-09 18:23:11 · 3537 阅读 · 0 评论 -
vue生命周期学习(基础原理)
vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染—>更新—>渲染、销毁等一系列过程,我们称这是Vue的生命周期。每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。下图为vue生命周期示意图:具体各个生命周期的意义及用法beforeCreated这个时候数据还没有挂载,访问不到数据和真实的Dom,一般不做操作created这个时候可以使用数据及更改数据了,但不会触发updated函数,不会触发其他原创 2020-10-11 20:49:06 · 614 阅读 · 0 评论 -
vue后台管理系统在同一浏览器登录不同权限角色cookie被覆盖刷新页面问题(简单有效!!!)
在同一浏览器,登录同一个系统,打开两个标签页,登录不同角色权限的账号,会出现先登录的cookie会被后来登录的cookie给覆盖掉。从而导致,原来打开的页面就会带着新的token信息去请求后台,但页面显示的还是之前权限角色范围内的信息,这样是有问题的,按道理,原来的页面应该变成后面登录角色的权限范围内应该展示的页面及内容。 cookie刷新问题原创 2020-09-28 19:36:17 · 3637 阅读 · 0 评论 -
vue前端刷新token实现(亲测有效)
实现思路这里用的请求框架是axios,所以我在这里主要是在请求拦截器里实现token刷新逻辑处理的。先大概说一下整个思路:我们这里是在token即将过期的时候进行token刷新,而不是已经过期了才去刷新,这里即将过期的时间设置的是10分钟(这里有一个特别的点,就是我这里和后台协商,如果过期了20分钟内也让刷新token,超过过期20分钟,则判断为已过期,退出登录。所以这里请根据自身需求进行修改即可),这个时间在下面代码判断中可以根据自己项目情况自行调整。一般一个页面同时会有很多个请求,所以我们需要建一原创 2020-09-27 14:32:04 · 10483 阅读 · 11 评论 -
vue前端导出表格使用Blob处理后台返回的二进制流数据(亲测可用,兼容谷歌,火狐,IE!!!)
一般前端导出表格时,后台会有两种方式返给前端数据:后台返回一个下载地址url。这种方式是后台得先生成文件保存在服务器某个地方,然后返回给前端url地址,前端直接拿到url地址一行代码去下载文件即可。这种有个问题就是后台得知道什么时候可以删除生成的那个文件。一般这种方式不推荐使用。后台返回给前端的是一个二进制流,这种方式好处在于后台不用生成文件去保存,二进制流保存在内存中,不用占用服务器存储空间,不用考虑什么时候删除去文件。这种方式也是常见的一种方式。下面我们主要讲一下第二种方式的使用和一些需要注意原创 2020-08-24 17:32:23 · 3041 阅读 · 0 评论 -
在spa(单页面应用)开发中,点击侧边栏当前路由来刷新页面的两种方案(业界推荐使用的方案)
背景:在用 spa(单页面应用) 这种开发模式的之前,也就是多页面开发模式下,用户每次点击侧边栏都会重新请求这个页面,用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。如今:大多都是spa这种,但 spa 就不一样了,当用户点击当前高亮的路由并不会刷新 view,因为 vue-router 会拦截你的路由,它判断你的 url 并没有任何变化,所以它不会触发任何钩子或者是 view 的...原创 2019-11-28 21:44:22 · 769 阅读 · 0 评论 -
vue双向数据绑定核心原理基本模拟实现
vue双向数据绑定主要是通过 Object对象的defineProperty属性,重写data的set和get函数来实现的,这里只会实现最基本的内容,主要实现v-model,v-bind 和v-click三个命令,其他命令也可以自行补充<!DOCTYPE html><html><head> <meta charset="utf-8" />...原创 2019-01-24 17:45:28 · 321 阅读 · 0 评论 -
在vscode工具中,使用eslint,stylelint,htmlhint对vue项目代码格式的检查
1. 对js代码格式的检查:首先全局安装以下插件:“eslint”“vue-eslint-parser”“babel-eslint”“eslint-config-alloy”“eslint-plugin-html”“eslint-plugin-import”“eslint-plugin-node”“eslint-plugin-promise”在项目根目录添加 .eslint...原创 2019-01-09 18:53:05 · 4647 阅读 · 0 评论 -
vue后台管理系统项目标准完整的目录开发架构
注意:里面的部分文件夹可根据自己项目需求进行删减(比如lang,icons,mock,vendor这些文件夹),vendor文件夹用来存放第三方提供的功能插件等。static文件夹下一般放一些静态资源(比如静态资源图片等)。...原创 2019-02-28 16:19:14 · 3474 阅读 · 0 评论 -
编程式导航router.push(...)中传参的两种方式query和params及两者区别
vue中的两种导航方式:声明式编程式<router-link :to="…">router.push(…)除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现注意:在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push想要导航到不同的 UR...原创 2019-04-10 11:22:55 · 3783 阅读 · 1 评论 -
vue中的双向数据绑定的实现(数据劫持,结合发布者---订阅者模式)
代码简单原理的实现:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>&原创 2018-03-13 09:52:32 · 4153 阅读 · 0 评论