js
文章平均质量分 72
东扯葫芦西扯瓜
笨,但是喜欢钻
展开
-
前端组件库自定义主题切换探索-03-webpack-theme-color-replacer webpack 同时替换多个颜色改造
这篇我们来开始改造,让这个插件最终能达到我们的目的:首先修改plugin.config.js。插件首先要在vue.config.js引用注册,因此先对这里做改造。这里我们指定了四种颜色,primary,danger,warning,other,然后生成配置数据,数据格式如下后面的代码逻辑都会根据对象的键名(比如primary)来读取每个键名下面的配置来做批量操作原创 2023-02-26 20:14:13 · 1441 阅读 · 4 评论 -
前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-02
另外我们看下 client里面的themeColorChanger.js,这里面是调用的时候使用的,有个关键的变量,就是WP_THEME_CONFIG,这里是调用的时候获取老的颜色并且替换新颜色的关键,我们在上一篇已经讲过。经过上面的一些代码逻辑推理,我们已经大致掌握了webpack-theme-color-replacer webpack的实现逻辑,也知道了实现的关键所在,目前插件是单一替换,我们要做的是变成多个替换。数据太多,这里仅展示前面一点点,显然这是编译工具,来自webpack。原创 2023-02-26 11:13:43 · 1081 阅读 · 1 评论 -
微信公众号网页在本地开发模式下如何使用正式环境的域名来调试
微信公众号网页,本地开发环境调试线上的域名原创 2023-02-12 16:15:17 · 1799 阅读 · 3 评论 -
前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-01
webpack-theme-color-replacer webpack 的实现逻辑和原理分析追踪原创 2023-01-09 15:55:14 · 1701 阅读 · 0 评论 -
Application entry file “background.ts“ in the “**dist_electron\win-unpacked\resources\app.asar“ does
vue-cli3 + electron 打包报错:Error: Application entry file "background.ts" in the "**\dist_electron\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.原创 2022-07-10 19:13:13 · 2438 阅读 · 0 评论 -
Vue2+typescript写法总结
之前不是ts写的老项目,想接入ts,首先使用vue命令安装typescript下面依次对安装过程中出现的选项进行解释最后这里回车过后就可以继续安装ts了。安装过程中,可能出现如下错误:ERROR Error: Cannot find module ‘@vue/cli-plugin-router/generator/template/src/views/HomeView.vue’ from ’ xxx 或者 ERROR Error: Cannot find module ‘@vue/cli-plu原创 2022-07-08 21:28:31 · 5895 阅读 · 0 评论 -
Vue2 + JSX使用总结
什么是JSX摘自 React 官方:它被称为 JSX,是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言,但它具有 JavaScript 的全部功能。Vue 什么时候应当使用JSX这里说的是应当,而不是必须。因为在绝大多数情况下,模板语法都能胜任,只不过写起来看着不太好看而已。或者使用模板语法,那写起来恐怕不是一般的长,而且阅读会费劲很多。下面我们来看下应当使用JSX而原创 2022-05-28 23:10:25 · 12166 阅读 · 1 评论 -
ant-design-vue table 表格组件错位解决
ant-design-vue table 表格组件错位解决原因查找错位消失机制解决思路试验一试验二解决的背后table组件错位问题。table组件错位,不管是用element-ui的table组件,还是ant的table组件,只要使用了列的fixed属性,在第一次进入页面时就会出现。原因查找经检查dom发现使用fixed后,table组件实际由3个table组成,左边一个,中间一个,右边一个。如果中间表格有某一列的内容有换行或者特殊内容等,,这会导致表格实际高度比没有特殊内容要高。三个表格原创 2022-04-23 15:23:04 · 10007 阅读 · 2 评论 -
微前端应用及基于qiankun的微前端实践
微前端概念起源微前端其实是借鉴了微服务的概念,最早是出现在2016年的ThoughtWorks Technology Radar(ThoughtWorks技术雷达)什么是微前端MicroFrontends 官方解释:用来构建能够让 多个团队 独立交付项目代码的 现代web app 技术,策略以及实践方法MicroFrontends 官网:https://swearer23.github.io/micro-frontends/所以微前端并不是一个单纯的技术点,而是一个为了解决复杂应用,特别时便于以后原创 2022-04-08 16:02:01 · 4372 阅读 · 2 评论 -
vue 使用动态路由参数的 keep-alive 条件缓存与三级路由缓存解决
vue 使用动态路由参数的 keep-alive 条件缓存与三级路由缓存解决原创 2022-01-31 13:37:55 · 6516 阅读 · 3 评论 -
vue 页面20秒无操作(点击,触摸及其他事件无运行时)返回首页的实现
vue 页面20秒无操作(点击,触摸及其他事件无运行时)返回首页的实现原创 2022-01-31 10:31:47 · 1474 阅读 · 0 评论 -
vue 由 clearTimeout无法清除定时器引发的vue 周期函数,事件代码执行顺序思考
vue 由 clearTimeout无法清除定时器引发的vue 周期函数,事件代码执行顺序思考最近做个移动的项目,遇到需求:首页无操作20秒,自动退出登录。其他页面20秒无操作,自动跳转首页。所谓的无操作,包括点击,触摸,滑动等用户行为。这需求其实也很简单,思路就是使用定时器setTimeout设定时间,监听页面是否有点击,触摸,滑动等事件在操作,如果没有,则时间一到,就跳转首页或者退出登录,如果有事件发生,则清除定时器,然后重启定时器那我们先来实现下这个逻辑,先放首页试试<templat原创 2022-01-31 09:52:23 · 3564 阅读 · 0 评论 -
前端使用scp命令部署到服务器
前端使用nodejs scp命令自动部署原创 2022-01-31 09:36:41 · 1691 阅读 · 0 评论 -
js vue 获取服务端返回的文件的原始文件名
前端 js vue 获取服务端返回的文件的原始文件名前端文件下载的几种方式后端直接给文件url,这种情况很简单,直接将url付给a标签,a标签加上download属性即可后端返回的是文件流,但是请求是get请求此种情况下,要获取文件原始文件名,也简单。一种是使用window.open(url),一种是直接将请求地址给a标签后端由于需要,只能使用post请求(比如下载文件时需要携带过多的参数),使用这种方式获取下载文件的原始文件名,比之前两种麻烦些,本文重点说的是这种情况思路如下:原创 2021-11-13 19:23:10 · 2990 阅读 · 0 评论 -
js 获取麦克风权限被拒绝 asyncToGenerator.js?c964:6 Uncaught (in promise) DOMException: Permission denied by
js 获取麦克风权限被拒绝 asyncToGenerator.js?c964:6 Uncaught (in promise) DOMException: Permission denied by system记录一次麦克风权限报错:前端js获取麦克风权限,无法获取,报错asyncToGenerator.js?c964:6 Uncaught (in promise) DOMException: Permission denied by system由于项目使用了ip地址,而且是https的ip地原创 2021-11-13 16:49:58 · 5440 阅读 · 1 评论 -
vue 页面刷新(重置、更新页面所有数据)
这里说的是一种刷新页面的方法。神马情况下你可能会需要?页面内容多,结构复杂,做了某个操作后,需要更新页面很多数据或者比较复杂的数据,例如页面树状结构。这时候直接调接口刷新数据,可能达不到效果,但是如果你手动刷新下浏览器,相当于页面重新渲染一遍,就可以了。当然,我们得尽可能减少要求用户手动刷新页面的操作这里的做法其实很简单,就是建一个空的路由页面,页面在mounted里面接收到传递来的路由参数后,马上返回原页面,这样就实现了刷新效果当然,如果页面使用了keep-alive,估计效果会不太理想这里建原创 2021-06-17 22:09:47 · 2553 阅读 · 1 评论 -
vue 实现顶部tab栏菜单(顶部tab按钮)切换(添加删除nav数据,适配微前端应用,滑动动画,右键菜单弹窗)
先看目标效果图要做顶部tab栏切换,还需要配合菜单。这里主要讲tab栏的实现方式。首先为了在样式效果上实现方便,这里决定使用element-ui的el-tabs标签来做。这样只需要改下样式,其他效果例如切换动画都能保存。当然,除了el-tabs自带的删除等事件,这里还需要添加右键事件,在右键事件里面有关闭全部和关闭其他两个事件选项html和css先来看html部分和css部分<template> <div class="navBar" ref="navBar">原创 2021-06-17 21:52:57 · 3932 阅读 · 1 评论 -
vue 使用html2canvas和jspdf插件将网页保存为pdf
最近有如此需求,需要在页面点击某个按钮后,将该页面部分内容保存为pdf文件,并下载。经过一番查找,并没有找到特别理想的方案。最终使用html2canvas和jspdf组合。思路很简单,就是先用html2canvas将指定容器的html绘制成canvas,然后用jspdf将canvas生成图片,并且塞进pdf文件。下面说下使用方法。安装插件npm i html2canvas jspdf --save编写代码为了个页面使用方便,我们封装一个html2pdf函数,放在util.js中export原创 2021-06-17 20:45:00 · 436 阅读 · 0 评论 -
vue 高德地图Loca.GeoJSONSource、Loca.PolygonLayer绘制3D楼房、AMap.LabelMarker文字标注、Loca.ScatterLayer绘制水波扩散效果
创建地图假设已经正确引入了高德地图,这里使用2.0版本,注意了,1.4.x版本的使用和2.x版本的使用方式不一样。有很多地方不兼容哦。话说3D效果这一块,高德是真比不上百度地图哦,要不是项目一直用的高德地图,怕影响数据,就真想换百度地图了。百度地图有很多地方,地级市县都有3D效果了,但是高德没有。高德只有省会城市有3D楼引入高德地图还需要加上Loca版本,plugin插件里面也要包含Map3D插件。可以参考这里 vue 使用amap-jsapi-loader加载高德地图然后我们创建地图。注意这次我们原创 2021-06-15 22:07:11 · 4102 阅读 · 3 评论 -
vue 使用amap-jsapi-loader加载高德地图
首先安装amap-jsapi-loadernpm i amap-jsapi-loader --save然后在utils中创建amap.js,注意AMapKey是申请高德地图账号后,配置引用的keyimport AMapLoader from '@amap/amap-jsapi-loader';import {AMapKey} from './const-datas'const install = (Vue) => { AMapLoader.load({ key: AMapKey,原创 2021-06-15 21:13:34 · 4896 阅读 · 3 评论 -
vue 高德地图AMap.MassMarks添加海量点标记、AMap.InfoWindow创建自定义信息窗体
高德地图添加海量点标记和创建自定义信息窗体的封装假设已经正确引入了高德地图。那后面就直接看代码<template> <div class="amap" id="amap"></div></template><script>import mapFile from '../../../assets/images/map-filling.png'import mapInfoWindow from "./info-window/info-wi原创 2021-06-15 21:09:08 · 4460 阅读 · 0 评论 -
vue.config.js 实用配置(生成zip文件,生产环境删除console.log,gzp配置,qiankun微前端配置等
vue.config.js 实用配置(生成zip文件,生产环境删除console.log,gzp配置,qiankun微前端配置等使用vue-cli开发项目,免不了需要做些配置。特别是项目比较复杂时。这里列出一些有用的配置。当然,每个项目需求不同,或许对你来说,这并不实用。这里所用的都是基于vue-cli3的配置哦。vue是2.x的。还在用vue-cli2的童鞋,该换新了,比较vue3都出来了,当然了,老项目可能没办法(我说的是没办法去升级成vue-cli3,可能因为时间成本,想要这些配置,也是可以的,只原创 2021-06-13 20:45:26 · 868 阅读 · 0 评论 -
IE,chrome,火狐浏览器在css和js方面的兼容性总结
css盒模型差异盒模型分为标准模型和怪异模型。chrome,火狐浏览器使用标准模型,IE使用怪异模型。在标准盒模型下,width和height是内容区域即content的width和height。而盒子总宽度为在标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)IE盒模型或怪异盒模型显而易见的区别就是,width和height除了content区域外,还包含padding和border。盒子的总宽度为一个块的总宽度= width原创 2021-06-13 18:56:25 · 984 阅读 · 0 评论 -
vue项目优化方案(性能,包体积,页面加载速度等)
vue项目优化方案(性能,包体积,页面加载速度等)项目优化,是一个老生常谈的问题。这里简单总结一下相关方法:1.代码优化,代码模块化,组件分离复用,工具函数抽离,注意代码精简,v-for渲染加上key属性,for循环注意break等。2.路由懒加载。单页应用把渲染内容都放在js里面,下载到本地,然后渲染,如果不使用懒加载,那页面第一次加载时下载的文件会比较大,首屏加载会比较慢。使用懒加载后,生产环境下使用webpack分割打包代码,除了公用的js部分,路由组件js代码只会在该页面加载时才从服务器获取。原创 2021-06-13 18:29:45 · 837 阅读 · 0 评论 -
vue 实现全局使用的loading组件(使用Vue.extend)
vue 实现全局使用的loading组件(使用Vue.extend)在开发中,如果项目比较复杂,那么页面加载往往会有一个小空白时间。当然了,页面加载速度这些我们必须要去优化。但若有时候网络不好了什么的,总之免不了会出现白屏。为了不让用户的内心在这段时间内过于寂寞,我们往往需要给页面加上 loading 小圈圈,告诉用户:我们正在努力拽数据呢,亲,稍等哈~~实现思路其实,写个loadign页面很简单,关键的是如何让使用起来更简单。思路一:可能我们一开始最容易想起来的就是,吧loading抽成一个组件,原创 2021-06-13 09:48:19 · 1309 阅读 · 1 评论 -
vue 前端文件在线预览 vue-pdf 预览pdf文件,mammoth预览docx文件
浏览器在线预览文件,可能基于后端来做效果会更好,前端的话,预览pdf还行,其他就感觉一般了,甚至有的很难支持。本文之说pdf文件和docx文件的预览ps:图片预览就不说了哈,浏览器天然的支持 (=言归正传,其实借助插件,用起来也简单的,麻烦的地方插件都帮你写好了但是插件体积比较大,所以该功能慎用吧,除非真的需要。vue-pdf插件,生产环境生产的插件代码800kb左右,如果项目并么有必须要这个功能,我觉得还是不要用了。基于vue-cli创建的vue项目演示首先安装依赖npm i vue-pdf原创 2020-11-29 16:39:38 · 2327 阅读 · 1 评论 -
vue前端 结合 jszip,file-saver打包下载zip文件
这种打包下载文件,如果后端并没有返回arraybuffer文件格式数据,其实不太建议在前端做,因为前端用url来进行打包下载,还需要再另行发起请求。总之是可以实现的,我们只需要借助jszip和file-saver插件即可下面基于vue-cli创建的项目来说明,我们来看看如何实现。让我们先在项目里安装依赖包npm i jszip file-saver --save axios第一种情况:直接下载文件数据首先看第一种情况,后端直接给我们返回了zip文件格式的数据,那么这个就很简单了,在你需要下载的原创 2020-11-29 15:55:42 · 2311 阅读 · 0 评论 -
vue结合高德地图 vue-amap 实现只显示一个省,地图截图
vue结合高德地图 vue-amap 实现只显示一个省,地图截图奇葩需求!!非要地图只显示一个省,又不喜欢用echarts绘制的那种。就是要地图,然后截出一个省出来。无论是高德地图,还是百度地图,貌似都没直接提供这种功能哦~~折腾了好久终于找到实现方法!可谓思路不对,努力白费!思路就是:查出想要显示的省或市的轮廓经纬度,然后在遥远的地方弄4个点的经纬度(因为地球是圆的),然后把这四个点的经纬度和目标城市的轮廓经纬度放在一起,绘制一个很大很大的覆盖物,地球是圆的,你可以自己想象一下这个覆盖物的样子原创 2020-11-29 13:22:36 · 5709 阅读 · 7 评论 -
vue 配置前端项目npm一键启动,前端项目批量启动
因业务需求,项目需要使用微应用。最后选择了蚂蚁金服开源的微前端框架qiankun。开发过程中发现每天都要同时启动多个项目,打包也得同时打包多个。一个一个点开,再运行命令确实比较麻烦,因此有了一键启动,一键打包的想法。基本思路就是使用node创建多个子流程,然后打开cmd窗口,并且输入设定好的命令,执行。1.创建文件目录首先我们创建一个projects文件夹,里面存放我们需要运行的项目,然后在projects文件夹下使用vue-cli3创建五个项目,分别为test1、test2、test3、test4原创 2020-11-25 21:07:41 · 1875 阅读 · 0 评论 -
vue 自定义v-model 封装地址选择组件,并实现数据绑定和表单验证
vue 自定义v-model 封装地址选择组件,并实现数据绑定和表单验证vue是双向数据绑定的,v-model可以自动搜集数据,这在我们使用过程中可以说是非常方便。但是,在开发中,如果想把代码写的更精简,提供更多的复用。那么我们就免不了想自己封装一个用有v-model属性的组件。(本人工作中,就迫切有这种需求,因为表单页面太大,如果不做封装精简,就算用了element-ui这种已经封装过的框架,页面依然会很庞大!)关于v-model要实现自己的v-model,首先要了解到,v-model实际上是由两部原创 2020-06-25 15:55:49 · 783 阅读 · 0 评论 -
vue 封装自定义日历
vue 封装自定义日历关于自定义日历效果图和功能说明先看看效果图功能说明使用这是props定义接收的参数,每个参数均有注释,这里不多做介绍。更多个性化功能请看slot部分关于自定义日历工作需要,现有框架封装的日历无法满足需求,又找不到更好的插件的情况下,咋办??自己写个呗!效果图和功能说明先看看效果图其实基本界面就这样了,和其他没啥区别。但是既然要单独封装一个,那肯定有其他可扩展的地方,不然就没意义了功能说明1、基本日历功能2、可以自定义标题头部3、可自定义顶部时间以及月份切换部分4原创 2020-06-25 14:02:09 · 623 阅读 · 0 评论 -
vue.js、javascript前端导出excel文件
vue.js、javascript导出excel文件,前端导出excel文件开始尝试新的方法vue创建项目项目需要导出excel表格,本来吧,这些完全可以调后端的接口获取生成好的excel文件,想想多简单方便啊。不过,爱折腾的我放弃了这中简单舒适的生活!况且,有后端小伙伴竟然认为前端无法生成excel文件!作为前端的我可不乐意啦哈!虽然前端在处理文件上的确比不上后端(实话),但是弄个小小的excel文件还是没问题的哦!开始尝试刚开始的时候,用了一个比较简单方便的办法,就是将数据塞进对应的table标签原创 2020-05-24 22:17:30 · 514 阅读 · 0 评论