qq_45838276的博客

原创 vue3全局配置svg图标

svg-icon icon-class="test" /> test是目录src/assets/svg下的图标，test.svg。

原创 vscode本地启动打包后的dist文件（http-server）

原创 环绕button按钮的动画效果css+html实现（有预览效果）

/button>

原创 vite打包在head标签增加构建时间

背景：在日常开发中，会频繁发版打包过程，在生产环境不知道自己的代码是否有真正构建至线上，所以在标签head里增加打包的构建时间，以此检验是否是当前所构建的版本！

原创 vue2和vue3动态引入路由，权限控制

总结（必看）

原创 按钮动态边框效果

【代码】按钮动态边框效果。

原创 vue等比例缩放页面用于网站，官网

/ 获取当前分辨率下的可是区域宽度。// 在组件销毁时移除监听器。// 根据比例放大或缩小。// 恢复默认缩放比例。// 设计稿的尺寸为 1920。// 检查设备宽度是否在 1000 到 1770 之间。

原创 el-table当页选择和全选整套完整逻辑

单页或者单个就获取的是列表中的id，使用ids存储，全选则传checkAllPage为true即可。绑定两个事件@selection-all和@select。

原创 does not provide an export named ‘default‘解决

1、安装@originjs/vite-plugin-commonjs。2、vite.config.js 文件修改。

原创 history路由配置

location = /consult { try_files $uri $uri/ $uri/index.html?$query_string;}location ~ ^/consult/(.+\.(js|css|html|png|jpg|gif|mp3|json|jpeg|moc|mtn|svg|mp4|woff2|woff|eot|ttf))$ { alias /opt/vue/detail/$1;}

原创 前端history配置jenkins部署路由

location = /detail { try_files $uri $uri/ $uri/index.html?$query_string; }location ~ ^/detail/(.+\.(js|css|html|png|jpg|gif|mp3|json|jpeg|moc|mtn|svg|mp4|woff2|woff|eot|ttf))$ { alias /opt/vue/detail/$1; }

原创 eslint从0配置到1（vue3）

"vue/no-mutating-props": "off", // 有些组件去修改了如DragSelect\index.vue。"vue/valid-attribute-name": "off", // 有些组件属性名不规范如AiTable.vue。"vue/multi-word-component-names": "off", // 组件名称需采用驼峰命名。// 使用最新版 ES 语法。// 使用 ES 模块化规范。// 引入推荐的语法校验规则。// 解析器的详细配置。

转载 nvm安装教程

转载：nvm详细安装使用教程(nvm-node多版本管理工具）-优快云博客

原创 查询兼容浏览器各版本api网站

参考网址："fromEntries" | Can I use... Support tables for HTML5, CSS3, etc

原创 socuretree远程分支没有同步问题

git remote update origin --prune 是 Git 命令，用于从远程仓库更新本地分支，并删除本地已经不存在于远程仓库的远程跟踪分支。2、输入git remote update origin --prune 并回车。

原创 vue在鼠标光标指定位置插入文字

1、html2、js} else {

原创 上传文件vue

el-button type="primary" @click="uploadFile">上传</el-button>this.$message.error('Excel文件大小不能超过 50MB!this.$message.error('只支持xls格式Excel文件!

原创 eslint不生效排查思路

重新安装一下依赖，以及最好一个vscode就一个项目，因为多项目有些配置文件读不了根目录的配置，也有可能不生效。3、如果没有各文件的报错信息，查看报错是什么，有可能是eslint-plugin-vue这个没有。2、看是否有各文件的报错，如果有，则大概率是.eslintrc.js文件的配置问题。1、先执行package.json npm run lint。

原创 设置el-table的selection只能单选

【代码】设置el-table的selection只能单选。

原创 使用i18n Ayll在项目中也能显示中文vscode

2、在项目根目录创建.vsoce文件夹，再创建settings.json文件，把下方代码复制进去。1、安装插件：i18n Ayll。

原创 vue3整数指令，即拿即用

【代码】vue3整数指令，即拿即用。

原创 管理后台模板

GitHub - vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js

原创 针对vite和weboack的打包分析插件生成图

1、webpack使用（webpack-bundle-analyzer）2、vite使用 （rollup-plugin-visualizer）

原创 不用导入animate库，也能实现animate的动画

注意：如果 不生效，很有可能你没有把公共的基础代码（animated）加进去。）找到自己需要的css效果，复制名字，例如：bounce。4、把源码拷贝下来复制到自己项目代码的css中。2、 在animate官网（3、到github上找源码（

原创 el-select范围选择框

仅供参考，具体的实现可能根据自己的需要修改 ，仅供参考！

原创 vue3自定义指令

参考文章：Vue3的自定义指令该学一学了！ - 知乎

原创 格式化后的json在页面显示

【代码】格式化后的json在页面显示。

原创 vue3触发父组件两种写法

子组件：父组件：子组件：父组件：

原创 解决svg设置颜色不生效问题

属性）或者元素的父元素颜色。这使得 SVG 图标能够根据其所在的上下文动态地改变颜色，从而适应不同的主题和样式。时，它会继承元素的颜色，即元素的文本颜色（把svg中的fill属性改为。作用：SVG 元素中设置。

原创 vcode实用插件-个人

1、Auto Rename Tag-自动补全2、ES7 React/Redux/GraphQL/React-Native snippets-react插件3、ESLint-格式校验4、Git Graph-历史查看5、Git Graph-代码提交表情6、Highlight Matching Tag-代码高亮显示7、HTML CSS Support-基本的html8、Live Server-本地服务9、Turbo Console Log-控制台打印10、Vetur-vue插件11、Vuter-插件

原创 每日一题面试题 - 持续更新

为什么undefined == null会返回true？（4）函数没有返回值，默认undefined。（1）声明了一个变量，但没有赋值。（3）调用函数没有提供相应的参数。（1）实际就是一个空对象。（2）对象属性没有赋值。

原创 echarts最简单的折线图与条形图结合

【代码】echarts最简单的折线图与条形图结合。

原创 浏览器performance各指标解读

谷歌浏览器 performance 详解_chrome performance_ywCSD的博客-优快云博客

原创 限制输入框不能输入斜杠/和反斜杠\

【代码】限制输入框不能输入斜杠/和反斜杠\

原创 前端下载本地excel文件

1、public下的static存放test.xlsx文件。

原创 前端提升性能，巧用Object.freeze()

选项，并使用Object.defineProperty，进行数据劫持做getter和setter的转换。使用Object.freeze()冻结后不会转换为getter和setter，大幅度提升性能。1、Object.freeze()，可以冻结一个对象，防止对象被修改。普通的JavaScript 对象传给 Vue 实例的。

原创 http1.0，http.1.1，http2.0区别

1、http1.0特点：无状态、短连接2、http1.1特点：长连接、请求管道化、缓存处理、Host字段、断点传输3、http2.0特点：二进制传输、多路复用、头部压缩、服务器推送，但是HTTP2.0只针对有证书的网站，就是必须是https参考文章： HTTP1.0， HTTP1.1，HTTP2.0 区别及如何升级_木鱼大叔的博客-优快云博客

原创 获取白屏首屏时间

前面就能获取白屏时间。

原创 优化多分支if，elae-if

【代码】优化多分支if，elae-if。

原创 class和style的区别&&提升css渲染

现dom和css是同时进行加载，然后组成dom树的渲染，就是说，如果css没加载完，dom树肯定也是不能被渲染的。然后，由于js是要操作dom和css，所以但凡这俩有一个没加载完，都会影响js的操作，也就是会阻塞js。