Vue
文章平均质量分 70
前端小小白zyw
一只路过的小码农。。。
展开
-
JS实现chatgpt数据流式回复效果
处理下,然后代码片段着色利用。原创 2024-03-07 10:17:39 · 1648 阅读 · 0 评论 -
JS 获取视频中某一个时间点的图像信息
获取某个时间点的图片信息:url。原创 2023-12-27 14:26:05 · 556 阅读 · 0 评论 -
Linux arm架构下构建Electron安装包
上篇文章我们介绍Electron基本的运行开发与windows安装包构建简单流程,这篇文章我们从零到一构建Linux arm架构下安装包,实际上Linux arm的构建流程,同样适用于Linux x86环境,只不过需要各自的环境依赖,Linux arm坑更多并且有些依赖官方并不适用于arm环境,比如fpm,这里的基础配置去上篇文章找就行,好了,不多比比,开搞。原创 2023-12-14 14:46:43 · 3903 阅读 · 5 评论 -
Pinia 是否可以代替 Vuex ?
Pinia 是否可以代替 Vuex ?原创 2022-07-27 18:04:40 · 521 阅读 · 0 评论 -
Vite 配置 Eslint 规范代码
Vite 配置 Eslint 规范原创 2022-07-26 17:50:57 · 2131 阅读 · 0 评论 -
Vue 3.0 全家桶 + Vite 从零配置开发环境、生产环境
vite + vue 3.0原创 2022-06-30 18:23:52 · 2330 阅读 · 0 评论 -
vue实现下载excel表格俩种方式
一般类似功能都会放到后端来做,当然作为一项扩展技能,前端开发人员也应该掌握。今天,给大家介绍前端实现excel表格下载的俩种方式方式一、const jsonData = [{order:1,name:'小明',age:12},{order:2,name:'小张',age:20}]if (!jsonData.length) return// 表格的列标题 如果出现科学技术法或者其他格式 使...原创 2020-04-08 17:13:36 · 3951 阅读 · 2 评论 -
Axios利用拦截器取消页面切换pending中的请求
我们在开发时 经常会遇到类似场景切换页面时,某些情况导致 当前页面pending中的请求未完成,切换到新页面,之前的请求逻辑还会异常处理今天,我们解决类似问题:处理流程:当前页面请求拦截新页面当前请求cancel函数与url存储到内存(vuex)数组中利用router.beforeEach取消pending请求,清空数组数组存储请求url当前页面请求拦截新页面代码:vuex定义模块...原创 2020-03-26 18:54:15 · 2224 阅读 · 0 评论 -
Axios利用拦截器处理重复请求
我们在开发时 经常会遇到类似场景提交表单时,连续点击提交表单,导致后台重复处理写一个连续点击脚本,不停发送请求,并发量导致服务器瘫痪今天,我们解决类似问题:一、重复请求处理流程:开始请求拦截响应拦截判断数组是否含有当前请求如果存在cancelToken取消当次请求如果当次请求成功数组中清除掉当次请数组存储当前请求开始请求拦截响应拦截代码:request.jsimport ax...原创 2020-03-26 18:04:27 · 3572 阅读 · 0 评论 -
vue项目添加全局过滤器
1.创建filter.js2.main.js 全局注入import * as filter from './filter'// 注册全局过滤器Object.keys(filter).map(key => { Vue.filter(key,filter[key])})3.使用...{{item.type | filterDBType}}...原创 2020-03-13 16:32:49 · 644 阅读 · 0 评论 -
vue项目webpack打包项目输出可修改配置项
前不久项目打包交付测试进行测试时,需要打包到不同的测试服务器分别指向其对应api地址,如果打包一次修改一次api地址,那岂不是很麻烦?今天我们就来解决这个问题:核心思路:打包输出一份配置,代码中获取配置方法一:1.在static(webpack不会编译)下创建serve.config.js/** * @description 打包后抽取的配置 BaseUrl 必须是host地址 + 端...原创 2020-03-13 16:21:18 · 4084 阅读 · 0 评论 -
节日快乐
节日快乐原创 2019-10-24 22:33:36 · 224 阅读 · 0 评论 -
Vue项目判断开发,测试,生产环境配置api
最近在做Vue项目,原创 2018-11-21 14:11:38 · 2484 阅读 · 0 评论 -
vue中调用微信js-sdk自定义分享
当项目运行在微信浏览器时,会遇到分享的需求,下面是我实现微信分享时遇到的一些坑,需要注意:原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口,即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShar...原创 2019-04-11 16:42:51 · 1858 阅读 · 2 评论 -
vue中通过js导出数据到excel(有style)
最近做商城后台管理系统,遇到需求把数据表导出到excel,翻阅资料,大概整理如下俩种方式:一、单纯的导出一个excel表格:/*** @description 导出数据到excel,拼接key,value,扔到csv文件,创建a标签。* @date 2019-07-16 16:00*/function exportExcel () { let data = [ { no...原创 2019-07-16 18:35:39 · 681 阅读 · 0 评论 -
vue中利用particlesJS实现鼠标动画粒子连线效果
最近做后台管理系统,发现一款散射的原子颗粒特效插件,效果不错,使用到了项目中。效果演示:一、安装:npm i particles.js --S二、演示:https://zhangyongwnag.github.io/Framework_mamage/dist/#/Login三、使用:①:创建组件:ParticlesJS.vue②:引入执行③:配置参数四、配置参数:...原创 2019-05-14 11:58:17 · 3181 阅读 · 0 评论 -
vue中使用vuex-router-sync
vuex-router-sync插件将vue-router的状态同步到vuex中,具体实现如下:一、下载npm i vuex-router-sync --save二、使用import { sync } from 'vuex-router-sync'sync(store, router, { moduleName: 'RouteModule' } )这样store.state里面...原创 2019-08-20 18:17:42 · 2700 阅读 · 0 评论 -
vue选择时间日期日历插件 : vuejs-date-calendar
vue移动端时间日期日历选择插件Demo( 推荐手机端打开 )https://zhangyongwnag.github.io/vuejs-date-calendar/example/#/Home一、下载npm install --save vuejs-date-calendaroryarn add vuejs-date-calendar二、引入import Vue fro...原创 2019-08-20 10:31:12 · 10108 阅读 · 0 评论 -
vue利用prerender-spa-plugin预渲染
前端时间写一个vue官网,开发很顺利,但是发布之后,发现对于SPA项目seo优化很不友好,于是用到预渲染,顺便利用vue-meta-info编写每个页面的name、content等等。一、安装npm i prerender-spa-plugin --save -devnpm i vue-meta-info二、具体步骤:1、修改router下index.js:hash模式改为histo...原创 2019-04-16 16:18:54 · 1394 阅读 · 0 评论 -
vue中实现微信公众号支付
最近做项目遇到微信支付,根据项目需求使用了微信公众号支付。大概的流程介绍:1、配置微信公众号2、静默授权,获取路径中code3、根据code拿到openid4、根据openid获取prepay_id5、获取支付签名6、调起支付功能一、配置微信公众号必须是已认证,配置安全域名、开放高级接口权限等等,这里就不过多介绍了。二、授权介绍一下授权的俩种方式:静默授权,用户无感知(sc...原创 2019-04-12 15:45:47 · 2696 阅读 · 0 评论 -
Vue之watch高级用法
在vue中,使用watch来响应数据的变化。普通用法就不过多说,本文主要介绍下高级用法,immediate、handler以及deep,一、immediate(首次绑定)我们想要最初绑定的时候也执行函数,就用到immediate。监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;immediate表示在watch中首次...原创 2019-01-08 11:22:13 · 1957 阅读 · 6 评论 -
Vue之Render函数进阶篇
上一篇文章介绍了Render函数基本的用法以及渲染场景,本篇文章主要介绍利用JavaScript代替模板功能。一、v-if、v-else原创 2018-11-28 17:48:48 · 5293 阅读 · 0 评论 -
Vue之axios的使用与二次封装
最近,做项目遇到请求前做一些操作以及统一处理的错误码的问题等等,由于项目比较着急,一时没搞,准备项目上线搞一波,废话不多说。本篇主要对axios的二次封装,利用拦截器添加公共参数、签名、公共header,以及错误码统一处理,废话不多说。一、目录:二、使用(1):api主要配置环境api以及请求地址:这里主要是根据环境配置不同的api,我之前有篇文章介绍怎么配置,点击查看(2):二次...原创 2018-11-30 17:25:04 · 1314 阅读 · 0 评论 -
Vue之Render函数出入茅庐
最近做后台用到了iview的自定义table,但是不满足于需求,于是,利用render函数进行一番整改。一、介绍:首先介绍一下render函数,Vue一般使用template来创建HTML,render函数就是用JavaScript来创建html。(1):举例:同样一段html,用render函数来实现它:<div>我是一个div容器&a原创 2018-11-21 18:16:06 · 487 阅读 · 0 评论 -
JavaScript客户端直传OSS,服务端签名
一、介绍公司项目中遇到上传图片至OSS,因为OSS支持POST协议,所以只要在Plupload发送POST请求时带上OSS签名即可。废话不多说,直蹦主题。二、具体步骤:(1):服务端签名因为客户端通过JavaScript把AccesssKeyID 和AccessKeySecret写在代码里面有泄露的风险,所以采用服务端签名后直传。客户端请求服务端获取AccesssKeyID 、Acces...原创 2018-11-21 15:24:22 · 2914 阅读 · 6 评论 -
Vue.js移动端图片压缩插件localResizeIMG
1、介绍: 解决Webapp项目中上传图片时,拍照或者选择的图片太大,导致上传速度缓慢,用户体验差,高并发下,后台处理较大的文件压力大。 为了降低类似问题带来的影响,我们采用Vue2.0压缩图片插件localResizeIMG(lrz),压缩图片。 大体的思路:每次拍照或选择一张图片-然后压缩图片-预览上传。上传图片压缩插件是localResizeIMG , 这个插件的使用说明可以去看...原创 2018-11-21 11:49:37 · 6033 阅读 · 0 评论 -
Vue前端实现购物车基本功能(Vuex)
本案例利用vuex + vant 实现购物车功能,概括有以下步骤:1、mock模拟数据2、利用veux操作商品的选中状态3、全选与取消全选4、动态reduce计算价格5、结算取出商品id6、利用manageStatus判断管理状态,管理删除商品7、未删除商品的状态存储操作演示:具体步骤:一、mock模拟数据:1、下载mockjsnpm i npm i mockjs --...原创 2019-04-10 17:56:18 · 7703 阅读 · 4 评论 -
vue动态加载组件
利用component is 属性动态加载组件:点击button分别加载A、B组件<template> <div> <button @click="show('A')">点击加载A组件</button> <button @click="show('B')">点击加载B组件</button> <compon...原创 2019-07-08 18:23:15 · 1817 阅读 · 0 评论