- 博客(30)
- 收藏
- 关注
RSS订阅原创 vue脚手架增加自动打入环境变量publicPath、baseUrl等功能
，减少了很多重复的工作量，特别对于ui定义化的统一样式，通过外部变量修改的方式已经远远达不到ui的效果，我基于源码（增加内置变量、修改内置变量、直接修改组件内部样式等方式）去维护了一些统一化的样式（基于默认大小）排除文件xx.zip、xx，例如项目叫web-admin，以上变量都是admin，我就在想每次创建项目去改这些实在太麻烦了，有没有更方便的方式。中就是文件映射和打包后文件赋值给了环境变量，baseUrl也是同理不重复举例了，别忘了404界面如果写了返回，开发环境返回的也应该是。
2023-10-19 15:59:47
332
原创 vue2 keepalive多层缓存bug以及清除缓存
直接删除keepalive缓存，网上很多方法都是复制粘贴，实际场景复杂的很多，例如我这里的嵌套routerview，网上直接通过vnode.parent根本拿不到keepalive的vnode，并且我子routerview没有绑定key，根本没办法和根节点的routerview的key映射上，而且我的routerview外面套了层transition，导致keepalive的key前面也多了transition的标识符。没有一个合适的方法适合我的业务场景。首次A进入B，B进入C，C返回B，都没有问题。
2023-10-18 15:49:26
599
原创 chrome49中存在的各种隐晦的兼容问题
关键的flex，原项目中写了大量的height:100%，后续接手我们选择进行了flex + flex-1 改造，高度通过flex-1继承，但是并没有删除原有的高度属性，最新浏览器中无异常，在49环境中，高度的优先级目测大于flex-1，flex-1不生效了，删除所有flex元素上的hegiht属性，页面正常。
2023-06-16 13:49:53
1001
4
原创 前端不使用插件将git版本注入到项目中
已知：前端版本关联git分支名，且项目走gitlab自动化，可以使用git拦截器插件结合webpack去做，但我觉得用插件好像太笨重了。需求：实施在部署前后端时存在未取到最新包，且由于业务水平不同，可能会浪费大量时间，需要直观告诉实施当前的前端版本。方法：可以利用yml自动化构建build后在打包后的html最后注入script脚本，以下为关键代码。
2022-11-23 16:55:19
190
1
原创 vue3.2 + elementplus 2.+构建项目兼容chrome49存在的问题
一. 使用vue3.2 + elementplus 1. 尝试发现：el-cascader 筛选插件点击无响应且表单样式错乱解决方案：换elementplus2.+二. 使用vue3.2 + elementplus 2. +尝试发现：el-cascader 可以使用但是2重构了很多样式，例如已知1是使用broder做的input的边框，2采用了box-shodow，其中box-shodow中使用var嵌套的写法貌似在chrome49不兼容解决方案：先重写了一些使用box-shodow的组件样式
2022-07-05 20:09:14
3285
3
原创 根据后端传入颜色，前端实现主题色的切换，结合websocket,可以实现前端根据天气，黑夜白天动态切换主题颜色，当用户查看网站时，使用动画过渡切换颜色
element、vant已经成功实现demo：我给ws写了个轮询测试主要是看了element-admin实现的切换皮肤,刚好有个手机端有这种需求,除了是后端传入，看了下，还真能实现主要思路就是通过less或sass 修改默认颜色 例如vant的默认颜色是@white，通过export导出存入vuex，修改vuex触发事件请求云端的同版本css，然后正则将默认颜色改成配置好的颜色，放入head的style中，这是element的思路，真的太骚了。具体实现(vant)：1.首先我的ws，随便写的c
2022-04-13 20:08:51
2118
原创 初识vue3
以前面试总是从方面说vue3采用了es6的proxy进行对数据的检测，其实vue3小变动还是挺多的-vue2-vue3created 和beforeCreatedsetupcomputedcomputedmoutedonMounted(()=>{})this.$refrefwatchwatch(()=>x,(new,old)=>{})\watchEffect(()=>{}) 监听数据不需要写明监听谁data ret
2022-03-03 14:38:57
681
原创 Angular初识
与vue不同的是ng使用了ts做语法支持，vue还没有说非ts不可，我是觉得它有react类组件的样子，也有vue指令的影子-angluar-vue*ngForv-for*ngIfv-if(click)@click[msg]=“msg”:msg=‘msg’#appSons@\appSons=’#appSons’*ngSwitch\[(ngModel)]v-model[ngClass]、[ngStyle]:class、:style
2022-03-03 13:17:34
362
原创 el-cascader级联二级选择图片
示例图：// vue部分 <el-cascader v-model="scope.row[item.prop]" :options="typeOptions" :show-all-levels="false" :props="{ value: 'dictValue', label: 'dictLabel', key: 'id', emitPath: false }"
2022-02-09 15:14:33
1084
原创 VUE路由点击URL改变 但是页面没有重新渲染
路由点击URL改变 但是页面没有重新渲染在处理商城项目，根据id获取相似商品，再通过路由点击跳转时，路由发生了改变，但是页面却没有重新渲染router.go(0)会丢失高度,不采取该方法，使用以下代码，在router-view上添加:key="$route.fullPath" 完美解决，原因大概是VUE为了节约性能<router-view :key="$route.fullPath" />...
2021-04-02 22:21:37
3097
4
原创 swiper插件异步问题导致静态图片可以正常使用，动态图片第一张和最后一张无法点击轮播
查阅资料发现可能是axios异步问题，swiper获取的是我data中空数据修改方法一：<swiper :options="swiperOption" ref="mySwiper" v-if="data.length>1">我用这种方法的确没问题，但是控制台会报错查阅论坛找到第二种方法先在data中定义 ok:false在axios的接收中修改ok为fase<swiper :options="swiperOption" ref="mySwiper" v-if="ok
2021-02-23 22:29:18
367
原创 VUE制作标签页面，重复点击报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题
应该是router版本太高的问题如果是push方法，在router文件里的index.js加入const VueRouterPush = Router.prototype.pushRouter.prototype.push = function push (to) { return VueRouterPush.call(this, to).catch(err => err)}如果是replace方法，在点击方法中加入(自行更改判断条件)itemClick(){ if(th
2021-02-20 11:49:22
135
原创 浅谈前端渲染和后端渲染
什么是前端渲染 什么是后端渲染顾名思义 数据在后端渲染完毕后才传给前端叫做后端渲染，这个方式存在于jsp/php时代后端路由：后端处理url和页面之间的映射关系这种情况下渲染好的页面不需要单独加载css和js，直接在浏览器中显示，有利于seo优化直到出现ajax，前后端开始分离，前端渲染就是前端通过js文件执行获取后端的数据然后渲染到页面上，这种方式是前端渲染前端路由：用来管理页面，每一个url管理一个页面组件spa页面 一般情况下整个项目只有一个html页面 它最大的
2021-02-20 11:40:18
397
1
原创 浅谈vue生命周期的理解
什么时生命周期一个事物从诞生到消亡，vue的生命周期就是 vue从创建到销毁之间的各种事件也可以说是生命周期钩子创建时候的生命周期函数=》运行期间的生命周期函数=》销毁期间的生命周期函数首先vue在new之后会先初始化事件和生命周期函数，然后遇到第一个生命周期函数beforeCreate，意味着示例创建完毕，但是这个时候data和methods都没有被初始化遇到的第二个生命周期函数是created，这时候data和methods都被初始化了，如果要调用方法或数据，最早只能在这里接下来vue开始进
2021-02-20 11:34:10
134
原创 JS实现侧边栏点击回到指定位置的功能
DEMO代码写的不太好，大佬可以帮忙修改修改哈<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>&.
2021-01-10 16:04:52
919
4
原创 使用js完成简单的切换标签功能
使用js完成简单的切换标签页功能1.话不多说，咱先上demo，写的比较随便，二三界面并没有完善，但是主要咱们看功能，我这里写的是手机项目，基本这种需求也就是手机界面比较常见，其实纯css也能实现上图中所有的动态效果，我之前写过一篇css切换标签页的文章，有需要的可以去看看，轮播图以后也会出一篇css与js的文章2.首先css我不多说了，起名要有顺序 关键的地方我在下面标注下一共6张图片 3张点击前的 3张点击后的三张点击前图片我的命名方式都是从1到3 方便for循环遍历到三张点击后的图片也是如此
2020-12-23 23:21:07
1300
原创 js中this指向的判断方式
js中this指向的判断方式在全局中的this指向的window在箭头函数中如果没有this使用的上一层的this在function中的this 谁触发了函数指向谁构造函数中的this new触发了函数 指向的是实例化的对象 如下指向是resvar res= new Psersoncall bind apply触发的 指向参一foo.bind(obj2)指向obj2但没有执行函数foo.bind(obj2)()指向obj2且执行函数obj.foo.apply(obj
2020-12-18 19:19:53
157
原创 作用域，作用域链，执行上下文，执行上下文栈的理解
作用域，作用域链，执行上下文，执行上下文栈的理解在学习作用域，作用域链，执行上下文，执行上下文栈等概念时，发现有很多概念很相似，顾产生了一些混淆，写此篇文章旨为梳理一下js引擎的执行顺序，理清一些概念，可能文章会有一些错误，望理解与改正首先理解一下层级关系 在运行代码前会产生【准备工作】，就是创建执行上下文，执行上下文存在【作用域链】，变量对象AO/GO、this指向，所以我们知道了作用域链是在执行上下文产生后，函数运行前产生的，先不管作用域链，我们回到执行上下文，执行上下文首先会遇到全局创建全局执行
2020-12-17 23:28:57
225
1
原创 浅谈深浅拷贝
深浅拷贝的区别深拷贝和浅拷贝的区别深拷贝不会改变原来的元素，浅拷贝改变原数据或者拷贝后的数据，另一个数据都会发生改变深拷贝和浅拷贝分别发生在哪里深拷贝发生在基本类型中浅拷贝发生在引用类型中为什么会造成深浅拷贝因为基本类型的数据存放在栈中，可以理解为每一个元素对应一个房间，改变一个元素的内容并不会影响到另一个房间内元素的内容引用类型的数据则不同，存放在堆中，堆中存放的是数据仅仅是在在栈中进行了引用，并没有改变原房间内的内容，指向的数据源是同一个，想要深拷贝引用数据，只能在内存中开辟一个新的
2020-12-10 20:18:37
109
原创 封装一个方法（获取自定义格式的时间）
封装一个方法（获取自定义格式的时间）// 日期格式化方法// package_data_format/** * @param {YYYY-MM-DD hh:mm:ss} fotmat */function package_data_format(fotmat) { var nowData = new Date() var dateobj = { YYYY: nowData.getFullYear(), MM: nowData.getMonth(),
2020-12-10 20:02:22
169
1
原创 js排序的几种方法
js排序的几种方法使用sort进行排序 var arr = [1,2,4,6,4,6,3,6,8,54,4,565,54] var res = arr.sort(function(a,b){ return a-b }) console.log(res) // sort 降序 var res2 = arr.sort(function(a,b){ return b
2020-12-10 19:55:22
366
原创 使用js获取当前时间且按照格式输出
使用js获取当前时间且按照格式输出1.首先先创建一个对象存放所有获取的时间var date = new Date();var obj = {YYYY:date.getFullYear(), //获取了年 对应key:YYYYMM:date.getMonth()+1, //获取了月 对应key:MMDD:date.getDate(), //获取了日 对应key:DDhh:date.getHours(), //获取了时 对应key:hhmm:date.getMinut
2020-12-03 19:57:36
2093
原创 使用js实现验证码功能
使用js实现验证码功能通过随机数可以做到生成随机数的功能如果设定了一段固定的字符串，通过随机数确立可以确定随机索引值，那么就可以生成特定数据内的随机数实现：定义数组：var str =‘abcdefghijklmnopqrstuvwxyz1234567890’;定义存放验证码的变量: var res ="";for(i<0;i<6;i++){// 需要几位随机数就循环多少次var a =parseInt( Math.random()*str.length)//parseInt
2020-12-03 19:36:21
1241
原创 js基础：使用AO和GO判断执行顺序
使用AO和GO判断执行顺序一.首先理解全局变量和暗示全局变量1.全局变量：含有声明的变量eg：var a = 10;2.暗示全局变量：不含有声明就赋值的变量eg：a = 10;二.其次理解全局变量和局部变量1.全局变量：函数体外声明的变量称为全局变量2.局部变量：函数体内声明的变量称为局部变量三.知道AO的执行顺序AO用来判断函数体内的执行顺序，通常分为四个步骤1）首先创建AO对象（执行期上下文）2）找到形参和变量声明，将变量与形参名作为AO属性名，值为undefined3）将实参
2020-11-25 23:34:00
335
原创 纯css实现切换标签效果
纯css实现切换标签效果一.首先上demo如图所示：点击第一个按钮显示按钮样式改变，弹出第一个界面；点击第二个按钮改变按钮样式，弹出第二个界面，实现的主要方式要看我们对input的了解程度二.实现原理1.首先创建div，为div添加宽高，设置div为相对定位的元素2.创建两个type为radio的input，给两个input一个相同name，让它和同级的lable绑定，注意input要display:none掉，因为input即使没有了位置，但是它的点击事件依旧存在于label内，此时的labe
2020-11-24 21:19:56
1709
原创 Git的使用以及命令
Git的使用以及命令1.安装git2.在开始菜单中找到 git base3.配置用户名以及emailgit config --global user.name “name”git config --global user email “email”计算机中所有git仓库都以该账户名、账户邮箱为默认配置4.创建git仓库1）创建一个git文档目录2）在目录中运行git base命令行（可以右键使用git base命令行打开）3）输入git init 命令创建仓库（得到一个默认隐藏的.git
2020-11-24 19:55:31
1044
原创 BFC的概念？ 规范是什么？ 生成？作用？ 有什么缺点？
BFC的概念？ 规范是什么？ 生成？作用？ 有什么缺点？1.bfc全称Block formatting context，块级格式化上下文，字面理解就是一个独立渲染的区域，里面的内容不受外界的影响。2.一般设置了浮动，绝对定位/固定定位、dispaly的值为inline-block、table-cell、flex…或者元素设置了overflow的值除visible的情况下会产生。3.一般用于清除浮动、设置左边固定大小，右边自适应布局，margin之间的层叠问题。4.缺点的话因为我没有找到其他文献，我猜
2020-11-19 21:08:00
910
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人