vue
文章平均质量分 57
vue实战经验
stubborn丶lili
这个作者很懒,什么都没留下…
展开
-
Vue项目性能分析工具: vue-cli-plugin-webpack-bundle-analyzer
2. 重启项目, 会默认启动一个8888的端口, 按照提示访问, 就可以看到了。原创 2024-03-05 14:33:02 · 594 阅读 · 0 评论 -
VUE 快捷键ctrl+v 上传图片
【代码】VUE 快捷键ctrl+v 上传图片。原创 2024-01-10 11:15:09 · 599 阅读 · 0 评论 -
vue: 使用下拉树组件@riophae/vue-treeselect
是一个基于 Vue.js 的树形选择器组件,可以用于选择树形结构的数据。它支持多选、搜索、异步加载等功能,可以自定义选项的样式和模板。该组件易于使用和扩展,适用于各种类型的项目。前言: 在vue中, 因为element-ui 2.X是没有tree-select组件的,到了element-plus就有了。4. 比较全面的属性配置参考。5. 插件的的方法配置。原创 2023-09-08 10:55:02 · 4446 阅读 · 0 评论 -
el-input type=number的时候相关问题
这是el-input的一个bug,就是当他设置类型时number的时候,你用中文输入法输入,点空格确定,他的光标会移动到上面去。el-input设置type为number时,切换为中文输入法输入会让光标上移的问题解决。el-element 中 input设置了type=“number“还能输入e和负数。el-input 使用正则解决限制12位整数和6位小数。el-input类型为number时禁止输入e和.鼠标点击箭头增加减小数值,它的鼠标滚动也会改变。( 其实按键盘上下键还是可以让其变成负数 )原创 2023-03-14 18:07:25 · 2195 阅读 · 1 评论 -
rollup.js配置环境变量
场景: 由于项目是通过svelte.js + rollup.js框架搭建起来的, 并没有使用到cli脚手架, 没有办法配置不同环境的变量。原创 2023-01-12 18:10:03 · 1985 阅读 · 0 评论 -
qiankun微应用加载第三方js跨域报错
当我们需要放行的第三方脚本越来越多,需要在 whiteList 里人工添加需要放行的脚本链接,后续维护成本高。虽然qiankun也提供了解决方案,但支持跨域的方式也颇为复杂,有没有更简单的方式,纯前端实现?qiankun会把静态资源的加载拦截,改用fetch方式获取资源,所以要求这些资源支持跨域。可以在如下主应用里通过定义白名单脚本链接 whiteList ,直接放行该脚本。微应用里需要放行的资源,开发者自行在链接上带上放行协议关键字即可。假如,我们需要加载的第三方脚本链接是。幸在qiankun提供了。原创 2023-01-12 17:20:38 · 2438 阅读 · 0 评论 -
解决在vue项目中使用monaco-editor的报错问题
1. 先清除monaco-editor所有相关的东西, 这个包的体积太大了, 也不需要配置monaco-editor-webpack-plugin。4. 简单的配置相应的参数, 那么monaco-editor的自动补全, 变量高亮, 波浪线报错的功能就都出来了。2. 复制monaco-editor包中的min文件夹, 作为静态文件放在public文件中。当我通过以下方式导入monaco插件时, 就会报错, 所以我更换了一种方式导入。3. 在public/index.html导入相应的文件。原创 2022-12-01 17:09:46 · 4905 阅读 · 2 评论 -
第三方系统单点登录到指定界面,elementUI字体图标无法显示的问题
分析原因:如下图显示, elementUI的字体文件路径有问题, 多了一个/print,按照路径向上走两层的话, 刚好是从/print路径去找的, 所以就出现问题了。当第三方业务系统通过token跳转到我们项目的指定界面时, 字体图标无法显示。而在elementUI的样式中,是通过相对路径引入字体图标的。说明ELementUI 内部封装的不严谨。解决: 减少一级路由层级。原创 2022-10-28 18:08:58 · 604 阅读 · 0 评论 -
vue3.0+vite+ts项目搭建报错问题的处理
上面这种报错是在从index.html引入CDN的情况下报错的。解决方式将package.json中的build部分改掉。解决方案,换用从vite.config.ts中引入CDN。解决方案:修改vite.config.ts文件配置。yarn dev 不报错,build就报错。css部分加上charset: false。改成这个样子就不再报错也可以正常打包了。vant采用cdn引入的方式报错。原创 2022-09-07 20:54:19 · 2876 阅读 · 1 评论 -
NuxtJS服务端渲染
Nuxt.js 是一个基于Vue.js 开发SSR应用的一站式解决方案。同时,Nuxt.js 的热加载机制可以使开发者非常便捷的进行网站的开发。优点:基于 Vue.js自动代码分层服务端渲染强大的路由功能,支持异步数据静态文件服务ES6/ES7 语法支持打包和压缩 JS 和 CSSHTML头部标签管理本地开发支持热加载集成ESLint支持各种样式预处理器: SASS、LESS、 Stylus等。原创 2022-08-25 17:36:05 · 1493 阅读 · 4 评论 -
统一身份认证登录详细介绍-identity4
移除单独引入的 polyfill 还有问题,因为 oidc-client.js 的 polyfill 是通过闭包函数传递的,算是一个私有的对象,VUE 项目中是无法引用扩展的方法的。需要去掉单独引入的 polyfill,或者拉取 oidc-client.js 的代码,移除 babel-polyfill 引用,RDC 采用直接移除单独引入的(移除 oidc-client.js 比较麻烦)。这个页面是一个空白页,主要是用来获取配置,并调用。RDC的统一身份认证中心使用的是。,前端对接的js框架是。原创 2022-08-25 15:00:35 · 1507 阅读 · 0 评论 -
vue3+vite项目在按需导入vant后, 打包构建时报错
程序解析为:项目路径/node_modules/vant/lib/vant/es/组件/style 实际应该是:项目路径/node_modules/vant/lib/ vant/es/组件/style多了一个vant/lib路径。vue3+vite项目在按需加载的插件是vite-plugin-style-import1.3.0, 在本地运行没问题, 在jsk上构建报错。多了一个vant/lib路径。...原创 2022-08-09 11:43:33 · 4701 阅读 · 0 评论 -
vue-template-compiler的作用
vue在渲染阶段会把模板编译为AST,然后根据AST生成render函数,底层通过调用render函数会生成VNode创建虚拟DOM。今天构建时需要一个问题: vue-template-compiler 和vue的版本不一致的问题。那么为什么要版本一致, vue-template-compiler到底是干嘛的。和 vue 关于编译的 API。发现对于 compile 等函数是一致,只是。,以避免运行时编译开销和 CSP 限制。开放的参数和方法更多。vue 关于编译的 API。...原创 2022-08-05 15:12:53 · 5571 阅读 · 0 评论 -
el-form表单使用error提示校验信息, 重复校验信息不显示
error="errorObj.posId",第一次显示错误提示,之后再点击提交后就不显示错误提示了。查看element源码发现el-form-item的error属性监听的是watch。所以注意重新提交表单前,需要重置一下errorObj.posId。然后异步赋值需要显示的校验信息。...原创 2022-07-28 16:51:27 · 2393 阅读 · 1 评论 -
vuex-persistedstate详细使用方法
vuex的state在localStorage或sessionStorage或其它存储方式中取值在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的。如果没有路径给出,完整的状态是持久的。vuex劣势在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。reducer一个函数,将被调用来基于给定的路径持久化的状态。譬如vuex提示的插件和持久化的插件一起使用,配置如下。...原创 2022-07-27 18:02:39 · 10337 阅读 · 1 评论 -
Nuxt.js的详细使用
Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架,它可以帮我们轻松的实现同构应用。通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。除此之外,我们还提供了一种命令叫: ,为基于 Vue.js 的应用提供生成对应的静态站点的功能。我们相信这个命令所提原创 2022-07-06 11:12:00 · 3714 阅读 · 0 评论 -
ECharts根据本周, 本月, 本年, 自定义展示折线图
1. eChartsOptions配置2. pickerOprions配置 (为了限制自定义日期的范围)3. 配置数据, 并初始化折线图4. 卸载时需要销毁实例5. 大功告成原创 2022-06-23 15:21:22 · 6422 阅读 · 6 评论 -
Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸
场景:解决办法:2. Vue 无法检测对象 property 的添加或移除场景:解决办法:3. Vue 不能检测利用数组索引直接修改一个数组项场景:解决办法:拓展:Object.defineProperty() 可以监测数组的变化场景:4. Vue 不能监测直接修改数组长度的变化场景:解决办法:5. 在异步更新执行之前操作 DOM 数据不会变化场景:解决办法:拓展:异步更新带来的数据响应的误解原创 2022-06-17 18:06:47 · 3727 阅读 · 2 评论 -
强制缓存和协商缓存的区别
本文重点:为什么需要缓存机制。 强制缓存、协商缓存是针对静态文件资源的,他们有什么区别或者联系? 某些动态接口如何缓存? 服务器如何设置缓存,浏览器如何使用缓存?为什么需要缓存机制众所周知,对于用户来说,想要访问某个网站那肯定是越快越好。对于服务器来说,肯定是响应速度越快好,压力越少越好。有了缓存这些问题可以迎刃而解~。当浏览器第一次访问服务器的时候,服务器返回对应资源的同时告诉浏览器把这个资源保存起来,下次你需要的时候只要没过期你就自己用,不需要再问我了。你知道的,我很忙的~原创 2022-04-14 11:02:03 · 6983 阅读 · 1 评论 -
Vue移动端使用PDF.js实现预览功能
使用插件:PDF.js使用时需要注意到的事项1. 引入填坑1:import 进不来,会报错,改用require填坑2:未设置GlobalWorkerOptions.workerSrc时会报错,请求worker.js 404const PDF = require('pdfjs-dist');PDF.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry');2. 调用,打开pdf文件..原创 2022-03-28 17:54:02 · 2450 阅读 · 0 评论 -
vue移动端项目切换颜色主题
场景: 根据路由上特定的参数设置对应的主题颜色思路: 结合tailwindcss配置主题颜色的变量名, 所有项目中需要用到的颜色都是用已配置好的class类步骤:1.自定义主题颜色的类名, 并设置对应的变量名ps:@layer base { } 可以理解为把这两个类名定义在了tailwindcss库中的公共区域内, 其权限最低2. 配置到tailwindcss.config.js中3. 注册到根组件中去...原创 2022-03-24 18:05:00 · 765 阅读 · 0 评论 -
elementUI 走马灯只有两个时滚动方向有误
问题当走马灯只有两项时,第一次切换时动画效果是右滑,第二次切换时变成了左滑解决办法当数据只有两项时复制一遍数据,比如1,2 ==>1,2,1,2 自定义指示器,在只有两项时显示自定义的指示器,同时,监听自定义指示器的点击事件,切换幻灯片的索引 同时监听幻灯片的change事件,用以控制自定义指示器的选中样式html代码<el-carousel height="215px" trigger="click" @change="changeCarousel" ref="carou原创 2022-03-03 17:43:14 · 2025 阅读 · 0 评论 -
elementUI表单校验失败后定位到具体的input聚焦
场景: 如下图, 在出现滚动条的情况下, 当点击保存按钮校验失败后, 用户看不到具体的校验信息的. 需要手动像上滑动. 这样的话交互体验欠佳.方案: 点击保存校验失败后聚焦到具体的某个input控件, 随之 滚动条也会自动上滑具体步骤如下: 在按需加载form表单之后, 拿到validate方法. 并在其方法上判断校验失败后聚焦到具体控件的效果. 再注册到实例中import { Form } from 'element-ui';const components = [ .原创 2022-02-21 10:13:41 · 1547 阅读 · 0 评论 -
梳理 Vue3 相比于 Vue2 的区别
生命周期的变化整体来看,变化不大,只是名字大部分需要 +on,功能上类似。使用上 Vue3 组合式 API 需要先引入;Vue2 选项 API 则可直接调用,如下所示。//vue3<scriptsetup>import{onMounted}from'vue'onMounted(()=>{...})//可将不同的逻辑拆开成多个onMounted,依然按顺序执行,不被覆盖onMounted(()=>{...})&...原创 2022-02-10 09:42:32 · 610 阅读 · 0 评论 -
在移动端, 使用vant进行rem移动端屏幕适配
使用vant进行rem移动端屏幕适配1.下载所需工具npm i postcss-pxtorem -Dnpm i amfe-flexible2.修改根目录下的postcss.config.js 文件(如果没有这个文件,可以手动添加一份)在这里插入图片描述3.修改根目录下的postcss.config.js 文件module.exports = { plugins: { 'autoprefixer': {}, 'postcss-pxtorem': { rootVa原创 2020-10-12 14:59:04 · 186 阅读 · 0 评论 -
Axios核心源码思想
Features 从浏览器创建 XMLHttpRequest 从 Node.js 创建 HTTP 请求 支持 Promise API 拦截请求与响应 取消请求 自动装换 JSON 数据 支持客户端 XSRF 攻击 前两个特性解释了为什么 Axios 可以同时用于浏览器和 Node.js 的原因,简单来说就是通过判断是服务器还是浏览器环境,来决定使用XMLHttpRequest还是 Node.js 的 HTTP 来创建请求,这个兼容的逻..原创 2021-11-12 16:03:02 · 869 阅读 · 0 评论 -
关于项目当中遇到的兼容性问题
1. 360浏览器账号密码表单自动填充问题解决方案(仅针对360极速浏览器):1. 设置唯一name名2. 设置唯一auto-complete名3. 添加readonly属性, 聚焦时移除该属性 , 失焦添加该属性2.elementui el-tooltip,在弹框之后再次出现的问题场景:elementui el-tooltip有个bug就就是当有模态确认框的时候,el-tooltip会再次出现,经过一系列问题的排查,是由于tooltip会默认给dom元素一个tabin...原创 2021-12-03 14:56:31 · 167 阅读 · 0 评论 -
Vue高级实战技巧
自动注册组件我们平时可能这样引入注册组件。每次都得需要在头部引入,然后注册,最后在模板上使用。<template><divid="app"><HelloWorldmsg="WelcometoYourVue.jsApp"/></div></template><script>importHelloWorldfrom'./components/HelloWorld.vue'expo...原创 2021-11-03 09:09:30 · 167 阅读 · 0 评论 -
elementUI在按需加载的情况下更换主题样式
一. 全局加载和按需加载的对比1. 全局引入elementUI后, 打包后css的体积:其中, chunk-vendors.css打包的是第三方库的样式, 36.22kb, chunk-common.css打包的是全局的公共样式2. 按需导入elementUI组件后, 打包后css的体积为27.67kb对比之后, css的体积缩小了8.5kb左右, js的体积也会相对减少, 这样的好处就是提升性能, 减少内存二. 按需加载的步骤tips: 按照elementUI...原创 2021-12-08 15:52:30 · 1230 阅读 · 1 评论 -
vue项目遇到的问题(实时更新)
1. icon加载不出来的问题(偶尔发生) 原因: elementUI框架底层使用到的是sass-loader和node-sass工具, 而项目中使用的是sass和sass-loader, 与之冲突 解决: 在项目中更换为sass-loader和node-sass工具2. 启动项目时会出现警告 原因:Autoprefixer注释有问题, 详情请见:Solution of autoprefixer applications control comment ...原创 2021-12-31 15:32:35 · 542 阅读 · 0 评论 -
vue项目中封装表单中的el-input组件
场景:1. 在开发表单组件时, 通过v-model绑定dataForm中的某一个字段(signature)时, 可能需要在不同的地方编写3次2. 若这个字段需要后端校验, 且需要显示后端返回的校验信息, 我们则需要在定义一个变量用于储存, 读取, 清除, 以及在调用自定义的api时进行传参, 此时,signature字段需要再写3次综上所述,signature字段一共编写6次, 一旦后端更改这个字段, 我需要改6次. 可想而知, 增加工作负担, 还会造成代码冗余封装:...原创 2021-12-03 17:05:26 · 1532 阅读 · 0 评论 -
在vue中使用websocket
一、为什么需要websocket? 前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中。如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷。 因此,一种新的通信协议应运而生---websocket,他最大的特点就是服务端可以主动向客户端推送消息,客户端也可以主动向服务端发送消息,实现了真正的平等。websocket其他特点如下:(1)建立在 TCP 协议之上,服务器端的实现比较容易。(2)与 HTTP 协议有着良好的兼容性。默认端口也原创 2022-01-10 11:16:46 · 22428 阅读 · 4 评论 -
Vue的报错:Uncaught TypeError: Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘ 1.运
1.打包运行vue项目,报错Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘#’2.点开错误的文件,标注错误的地方是这样的一段代码:3.同过谷歌查找,和论坛各种搜索:原因如下:The code above is ok. You can mix require and export. You can‘t mix import and module.exports.翻译过来就是说,代码没毛病,原创 2020-08-26 10:13:51 · 425 阅读 · 0 评论 -
关于vue组件内部代码的性能问题, 我想说几句
1.data里面只放reactive的数据,不需要响应式变化的数据,放created里面或者放在data函数中可以提高代码清晰度和性能放到data的return里面了,vue框架会做一层代理,各种监听和劫持数据的变化, 并且每个属性都会多执行几十行代码的,还多占用内存2.api请求的方法,尽量放mounted中原因: created是服务端调用, mounted是客户端调用. 你虽然在created中请求api数据, 但是在底层原理中也是在mounted执行的时...原创 2021-08-18 10:55:13 · 258 阅读 · 0 评论 -
element ui 树形表格过滤查询数据
需求: 根据查询条件, 在不请求接口的情况下, 由前端过滤数据解决:<template> <div class="app-container"> <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/> <el-table :data="treeTable" style="width: 100%;ma...原创 2021-08-23 17:00:32 · 2460 阅读 · 0 评论