Vue
文章平均质量分 61
ZhuAiQuan
我在发光和发热中选择了发疯;
在上班和上学中选择了上吊;
在社恐和社牛中选择了社畜;
在努力和摆烂中选择了顺其自然;
在素质和道德中选择了口吐芬芳;
展开
-
vite ssr服务端渲染
阅读这一章里有说过,vue是支持服务端渲染的。通过创建vue组件实例,并使用将在服务器渲染好template并返回字符串结构,通过替换占位字符将渲染好的字符串输出到html上,这样的一个过程就实现了服务端渲染。也提到了如何去渲染SSR并提供了相关那么今天我们就按照官方给的示例来完成vue ssr的改造使用Node Koa框架来做服务器,且使用vue全家桶(router,pinia)开发项目。原创 2024-03-13 11:08:24 · 1316 阅读 · 2 评论 -
[vite.js]按需加载自动注册组件
vite配置unplugin-vue-components插件 按需加载自动注册成组件原创 2022-11-29 11:30:44 · 1414 阅读 · 0 评论 -
Vue基础之组件通信provide、inject
类似react中context的功能,vue的provide就非常适合在祖孙这种多层级的状态下进行通信。原创 2022-11-24 11:26:09 · 704 阅读 · 0 评论 -
vite+vue-router4.x配置动态路由
vite+router.addRoute 后台管理配置动态路由原创 2022-11-21 15:37:42 · 1406 阅读 · 4 评论 -
[TypeScript]Vue/React子组件实例暴露方法
必知必会之Vue/React组件通信 其一;你可以不会,但你一定要了解怎么用。原创 2022-11-15 16:26:50 · 3403 阅读 · 0 评论 -
nuxt3入门
nuxt3 RC 浅入原创 2022-06-22 11:23:34 · 4953 阅读 · 0 评论 -
Vue3 双向绑定原理浅入
众所周知 vue2所使用的双向绑定原理是用了Object.defineProperty 来进行数据的拦截处理,而vue3使用了es6的 proxy代理拦截数据,那么 proxy是啥呢?菜鸟教程 ES6 Reflect 与 Proxyproxy小试牛刀先声明一个变量const obj = { name: 'dingzong'};创建一个proxy实例const _obj = new Proxy(obj, {})输出_obj构造函数proxy第二项是一个对象,对象里有内置十三种方法来捕原创 2022-02-14 11:15:43 · 2050 阅读 · 0 评论 -
vue3 ts组件实例类型
mark下获取组件实例并能不any指定类型正确调用组件的方法,非常好用!import导入组件后 使用InstanceType获取组件类型;例如import MoviesList from './components/list.vue';如果想使用这个组件的方法,正常不为了编辑器检测报错 只能指定组件的ref为any 但这样一点都不优雅,也没有提示方法。所以type FilmsType = InstanceType<typeof MoviesList><MoviesList原创 2021-07-16 17:12:58 · 3662 阅读 · 0 评论 -
vue开启Gzip性能优化
使用gzip能有效减少打包后的项目体积,但是需要配置nginx和vue.config.js文件;需要先安装compression-webpack-pluginnpm i compression-webpack-plugin如果配置了gzip 但是打包或者运行时显示Cannot read property ‘tapPromise’ of undefined 之类的报错 ,需要先删除当前的compression-webpack-plugin模块 再安装低版本的compression-webpack-pl原创 2021-05-21 14:39:05 · 525 阅读 · 1 评论 -
html转pdf
最近遇一需求 需要将网页部分内容转换成pdf保存下来;思路是将html转成canvas(html2canvas) 再根据canvas.toDataURL将canvas转换成图片,最后使用pdfjs将图片保存到pdf文件里;贴一下代码mark下需要用到上面那两个依赖;import html2canvas from 'html2canvas';import jspdf from 'jspdf'; const dom = document.getElementById('orderDetail'原创 2021-04-27 16:46:05 · 156 阅读 · 0 评论 -
vue3移动端开发rem问题
mark一下移动端开发rem插件使用问题根据官网提供的postcss-pxtorem 安装并配置了相关选项但打开报错的问题解决方法原创 2021-03-30 17:16:54 · 185 阅读 · 0 评论 -
js反向递归查找值
业务开发中tree树数据经常打交道,经常需要用到递归去操作更改数据。现在遇到一个后台传给你一个某个位置的id值且需要你向上一层一层获取数据的值,这个时候你就需要反向递归去获取数据。记录一次才坑经历吧思路1之前是想把源数据转成json字符串去查找,这样性能应该能更好,少了很多循环操作。后面发现自己正则似乎太菜了学的都还给老师了无奈只好放弃这种方法,思路2正常递归源数据数组 判断children值以及使用数组的some方法判断是否需要继续递归下去还是从头递归;贴代码 // 反递归查找 f原创 2020-12-02 14:19:58 · 3173 阅读 · 2 评论 -
Vue3 自定义指令实现按钮权限控制
业务需求除了路由需要控制外点击按钮也需要做到控制,百度了vue2相关资料发现大部分都是使用自定义指令实现控制按钮显示和隐藏,刚好手头上做了个demo 写个文档记录下;vue2和vue3directive的函数也不一样bind → beforeMountinserted → mountedbeforeUpdate: new! this is called before the element itself is updated, much like the component lifecycle ho原创 2020-11-27 15:20:29 · 2829 阅读 · 1 评论 -
Vue Router传参解耦
vue路由传参有params和query,实际开发中获取vue路由的参数,需要在组件中使用 $route, 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。vue router为我们提供了路由解耦的功能,取代在组件上使用$route来获取路由参数;1、布尔模式在路由上新增一个属性props并设置为true路由{ path: 'detail/:id', name: 'customer-detail', meta: { title原创 2020-11-19 16:01:58 · 608 阅读 · 1 评论 -
Vuex与双向绑定冲突的解决方法
vuex里的值需要在Mutation里去修改,但是表单双向绑定了该用户修改时会尝试修改vuex里的state值,这在严格模式下会报错。不过一般是不会直接双向绑定vuex吧 如果绑定了请看官网文档的解决方法官网文档 ==> 电梯直达...转载 2020-04-11 13:43:59 · 924 阅读 · 0 评论 -
封装axios拦截重复请求
偷个懒 用下别人的代码 原帖 (侵删)文中稍作修改 功能不变新建一个请求文件import axios from 'axios'//取消请求let CancelToken = axios.CancelToken//设置默认请求头,如果每次请求都携带token 建议写在这里axios.defaults.headers = {}// 请求超时的时间限制axios.defaults...原创 2020-04-09 21:29:42 · 975 阅读 · 3 评论 -
Vue路由/组件按需加载
Vue性能优化import介绍import命令会被 JavaScript 引擎静态分析,先于模块内的其他模块执行。因此import xxx from 'xx’会优先加载该组件 但是在很多时候并不需要优先加载 这样会在组件多的时候影响速度 此时建议引入import()函数,完成动态加载一 路由懒加载component: () => import('@/view/access_co...原创 2020-04-02 15:07:39 · 207 阅读 · 1 评论