- 博客(13)
- 收藏
- 关注
原创 React和Vue状态管理的区别
前端实例数据共享,vue有vuex而react则有redux,mobx等等。使用vuex进行状态管理我们现在vue项目,均采用vuex来做全局的状态管理,简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、进行修改,并且你的修改可以得到全局的响应变更,下面我们看看在项目中怎么使用它作状态管理,在此之前先看看vuex工作流程图。 ...
2019-06-11 19:46:39 948
原创 vue3 setup学习之[封装element-plus中的table]
上篇文章对element-plus中的搜索条件el-form进行了封装,下面将对elementplus中的el-table表格进行封装,以支持el-table-column以数组类型输入,且支持类似于vue2中自定义操作的render渲染,vue3中使用动态component和h函数来实现,实现效果如下:效果图。
2024-04-11 16:38:22 332 1
原创 js 节流函数原理分析,及call和apply函数的理解
其中args = arguments为函数调用时传入的参数;call和apply函数都是用来改变this指向,唯一区别就是参数不同。如果你将这个返回的函数赋值给某个对象的属性,并通过这个对象来调用它,比如。在JavaScript中是一个动态的值,它基于函数的调用方式。可以有效减少页面的性能消耗和网络传输次数,提高用户的使用体验。如果你直接调用这个返回的函数,比如。的含义取决于你如何调用返回的函数。将指向全局对象(在浏览器中是。,那么在这个新函数的内部,那么在这个新函数的内部,),除非在严格模式(
2024-04-08 17:09:47 284
原创 vue3 setup学习之[封装elementplus中的el-dialog弹窗]
弹窗和表单的封装,应方便业务使用,包括含有form表单的新增和编辑业务,入参包括各种表单元素、校验规则rules、标题等,配置好入参渲染即可使用。后台管理系统中,会经常性的出现各种增删改查业务,表单使用较多的地方。在业务页面中,引用封装好的PageModal组件。其中的modal.config.ts代码如下。PageModal.vue中type.ts。
2024-03-22 14:33:01 309
原创 vue3 setup学习之[mixin]
由于vue3 setup中没有像vue2中的mixins: []混入,因此需要手动实现它 见代码清单form-table.d.ts文件。针对一般的后台管理系统,会在大量的页面中出现搜索查询功能,此时如果需要封装这些表单和查询条件,则需要采用mixin原理来实现了。在页面中改如何使用它呢,在页面中先引入解构后,在组件中即可使用混入的封装的方法和对象。
2024-03-13 17:23:37 375
原创 前端性能优化(分包打包)
当前问题是:webpack2默认配置打包(将使用到的node_modules架包)打到一个文件vendor中去了,导致首屏加载文件大、速度非常慢。当然webpack3及以上版本自身做了优化,使用split已经进行了分包,不需要再做分包处理了。(1) 第一步,在webpack.test.conf.js中生成manifest.jsnew webpack.optimize.CommonsChunkPlugin({ name: 'manifest', filename: 'manifest.js...
2021-09-24 10:33:37 2279
原创 初识Hooks状态
在Hooks中使用状态state,设置状态后,状态并不会同步更新,这时可采用以下三种方案。1 添加一个 副作用(useEffect())2 使用函数形式设置状态3 使用useRef设置状态
2021-07-15 16:35:33 182
原创 Cli项目兼容ie9及以上浏览器
最近翻看原来的代码,发现在ie浏览器下出现空白,心里想着ie虽然份额在减少,但是技术上能解决当然最好了,于是开始检查配置文件,发现配置文件已有babel-polyfill要解决ie兼容性问题,单单有babel-polyfill还不行,还需要babel-loader安装:npm install -D babel-loader @babel/core @babel/pr...
2020-05-07 11:15:13 517
原创 Webpack实际项目打包文件解析
webpack版本2.6+以上 公共文件采用DllPlugin打包配置写在webpack.dll.js文件内,分为三个模块,打包dll后,修改业务代码就不需要重新打包,提高打包速度。第一个模块为兼容性组件shim.dll.js,它包括ie兼容性组件,热部署刷新组件,支持 react16 所必须组件,支持 antd 所必须组件shim: ["console-polyfi...
2020-05-03 01:20:34 388
原创 前端性能优化(gzip压缩和按需引用)
某次,打包上线后页面需要几十秒才加载出来,看着实在受不了,开始优化页面主要做了以下三点1) cdn缓存js文件,如vue axios vue-router均采用cdn引入。2) element antd等ui框架的组件按需引用 Only import the components you need。import { Button, message } from 'ant-d...
2019-09-16 15:36:17 699
原创 Vue下使用Echart绘制树形关系图谱
某日接到需求说做个这样的关系图前期因为用到echart,所以没有考虑别的d3.js来实现,主要是节点的更新,echart2有refresh来实现,但是在echart4已不存在该方法,于是用setOption来重新渲染Tree数据,同层级之间的距离一直不好设置,如果数据节点过大的时候会出现重叠的烦恼。解决问题1,使用自定义节点图片;解决问题2,当节点数量过多时,初始化节点全在当...
2019-06-25 16:00:49 8363 4
原创 前端读取指定文件夹的文件
在写前端UI文档说明手册时,发现项目中需要弄很多的md文件,用于演示,这时在webpack.base.conf.js中写了一段webpack.base.conf.jsconst fs = require('fs')const fileArray = fs.readdirSync('./examples/docs')/*** * 缓存md文件 * @returns {string}...
2019-06-14 11:20:11 3826 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人