- 博客(130)
- 收藏
- 关注
RSS订阅原创 vue + less中引入自定义字体文件
项目以vue3 + vite 搭建的为例。注意路径问题。在合适的地方引入定义好的自定义字体。比如main.js、或者是大屏的入口index.vue中。如果是在main.js中引入，则直接使用。下面是在大屏的index.vue中引入：注意：必须要先引入自定义字体文件之后才能使用。.text {/* 字体名 */ font-size : 34px;
2023-07-21 09:48:16
965
原创 pnpm / yarn / npm管理依赖包
pnpm 、yarn、npm管理依赖包。pnpm安装依赖包、pnpm删除依赖包、pnpm更新依赖包。yarn安装依赖包、yarn删除依赖包、yarn更新依赖包。npm安装依赖包、npm删除依赖包、npm更新依赖包
2023-02-24 10:21:24
1831
1
原创 这些lodash方法真香！！
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash官网Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。Lodash 的模块化方法 非常适用于：1、 遍历 array、object 和 string2、对值进行操作和检测3、创建符合功能的函数lodash-es模块使得我们能按需引入lodash对应的工具方法。
2023-01-30 16:39:53
4539
1
原创 多用用js中的?? 和 ?.和 ??= 和 ||=
1、空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。2、可选链操作符 ( ?. ) 允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。3、逻辑空赋值运算符 (x ??= y) 仅在 x 是 nulli
2022-08-09 19:59:10
206
原创 vue3 + vue-cli3/4配置svg文件的全局使用
vue3 + vue-cli3/4配置svg文件的全局使用。svg-sprite-loader根据导入的 svg 文件自动生成 symbol 标签（svg雪碧图）并插入 html。
2022-06-28 20:36:25
1328
原创 vue3+vite配置svg文件的全局使用（想怎么改颜色、宽高都可以）
vue3+vite配置svg文件的全局使用（想怎么改颜色、宽高都可以）1、你是否遇到UI给你切双份icon图（正常显示颜色、高亮显示颜色）？我们前端小伙伴还得做交互引入两个图片，以后修改颜色又要换？好麻烦呀~~~2、是否遇到有时候下载svg下来，想随意更改颜色遇到瓶颈？本来懒人开发原则，还是弄好配置，后面想怎么改就怎么改！！还需要安装一个依赖的插件：vite-plugin-svg-icons用于生成 svg 雪碧图。............
2022-06-28 19:45:18
5791
5
原创 React中引入样式的5种方式（代码举例 & 优缺点）
1、引入外联样式2、内联样式3、声明式内联样式4、CSS Modules模块化5、CSS-in-JS模式（Styled-component）
2021-07-19 16:38:29
9783
原创 React Hook组件间传值的四种方式
父组件传值给子组件（props）父组件给后代组件传值（context）父组件调用子组件的函数（useImperativeHandle & forwardRef）子组件传值给父组件（回调函数）
2021-07-06 17:33:45
10470
3
原创 window操作系统安装多个版本的nodejs——nodejs版本控制工具nvm
在学习前端框架时，有时候某些框架对nodejs的版本有要求。但此时你的电脑上已经安装了10.x版本的nodejs，你不想直接更新到12.x，想同时保存10.x和12.x版本，在必要的时候随时能切换nodejs版本。那么nvm工具了解一下。一、首先要下载nvm下载地址：nvm官网1、选择合适的安装包下载博主还是比较喜欢安装.exe版本的，这样在安装过程中手动选择安装路径啥的也还不错。可以自行选择下载那种类型的安装包。下载好之后点击.exe文件进行安装。配置在下载nodejs包的时候通过淘宝镜像，
2021-07-01 20:59:29
10027
8
原创 前端使用mockjs模拟接口数据
在前后端分离开发中，有时候后台开发比较慢还没有给回接口给前端，那么这时我们可以自己模拟数据（也就是mock数据）。当然可能你会想到我新建个js文件，把数据模拟好导出再引入请求就可以啦。这个方法虽然可以，但是接口多的时候，需要模拟的数据多的时候就很不方便了，要来回修改差异，效率很低。现在学会使用mock.js拦截ajax请求，更加方便简洁的构造你需要的假数据。这里提醒一下，mockjs模拟的接口地址最好不要和后端给你的一致，不然到时候你忘记把mockjs去掉的时候，请求得到的还是拦截的假数据（或者可能会
2021-06-23 16:40:03
3107
2
原创 前端js实现文件下载——两种方式
前端选择使用哪种方式来进行下载动作，需要和后端进行协商。如果后端接口直接返回下载文件，那么前端就使用get请求url的方式进行下载如果后端接口返回的是Blob文件流，那么前端就使用ajax进行请求得到响应Blob数据进行处理后下载模拟form表单提交进行下载（实际开发一般不用）1、后端接口直接返回下载文件const downloadDialogue = (url, params) => { let result = ''; Object.keys(params).forE
2021-06-22 17:40:00
3047
原创 Array.reduce()——收集
自从学会了 Array.reduce() ，再也离不开它以前我没得选，现在我只想用 Array.prototype.reduce25个你不得不知道的数组reduce高级用法使用Array.reduce创建Promise回调链Array.prototype.reduce 实用指南
2021-06-21 14:41:18
105
原创 前端需要了解的nginx配置——收集
如何在NGINX中部署多个前端项目前端开发者必备的nginx知识前端开发者必备的Nginx知识及应用手把手搭建nginx服务器，部署前端代码前端leader进阶指南-nginxNginx 配置详解一文彻底读懂nginx中的location指令nginx全局变量 $args：这个变量等于请求行中的参数，同$query_string。 $is_args: 如果已经设置$args，则该变量的值为"?"，否则为""。 $content_lengt
2021-06-21 14:37:55
302
原创 npm run eject后的create-react-app项目自定义eslint配置方式
前言：当我们需要对create-react-app项目的配置进行高度修改的时候，我们需要npm run eject，把配置文件都暴露出来。这时候如果我们想要在项目中配置自定义eslint，可以参照以下步骤进行。一、首先检查是否安装了 eslint和babel-eslint查看package.json文件，一般npm run eject之后都会看到已经安装了。如果尚未安装，则需要安装。全局安装：npm install eslint babel-eslint -g当前项目安装（推荐）：npm
2021-05-10 17:56:04
951
1
原创 git分支管理和git提交规范
一、git分支管理一般情况下的分支管理如下：master分支：一般用于存放正式环境上的代码，每次发版到正式时才更新，其他时间不允许修改。（每次发版后可以打个tag，标记这次大版本的发布。如果有重大bug修复发的小版本可以打大版本下的小版本tag）bug分支：万一正式环境出现严重bug妨碍使用时需要创建个bug分支进行修改，然后同步到release分支进行测试。测试后再同步到master分支发布，然后还要同时同步到iteration分支、develop分支release分支：测试环境上的分支，开发完所
2021-04-20 22:03:42
3092
原创 @vue/cli创建的vue3 / vue2项目迁移到vite上
一、迁移过程vite官网：点击这里兼容性注意：Vite 需要 Node.js 版本 >= 12.0.0。1、创建vite项目npm init @vitejs/app根据提示把项目名、选择创建的项目类型(我们这里选vue)，语言(javascript)2、把vue/cli创建的vue3项目中package.json依赖包搬到vite的package.json中搬完了之后记得使用 npm install安装依赖包。3、把vue/cli项目中的src目录整个搬到vite项目中替换掉src
2021-04-17 22:09:17
5485
5
原创 vue 和 react发展史、设计思想及维度
一、Vue和 React设计思路1、vue1.1 vue1.x只有响应式通知。1.2 vue2.x在vue1.x中如果项目很大的时候，响应式对象很多的时候就会导致性能很好，页面卡顿的情况，所以在vue2.x的时候引入了vdom。响应式和vdom进行配合，性能的到了很大的提升。那么如何配合呢？就是通过组件划分，组件之间通过响应式通知更新数据，组件内部通过vdom计算diff。vue2.x中vdom同级比较复杂数组结构时使用双端预判的算法，减少循环diff的次数。vue2.x中的静态标记只
2021-04-11 00:05:51
1128
2
原创 React项目开发过程中需要注意避免re-render——React性能优化方案
1、PureComponent和shouldComponentUpdate 2、多挖掘能使用useRef的地方3、正确使用useEffect的第二个参数4、使用React.memo来控制整个函数组件的渲染时机5、使用 useMemo() 进行细粒度性能优化6、useCallback7、避免更改你正用于 props 或 state 的值8、合理拆分组件9、其他非re-render的性能优化点
2021-04-01 17:50:50
1729
2
原创 js限制Promise“并发”的数量——React项目实践
前言：1、浏览器对同一域名下同一时间点的最大连接数做了限制，谷歌是6个，其他浏览器可百度查看相关资料。2、浏览器同一时间点内发送的请求过多，会导致请求很慢页面卡顿的情况解决问题1、封装限制Promise异步任务并发请求数核心函数也就两个。调用器：就是把真正的执行函数和参数传入，创建返回一个新的Promise，而这个新Promise的什么时候返回，取决于这个异步任务何时被调度。Promise内部主要就是创建一个任务，判断任务是执行还是入队。创建任务：实际上就是返回了一个函数，将真正的执行函数放在
2021-03-28 22:21:36
1023
原创 React项目中实现axios路由跳转取消上个路由页面的所有请求 和 取消当前路由页面的重复请求
一、 抛出问题1、当一个页面的请求过长时，点击了跳转路由到新的页面，但是上一个路由的请求结果在当前路由页面提示，非常难看且容易让客户混淆。（所以需要路由跳转取消上个路由页面的所有请求）2、在当前页面某个请求长时间没拿到返回结果，然后用户又点击发起了相同请求，这时有可能后发送的请求返回的数据被先发送的请求覆盖，这样就得不到最新请求数据了。（所以需要取消当前路由页面的重复请求，以保证后发送的请求返回的数据不会被先发送的请求覆盖）3、上面两种情况都会浪费网络资源二、解决问题1、我们在axios封装文件a
2021-03-28 21:17:47
2937
原创 js树结构数据的递归操作
1、获取树中的所有祖先节点名称2、根据过滤条件筛选出需要留下节点的树结构数据3、获取树中叶子节点的总个数4、重新组合树结构中的数据5、根据id和pid把json结构 转 树状结构
2020-09-07 18:07:11
21101
转载 ES6、ES7、ES8、ES9、ES10新特性及其兼容性
强烈推荐阅读一篇文章，也是自己为了做保存把地址贴到自己博客，大家一起学习：https://juejin.im/post/5dda2b5e6fb9a07a83691766
2020-05-14 18:10:13
1817
1
原创 js自定义localStorage的过期时间----完整代码解析
前言：我们知道localStorage如果设置了，那么默认是永久有效的，除非手动进行删除。手动删除：可以在谷歌浏览器控制台的Application => Local Storage 中找到自己要删除的文件/域名中的某一项数据双击进行清空删除即可。自定义过期时间：默认localStorage的api中时不支持设置过期时间的，所以我们只能对localStorage进行二次封装。自定义过期时间实现的思路：1、在设置localStorage数据的时候传入过期时间参数，然后自定义个键名来保存过期时间
2020-05-14 16:33:51
1522
转载 设计模式之工厂模式——js实现
工厂模式又可以分为：简单工厂、工厂方法、抽象工厂。一、简单工厂简单工厂模式：又叫静态工厂方法，由一个工厂对象决定创建某一种产品对象类的实例。主要用来创建同一类对象。实例1：比如我们玩游戏的时候，通常会有多种角色，每个角色又有自己的技能。var Warrior = function () { this.name = '战士' this.skill = ['刺杀', '十字斩']}Warrior.prototype = { work: function () { console.l
2020-05-08 22:47:16
277
原创 js常用的正则表达式收集
正则表达式在线校验地址：https://tool.oschina.net/regex/1、邮箱正则const emailReg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/2、手机号正则const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/3、IPv4地址正则...
2020-05-08 15:49:09
181
原创 js判断pc端各类浏览器类型
前言：pc端的浏览器众多，有时候兼容性不太一样，那么我们就需要判断下浏览器的类型来做兼容性处理。我特地下载了常用的浏览器来进行测试，注意这里我并没有测试各浏览器的各个版本，只是就当前下载的版本来测试的。可能会存在低版本校验不正确的情况，所以如果需要测试自行按照下面的方式进行测试判断。主要是判断navigator.userAgent中每个浏览器信息独特存在的信息。下面进行测试的浏览器有：火...
2020-04-30 15:06:23
670
2
原创 封装websocket请求-----vue项目实战（完整版）
前言：如果项目中多个组件都使用到WebSocket请求，那么我们需要对WebSocket进行封装，方便我们使用。下面我根据我的项目结构来创建文件和引入文件，大家注意一下自己项目结构。一、在utils目录下创建websocket.js文件import { Message } from 'element-ui'import { getToken } from '@/utils/authTok...
2020-04-27 17:48:59
21140
38
转载 移动端开发常用布局—flex弹性布局总结
刷资料的时候看到一篇比较好的flex弹性布局总结介绍，这里推荐给大家一起学习一下：https://baijiahao.baidu.com/s?id=1662580228975733473&wfr=spider&for=pc
2020-04-08 15:25:01
203
原创 vue中实现axios路由跳转取消上个路由页面的所有请求 和 取消当前路由页面的重复请求
一、 抛出问题1、当一个页面的请求过长时，点击了跳转路由到新的页面，但是上一个路由的请求结果在当前路由页面提示，非常难看且容易让客户混淆。（所以需要路由跳转取消上个路由页面的所有请求）2、在当前页面某个请求长时间没拿到返回结果，然后用户又点击发起了相同请求，这时有可能后发送的请求返回的数据被先发送的请求覆盖，这样就得不到最新请求数据了。（所以需要防止当前路由页面的重复请求，以保证后发送的请求返...
2020-03-30 18:35:38
2444
原创 echarts扇形图（饼图）常用的配置
1、效果图：2、完整代码：（可以直接贴到echarts官网进行测试查看效果）option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c}%' }, legend: { orient: 'vertical', ...
2020-03-30 16:02:53
4385
原创 vue中使用markdown编辑器代码详解
编辑器效果图1、安装插件cnpm install mavon-editor -S2、在main.js中引入插件import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'Vue.use(mavonEditor)3、在组件中使用< mavon-editor />组件来显示编...
2020-03-11 22:30:21
1071
原创 @vue/cli4.x版本的vue.config.js常用配置
设置访问端口号、访问IP地址、路径别名const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { lintOnSave: 'error', // 设置eslint报错时停止代码编译 productionSourceMap: f...
2020-03-11 17:59:42
9728
原创 elementUI的DatePicker+DateTimePicker组件的自定义日期禁用
一、DatePicker日期选择器的起止时间禁用时间禁用需求：1、开始时间不能大于结束时间2、禁用当前时间的前30天3、开始时间和结束时间只能选择间隔7天时间4、禁用当前时间之后的时间效果图：详细代码：ps:disabledDate函数中的代码你们可以封装到method中，然后在disabledDate函数中这样就不会让data中的数据那么凌乱又长。<el-date-p...
2020-01-03 18:28:18
3022
原创 vue中处理echarts因v-if切换后图形显示异常+实现echarts监听窗口变化而改变大小
一、处理echarts因v-if切换后图形显示异常有时候我们需要在一个页面中使用v-if来显示不同的两个图表。视觉效果上好像是从一个页面点击链接跳转到另一个页面，但其实原理是通过销毁和重建两个不同dom容器来实现这个效果。可能会出现的问题:在切换到另一个图表显示的时候，改变了窗口宽度高度，那么点击返回按钮时看到原先的echarts图形就会有一部分消失显示不完整了。解决办法：我们需要在返...
2019-11-12 14:44:44
3624
2
原创 Echarts实现中国地图线路图特效（一对多发射点）
1、效果图2、完整配置代码可以把代码直接贴到官网测试效果：https://www.echartsjs.com/examples/zh/editor.html?c=map-polygon// 中国地图线路特效配置 startlet geoCoordMap = { // 地图地点的经度纬度 '上海': [121.4648, 31.2891], '东莞': [113.89...
2019-10-29 14:43:55
8630
10
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人