vue
YoungDoCui
这个作者很懒,什么都没留下…
展开
-
前端不使用插件将git版本注入到项目中
已知:前端版本关联git分支名,且项目走gitlab自动化,可以使用git拦截器插件结合webpack去做,但我觉得用插件好像太笨重了。需求:实施在部署前后端时存在未取到最新包,且由于业务水平不同,可能会浪费大量时间,需要直观告诉实施当前的前端版本。方法:可以利用yml自动化构建build后在打包后的html最后注入script脚本,以下为关键代码。原创 2022-11-23 16:55:19 · 210 阅读 · 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 · 3542 阅读 · 3 评论 -
浅谈ssr
原创 2022-04-13 20:32:10 · 240 阅读 · 0 评论 -
根据后端传入颜色,前端实现主题色的切换,结合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 · 2169 阅读 · 0 评论 -
初识vue3
以前面试总是从方面说vue3采用了es6的proxy进行对数据的检测,其实vue3小变动还是挺多的-vue2-vue3created 和beforeCreatedsetupcomputedcomputedmoutedonMounted(()=>{})this.$refrefwatchwatch(()=>x,(new,old)=>{})\watchEffect(()=>{}) 监听数据不需要写明监听谁data ret原创 2022-03-03 14:38:57 · 721 阅读 · 0 评论 -
devServer中before设置mock与真实后端会产生bug
devServer中before设置mock与真实后端会产生bug原创 2022-02-16 10:54:06 · 2093 阅读 · 2 评论 -
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 · 1127 阅读 · 0 评论 -
VUE路由点击URL改变 但是页面没有重新渲染
路由点击URL改变 但是页面没有重新渲染在处理商城项目,根据id获取相似商品,再通过路由点击跳转时,路由发生了改变,但是页面却没有重新渲染router.go(0)会丢失高度,不采取该方法,使用以下代码,在router-view上添加:key="$route.fullPath" 完美解决,原因大概是VUE为了节约性能<router-view :key="$route.fullPath" />...原创 2021-04-02 22:21:37 · 3188 阅读 · 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 · 420 阅读 · 0 评论 -
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 · 156 阅读 · 0 评论 -
浅谈前端渲染和后端渲染
什么是前端渲染 什么是后端渲染顾名思义 数据在后端渲染完毕后才传给前端叫做后端渲染,这个方式存在于jsp/php时代后端路由:后端处理url和页面之间的映射关系这种情况下渲染好的页面不需要单独加载css和js,直接在浏览器中显示,有利于seo优化直到出现ajax,前后端开始分离,前端渲染就是前端通过js文件执行获取后端的数据然后渲染到页面上,这种方式是前端渲染前端路由:用来管理页面,每一个url管理一个页面组件spa页面 一般情况下整个项目只有一个html页面 它最大的原创 2021-02-20 11:40:18 · 430 阅读 · 1 评论 -
浅谈vue生命周期的理解
什么时生命周期一个事物从诞生到消亡,vue的生命周期就是 vue从创建到销毁之间的各种事件也可以说是生命周期钩子创建时候的生命周期函数=》运行期间的生命周期函数=》销毁期间的生命周期函数首先vue在new之后会先初始化事件和生命周期函数,然后遇到第一个生命周期函数beforeCreate,意味着示例创建完毕,但是这个时候data和methods都没有被初始化遇到的第二个生命周期函数是created,这时候data和methods都被初始化了,如果要调用方法或数据,最早只能在这里接下来vue开始进原创 2021-02-20 11:34:10 · 149 阅读 · 0 评论