![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
小墨宝
这个作者很懒,什么都没留下…
展开
-
regeneratorRuntime is not defined 报错
安装 devDependencies{“@babel/plugin-transform-runtime”: “^7.18.6”},安装 dependencies:{ “babel-polyfill”: “6.26.0”,}其实就是 兼容async/await的语法 的babel 没有配置 或者配错。配置文件babel.config.js。原创 2022-12-20 16:31:11 · 517 阅读 · 0 评论 -
vue本地打包文件 运行 liveServer
live-server 是一款 npm 工具,全局安装 npm i -g live-server 后,项目目录使用 live-server 命令行命令便可直接在浏览器中预览(默认找 index.html,其他需要带上文件名空格后跟在后面),并且自动全局监听实时更新。关于live-server配置 可以在setting.json 中去配置 可以百度一下它的属性。原创 2022-12-15 15:20:43 · 1550 阅读 · 0 评论 -
element 时间范围空间 实时控制范围
需求:时间选择不能大于今天,选择的范围是1个月。原创 2022-12-14 10:20:37 · 206 阅读 · 0 评论 -
vue3.0的变化汇总
vue3.0的变化汇总原创 2022-11-23 13:58:58 · 628 阅读 · 0 评论 -
element 弹窗 实现拖拽 放大 拉伸
使用:直接引入js, 在el-dialog上只是使用v-dialogDrag 就可以了,斜角拉升 有点问题,建议注释掉,我下面已经注释了。自定义一个指令,下方代码直接使用,针对的是element 弹窗。原创 2022-11-10 14:27:50 · 1719 阅读 · 0 评论 -
实现element 下拉选择分页加载
element 的el-select组件没有直接提供下拉分页加载,实际业务当中会有一些数据量比较大的下拉框可以采取分页选择。下面的200这个值是下滑到百分之多少触发请求,可以自定义。原创 2022-11-08 16:02:25 · 1905 阅读 · 0 评论 -
写一个 vue步骤条 直接用
写一个步骤条 直接上代码 直接使用就可。原创 2022-11-07 14:29:34 · 1320 阅读 · 1 评论 -
vue3+vite+vant+typescript 的坑
vue3原创 2022-10-21 16:02:28 · 578 阅读 · 0 评论 -
html转pdf 简化版
element的表格组件打印或者导出pdf 存在最大的宽度 需要写样式覆盖。代码 css 在页面里通过样式穿透来设置下。原创 2022-10-13 14:39:26 · 232 阅读 · 0 评论 -
上传图片签名验证
ruleForm.rtcUrl. 初始化是个数组[]原创 2022-08-17 21:02:22 · 354 阅读 · 0 评论 -
jenkins 下载插件sentry-cli失败
我们使用的是内网,图中sentry-cli的下载地址访问不了,这个地址前端yarn-lock中也不是这个下载地址,一直找运维解决。后面百度方法设置下淘宝镜像就ok了。在跑yarn时先跑一遍下面代码就可以了。......原创 2022-07-28 14:44:33 · 991 阅读 · 0 评论 -
封装element弹窗组件 使用sync
弹窗组件需要使用计算属性来过渡,不然直接使用自定义事件去改变show可以是可以,但是element右上角自带的关闭会报错(还是能关闭的)原创 2022-07-20 15:33:25 · 420 阅读 · 0 评论 -
vue render函数绑定组件 并且双向绑定
需求需要展示附件,在表格中,使用自己封装的组件回显。原创 2022-07-19 11:12:27 · 899 阅读 · 0 评论 -
element 表单验证 批量添加的 demo
需要循环的部分原创 2022-06-23 15:22:07 · 343 阅读 · 0 评论 -
多层组件slot
问题:组件a 组件b 组件c,组件a的slot传递到组件c原创 2022-06-14 17:43:25 · 162 阅读 · 0 评论 -
整理前端统一格式化规范 eslint+editorconfig+prettierrc+vetur
前言多人开发中统一得代码风格和规范是必不可少得,以前很不喜欢用eslint,各种报错,但在团队中用eslint去规范代码行为是非常有必要得,不过就我个人而言,这一套格式化得规范往往在我们去新公司得时候项目就已经有团队leader或其他同事弄好了,对这具体得操作也没有去做过整理,半知半解得,这里下面就整理下,以vue为例,往往vue项目分两种 vue-cli2创建得项目记录下eslint+editorconfig+prettierrc+vetur 介绍下这4个 eslint:代码检测工具 edit原创 2022-03-18 13:46:15 · 674 阅读 · 0 评论 -
vue中得代码优化技巧
v-for v-if/v-else-if/v-else 使用key=====vue3key在vue中得作用都是精准定位到需要修改得元素,两个 虚拟dom节点 的 key 如果一样就不会重新创建节点,而是修改原来的节点)v-for 和 v-if 不要一起使用(Vue2)v-for优先级高于v-if,先循环后判断,浪费性能,VUE3中是解决了这个问题,v-if优先级高于v-for合理的选择 v-if 和 v-show对于频繁需要切换得DOM元素 使用v-show, 因为DOM操.原创 2022-02-08 09:41:27 · 732 阅读 · 0 评论 -
charles移动端断点接口返回修改数据
https://www.cnblogs.com/gxunique/p/11168869.html转载 2022-01-24 09:54:23 · 77 阅读 · 0 评论 -
图片懒加载插件 vue-lazyload
https://www.jianshu.com/p/f9b1183b13af转载 2022-01-20 11:33:03 · 670 阅读 · 0 评论 -
表格render函数中使用组件
{ label: "操作", attrName: "caozuo", width: 180, align: "center", render: (h, params) => { // 根据组件名获取下组件 return h("div", [ h(resolveComponent("原创 2022-01-04 10:54:53 · 860 阅读 · 0 评论 -
联动选择框组件例如:街道 楼栋 小区
联动选择框组件例如:街道 楼栋 小区存一下代码直接用数据结构:解释下为啥要这3个参数,其实可以一个得 例如: url:”、api/xxx/xxx?a=1&bb“ 项目特殊所有分三个参数baseUrl: 基本得接口请求paramsUrl: 参数 addrCodeLevel=5&parentCode$street &后面可以自己定义方便解析dataUrlDes: , 返回参数取label 值字段 和 value 字段{ width: 12,原创 2021-12-20 15:48:33 · 317 阅读 · 0 评论 -
vue3.0响应式得实现 以及和vue2得区别
vue3.0响应式得实现 以及和vue2得区别vue2,之前有分享过具体得源码解析这里不多讲了 1.数组下标长度修改不支持,同时修改了数组得原型链 2.使用watcher和dep得组合 3.使用Object.defineproperty,全部遍历属性vue3.0 下面代码都是自己写得总结一下整个思路 1.更好得支持了数组 2.使用了effect 替代了 watcher 3.使用了原生得new Proxy()vue3中 reactive就是使用了proxy,最终调用得也是const原创 2021-12-16 15:57:36 · 295 阅读 · 0 评论 -
vue3.0的 monorepo模式
Monorepo 是什么?简单的来说,Monorepo 的核心观点是所有的项目在一个代码仓库中。这并不是说代码没有组织都放在 ./src 文件夹里面,二是在一个packages文件夹下分割成一个个相对独立的项目,在vue3.0中就是将各个功能单独抽离出一个个单独的模块,各自打包,又能互相引用。vue2中是只打一个包。类似于最终的效果vue3.0的打包效果:下面我们来大致实现下整个 monorepo模式的打包过程,大致了解下这种模式1.安装需要的插件yarn add typescript ro原创 2021-12-14 13:50:42 · 2911 阅读 · 0 评论 -
vant弹窗放在子组件显示 不上下居中问题
问题分析:放在子组件中fixed 混乱,查窗口高端,定位尽然时根据父组件的高度去定位的。解决方案:1.将弹出窗口放在父组件中 以插槽slot的方式引入原创 2021-11-18 09:51:37 · 1220 阅读 · 0 评论 -
深入理解 this.$nextTick() (很多文章都不解释为什么使用了之后能监听到DOM更新完了)
问题:1.vue中改变数据之后无法立马通过DOM来获取数据,官方推荐nextTick来解决vue得数据更新,会开启一个异步队列,将所有得数据变化缓存进去,这里面会做一个去重处理,比如重复得watcher最后都只会执行1个,避免重复得DOM计算消耗性能。解决疑问 1.nextTick得实现原理 2.怎么确定nextTick是在DOM更新完毕再执行(这个问题我看了很多文章大致都只是讲了nextTick得原理,并没有实际讲出此问题。)前言:针对vue2.5之后得版本,2.5之前nextTick得原创 2021-11-09 15:50:04 · 1476 阅读 · 4 评论 -
vue得$set原理
话不多说上源码,其实问题就是在于修改数组例如 arr=[1,2,3,4] arr[1]=2,类似这种直接用下标修改整个值得无效, 如果式arr=[{name:“aaa”}] arr[0].name="ccc"这种是可以得 arr[0]={name:“ccc”} 这是不行得** 源码**function set (target: Array<any> | Object, key: any, val: any): any { if (process.env.NODE_ENV原创 2021-11-09 11:27:23 · 939 阅读 · 0 评论 -
iview table自定义排序规则
下方 obj 就是columns中得一项let obj = { title: item.name, minWidth: item.width, key: item.enName, sortable: item.sortable, sortMethod: (a, b, type) => { return this.$utility.sortFun(a, b, type) }, dataSourceList: item.dataSourceList || [], }原创 2021-10-18 14:53:15 · 1392 阅读 · 2 评论 -
vue组件加载顺序
常用阵容 地府(1200)+2狮驼+方寸(1300)+雷音(龟速,最好能比龟速宝宝还龟)方寸带千,地府雷带龟,狮驼带吞队长狮驼:队长狮驼另一个狮驼:B狮驼下面顺序按照虎阵得位置排得第一回合开局魔兽碎甲,龟速卡辅助。 B狮驼岭人物:气冲斗牛宝宝:吞 地府人物:魔兽宝宝:卡自己 队长狮驼岭人物:气冲斗牛宝宝:吞 方寸人物:碎甲宝宝:卡自己 雷音人物:斩业火 (存珠子)宝宝:卡方寸第二回合场景:一般狮子倒地, 辅助上回合会被拉起原创 2021-08-04 11:40:41 · 298 阅读 · 0 评论 -
vue初始化watch
分析源码不求行行都懂,大致分析下watch得执行原理 在vue源码中找到initWatch基本得逻辑就是initWatch —> createWatcher() ----> vm.$watch() ----> new Watcher();**1.initWatch **function initWatch (vm: Component, watch: Object) { for (const key in watch) { const handler = wa原创 2021-07-27 11:08:10 · 1101 阅读 · 0 评论 -
vue初始化initMethods
vue中是如何初始化methods得,看源码非常简单1.针对methods遍历,判断是否是函数,是否和props重名,是否在实例上存在相同名字2.vm[key] = 是为了将函数映射到实例上,再通过bind方法在改变this得一个执行,bind跟call得区别就是前者是等待执行,后者是直接执行。3.到此,我们可以在模板中直接访问方法,以及方法中得this直接访问vue实例...原创 2021-07-21 10:23:30 · 1047 阅读 · 0 评论 -
封装element table表格 使用render函数
目的:使其table中得每个单元格都能做到自定义新建一个组件 STable.vue<template> <el-table :data="list" style="width: 100%"> <el-table-column v-for="item in columns" :key="item.key" :prop="item.key" :label="item.ti原创 2021-05-12 13:34:12 · 5392 阅读 · 0 评论 -
vue如何初始化computed
总结总结:computed初始化得时候会给每个成员分配一个watcher,用来监听,缓存结果,响应式数据还是通过Object.defineProperty来实现,里面得get方法中 1。watcher.dirty,当数据发生变化 dirty会为true(数据变化时会调用它自身dep中收集得watcher,来改变computed中对应得watcher。dirty),重新计算结果,2.收集了页面得watcher,所以当数据变化时,能直接通知页面更新。computed也跟data一样通过proxy方法映射到v原创 2021-05-07 11:44:07 · 1960 阅读 · 1 评论 -
vue源码学习分析
主要了解学习了它得一些核心思想和功能,深入了解它得一个数据驱动,响应式原理,watcher,dep,observe等一些简单得实现。(简化得方便于我们理解它得一个核心理念)vue得一个主要流程 (代码中得JGvue,我就直接说是vue了)初始化实例初始化数据data编译渲染过程和数据响应式watcher 和 dep 依赖收集,派发更新diff算法了解其他知识点完整得项目结构1.初始化实例准备一个html,这不多说就是一个html 文件 使用我们自己写得vue<html原创 2021-04-28 17:08:51 · 228 阅读 · 0 评论 -
前端微服务npm集成 插件 组件 vue项目
发布一个npm 插件包https://blog.csdn.net/qq_38935512/article/details/115719636发布一个npm 组件库(写了两个)https://blog.csdn.net/qq_38935512/article/details/115730925https://blog.csdn.net/qq_38935512/article/details/103530099发布到npm 单独的vue项目https://blog.csdn.net/qq_.原创 2021-04-16 16:00:29 · 254 阅读 · 0 评论 -
发布 一个独立的vue-cli3项目 到npm 以插件的方式集成进项目(前端微服务)
目录前端微服务创建一个简单的vue项目改造项目新建一个发布的配置文件publish.js打包使用维护1.前端微服务所谓的前端微服务其核心就是集成,将多个不同的应用集成到一个主应用中,他们之间互不影响,独立开发。由此,在我们平常的项目管理中,项目会比较繁多,可以采用这种插件式的管理,将各个单独的模块打包发布到npm 或者私服(最好是私服安全),然后在主项目中 以插件的形式集成进来注意:下面说的是用vue-cli3来创建的项目发布,如果是之前的版本,可以参考我上两篇,来配置webpac原创 2021-04-16 15:52:32 · 612 阅读 · 3 评论 -
发布一个npm 组件库 vue
目录Npm登录使用webpack,然后写一些组件发布包使用1.登录1.npm login 输入账号密码邮箱(输入密码得时候命令行没反应得 不用管)2.如果是使用了淘宝镜像 执行npm config set registry https://registry.npmjs.org/ 切换Npm镜像源3.再次登录2.使用webpack,然后写一些组件1.随便找个文件夹 初始化 npm init 生成package.json文件2.新建 webpack.config.js 和 src原创 2021-04-15 16:57:44 · 606 阅读 · 0 评论 -
vue3中的reactive和 ref shallowReactive和 shallowRef
reactivereactive是vue3提供的一个响应试方法,本质是包装成来一个proxy对象(可以打印看看),只能传对象,不然无法自动更新import {reactive} from "vue"setup(){ let obj=reactive({ list:[] })}refref其实底层的本质就是reactive,ref(1)===>reactive({value:1})判断方法isRef(xxx)isReactive(xxx)区别ref类型会自动添加v原创 2021-03-30 17:32:23 · 537 阅读 · 0 评论 -
vue3.0对比vue.0到底快在了哪里
1.diff算法得一个优化v2得diff算法是全量比较例如 <div><p></p><a></a></div> 数据发生变化 上一次得渲染DOM树 和 更新数据后得DOM树 diff算法全量比较(实际a变化,但是div p还是都会比较一编)v3得diff算法在创建DOM树得时候 动态数据会添加一个静态标记,这样对比得时候就直接对比有标记得就行了2.hoisStatic 静态提升v2中 不管元素是否参与更新,都会被原创 2021-03-30 10:53:44 · 209 阅读 · 0 评论 -
微信静默授权 和 非静默授权
静默授权: 不需要用户点击确认,只能获取用户的openId非静默授权: 需要用户点击确认登陆,还能获取更多的用户信息原创 2021-03-25 19:01:00 · 1167 阅读 · 0 评论 -
optionMergeStrategies 自定义合并策略 实现页面第一次加载执行钩子函数
需求:app页面第一次进入 加载一个函数,返回到此页面不执行此函数解决方案:1.利用optionMergeStrategies 自定义一个合并策略.2.全局混入方法说下这个optionMergeStrategies。自定义合并策略,Vue.config.optionMergeStrategies 是配合mixin混入来使用得。vue有一套它自己得默认合并策略。比如方法合并成数组。如果需要修改可以重新定义它得methods ,Vue.config.optionMergeStrategies.met原创 2021-03-11 16:53:04 · 308 阅读 · 0 评论