- 博客(62)
- 收藏
- 关注
RSS订阅
原创 浅谈前端编码思路和编码习惯对项目质量的影响（一）
编码思路和编码习惯，一个容易被开发人员忽略的点。其实对我们的项目质量交付影响很大，特别是要做长期产品的。很多超级Bug项目，都存在大量的问题代码。本文就简单聊聊编码思路和习惯对项目质量的影响
2024-09-04 16:21:41
778
原创 vue3+electron+typescript 项目安装、打包、多平台踩坑记录-mac+linux（包括国产化系统）
vite+electron_vue3。在mac开发环境下打包mac应用，打包linux应用；在linux（ubantu)开发环境下打包linux应用；国产化系统统信、麒麟、深之度等系统应用打包安装
2024-06-03 21:31:00
2254
3
原创 vue3+electron+typescript 项目安装、打包、多平台踩坑记录
vue3+electron+typscript 项目搭建、平台兼容踩坑（win7 32)
2024-05-26 20:59:02
1992
原创 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
6294
原创 Vue2 + JSX使用总结
什么是JSX摘自 React 官方：它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能。Vue 什么时候应当使用JSX这里说的是应当，而不是必须。因为在绝大多数情况下，模板语法都能胜任，只不过写起来看着不太好看而已。或者使用模板语法，那写起来恐怕不是一般的长，而且阅读会费劲很多。下面我们来看下应当使用JSX而
2022-05-28 23:10:25
14060
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
12545
3
原创 vue结合高德地图 vue-amap 实现只显示一个省，地图截图
vue结合高德地图 vue-amap 实现只显示一个省，地图截图奇葩需求！！非要地图只显示一个省，又不喜欢用echarts绘制的那种。就是要地图，然后截出一个省出来。无论是高德地图，还是百度地图，貌似都没直接提供这种功能哦~~折腾了好久终于找到实现方法！可谓思路不对，努力白费！思路就是：查出想要显示的省或市的轮廓经纬度，然后在遥远的地方弄4个点的经纬度（因为地球是圆的），然后把这四个点的经纬度和目标城市的轮廓经纬度放在一起，绘制一个很大很大的覆盖物，地球是圆的，你可以自己想象一下这个覆盖物的样子
2020-11-29 13:22:36
6252
7
原创 vue 根据菜单自动生成路由（动态配置路由）
vue 根据菜单自动生成路由（动态配置前端路由）1.创建项目2.新建文件3.到main.js中4.先把菜单组件写好，到menu.vue中5.注册全局组件6.到router文件夹写好路由模块6.1 base-router.js中写好我们需要的固定的路由6.2 lm-router.js中写动态配置路由的方法6.3 index.js中写路由入口7.容器页和加载页7.1 layout.vue7.2 loading.vue8.写筛选菜单和路由的方法9. 登录成功后生成路由在需要权限控制的页面，往往存在根据用户来显示
2020-11-24 22:55:04
5403
1
原创 告别懵逼——前端项目调试与问题排查方法小结
接手无文档的老项目1、情景描述： 你接手了一个历史久远的项目，项目文档缺失，前任开发者已经离开，而你对当前的业务逻辑和代码结构都不熟悉。然而，线上系统出现了故障，需要紧急解决。项目中出现难以复现的幽灵Bug1、情景描述： 项目中出现了难以捉摸的Bug，相关反馈人员（如测试工程师、实施人员等）无法准确描述或复现问题，这使得问题的定位变得异常困难。不管是哪种场景，我们要解决问题，关键的一点就是必须找到引发问题的地方，以及真正引发问题的原因。
2024-09-03 16:12:03
974
原创 前端组件库自定义主题切换探索-03-webpack-theme-color-replacer webpack 同时替换多个颜色改造
这篇我们来开始改造，让这个插件最终能达到我们的目的：首先修改plugin.config.js。插件首先要在vue.config.js引用注册，因此先对这里做改造。这里我们指定了四种颜色，primary,danger,warning,other，然后生成配置数据，数据格式如下后面的代码逻辑都会根据对象的键名（比如primary）来读取每个键名下面的配置来做批量操作
2023-02-26 20:14:13
1767
6
原创 前端组件库自定义主题切换探索-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
1336
2
原创 前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-01
webpack-theme-color-replacer webpack 的实现逻辑和原理分析追踪
2023-01-09 15:55:14
1991
原创 前端组件库自定义主题切换探索-01-方案借鉴与思路参考
前端组件库自定义主题切换探索，同时改变ant-design-vue和自研组件库主题，并且可以同时定制多种颜色和其他样式的方案研究和探索
2023-01-08 22:15:17
1384
原创 vue 第三方组件按需引入，最后项目的包体积真的变小了吗？
前端打包体积的优化，减少打包体积，也算是前端老生常谈的问题了。我们最常用的方法之一就是按需引入组件！各大组件库，如ant-design，element-ui，都有按需引入的栗子，有些会告诉你，按需引入，可以减少包体积！百度搜索“组件按需引入”，会有一大堆文章告诉你组件如何按需引入，并且大部分都不约而同的复制了这句话：按需引入可以减少打包体积！
2022-09-18 17:46:26
3670
1
原创 Uncaught DOMException: Failed to read the ‘responseText‘ property from ‘XMLHttpRequest‘: The value i
main.js:67 Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json'). at myXHR.get [as responseText] (chrome-extension://nhpjggchkhn
2022-09-05 21:01:32
7940
原创 [Vue warn]: Error in render: “TypeError: renderEmpty is not a function“
[Vue warn]: Error in render: "TypeError: renderEmptthis.configProvider.renderEmpty;而且有意思的是，全量引入ant-design-vue，是没有这个问题的，启用按需涌入ant-design-vue的Select组件，就会报这个错误。首先我们点开报错的index.js。那获取大家就已经恍然大悟了，ant-desgign-vue需要引入语言包。从项目里面点进ant-design-vue 的lib里面，找到打包后的select文件。
2022-08-21 16:15:47
2520
原创 ncaught TypeError: Cannot use ‘in‘ operator to search for ‘configProvider‘ in undefined
ncaught TypeError: Cannot use 'in' operator to search for 'configProvider' in undefined
2022-08-18 16:41:52
705
原创 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
2939
原创 项目配置了eslint,编辑器没有关闭eslint功能的情况下，eslint没有生效
项目中配置了eslint，编辑器也没关闭eslint，却发现编辑器根本没有任何eslint提示编辑器使用webstorm点开elsintrc.js，看到编辑器报如下错误。意思是eslintrc.js有错误点开detail,看到如下报错：报错意思是vue/max-attributes-per-line这个规则配置不对目前代码写法如下：百度搜索vue/max-attributes-per-line配置，得到目前写法如下eslint.vue 网站：https://eslint.vuejs.o
2022-05-28 21:44:11
3695
原创 微前端应用及基于qiankun的微前端实践
微前端概念起源微前端其实是借鉴了微服务的概念，最早是出现在2016年的ThoughtWorks Technology Radar（ThoughtWorks技术雷达）什么是微前端MicroFrontends 官方解释：用来构建能够让 多个团队 独立交付项目代码的 现代web app 技术，策略以及实践方法MicroFrontends 官网：https://swearer23.github.io/micro-frontends/所以微前端并不是一个单纯的技术点，而是一个为了解决复杂应用，特别时便于以后
2022-04-08 16:02:01
4561
2
原创 vue 使用动态路由参数的 keep-alive 条件缓存与三级路由缓存解决
vue 使用动态路由参数的 keep-alive 条件缓存与三级路由缓存解决
2022-01-31 13:37:55
7235
3
原创 vue 由 clearTimeout无法清除定时器引发的vue 周期函数，事件代码执行顺序思考
vue 由 clearTimeout无法清除定时器引发的vue 周期函数，事件代码执行顺序思考最近做个移动的项目，遇到需求：首页无操作20秒，自动退出登录。其他页面20秒无操作，自动跳转首页。所谓的无操作，包括点击，触摸，滑动等用户行为。这需求其实也很简单，思路就是使用定时器setTimeout设定时间，监听页面是否有点击，触摸，滑动等事件在操作，如果没有，则时间一到，就跳转首页或者退出登录，如果有事件发生，则清除定时器，然后重启定时器那我们先来实现下这个逻辑,先放首页试试<templat
2022-01-31 09:52:23
3860
原创 js vue 获取服务端返回的文件的原始文件名
前端 js vue 获取服务端返回的文件的原始文件名前端文件下载的几种方式后端直接给文件url，这种情况很简单，直接将url付给a标签，a标签加上download属性即可后端返回的是文件流，但是请求是get请求此种情况下，要获取文件原始文件名，也简单。一种是使用window.open(url),一种是直接将请求地址给a标签后端由于需要，只能使用post请求（比如下载文件时需要携带过多的参数），使用这种方式获取下载文件的原始文件名，比之前两种麻烦些，本文重点说的是这种情况思路如下：
2021-11-13 19:23:10
3321
原创 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
5950
2
原创 rollup 打包vue3组件库报错 ‘createElementVNode‘ is not exported by node_modules\vue\dist\vue.runtime.esm.js
rollup 打包vue3组件库报错 ‘createElementVNode’ is not exported by node_modules\vue\dist\vue.runtime.esm.js报错意思就是说 createElementVNode 没有被导出。也就是找不到。然后看下面1: import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createElementVNode as _createElem
2021-08-28 09:56:16
9632
原创 使用element-ui table组件 fixed 布局错位
使用element-ui table组件 fixed 布局错位问题原因解决问题使用element-ui table表格布局，头尾列fiexd时，在chrome，火狐，edg浏览器上布局正常，但是在国产浏览器,qq浏览器，UC浏览器，360浏览器上布局错乱。原因因为chrome正常，所以怀疑是国产浏览器的chrome内核版本问题，就查看了一下，qq浏览器是70，uc浏览器55，360是65，而edg浏览器和chrome浏览器内核版本均是92。造成的直接原因其实已经找到了，就是国产浏览器chrome内
2021-08-12 17:44:02
1241
原创 vue 页面刷新（重置、更新页面所有数据）
这里说的是一种刷新页面的方法。神马情况下你可能会需要？页面内容多，结构复杂，做了某个操作后，需要更新页面很多数据或者比较复杂的数据，例如页面树状结构。这时候直接调接口刷新数据，可能达不到效果，但是如果你手动刷新下浏览器，相当于页面重新渲染一遍，就可以了。当然，我们得尽可能减少要求用户手动刷新页面的操作这里的做法其实很简单，就是建一个空的路由页面，页面在mounted里面接收到传递来的路由参数后，马上返回原页面，这样就实现了刷新效果当然，如果页面使用了keep-alive，估计效果会不太理想这里建
2021-06-17 22:09:47
2681
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
4399
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
504
原创 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
4507
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
5355
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
5069
原创 nodejs 学习笔记（3）koa2增删改查接口,get,post,delete,put调用，以及mysql精准匹配，模糊查询条件的封装
现在开始尝试写接口了哦先从一个简单的get请求开始吧。从company模块开始，写一个简单的获取企业信息的接口company.js中const router = require('koa-router')()const msql=require('../mysql/processData')const myCode=require('../utils/code')router.prefix('/company')//获取公司信息router.get('/getCompanyList',
2021-06-14 09:33:26
1299
2
原创 nodejs 学习笔记（2）koa2连接数据库mysql，并封装数据库增删改查
连接数据库的需求是从想写写一个小小的数据查询接口开始的。想从数据库查询数据，就得先连接数据库。这里使用mysql，数据库安装不做赘述。只说在nodejs上的操作安装mysql插件首先要安装Nodejs的mysql插件npm install mysql --save创建连接池项目根目录下新建mysql文件夹，文件夹下新建mysql.js文件项目根目录下创建utils文件夹，utils文件夹下创建code.js，用于定义返回数据的成功失败类型code.js 文件module.exports=
2021-06-13 22:01:35
1863
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人