weixin_38233449的博客

原创 vite 打包优化

项目遇到的vite优化

原创 vue3 UI组件优化之element-plus按需导入

这个插件可以按需导入ElementPlus组件，并且是自动导入，不需要你再单个组件按需导入。如果不在意项目打包体积大小，正常来讲element-plus 是这样用的。但是呢要是项目就用了几个弹窗提示什么的，全局引入包体积很大。但是引入完之后默认是英文模式的，这个时候就需要使用中文包。所以使用了Vite插件。在App.vue里面。

原创 element-plus 踩的坑

原来node版本是16.17.0,装element-plus死活装不上，结果要把node版本升级到18以上，真坑呀，也没人告诉我要这么干。

原创 mermaid 开源项目开发遇到的坑

利用mermaid生成了一个模块依赖关系图，遇到的大坑

原创 Nginx提供图片http访问方式

给脚本加上读写权限，然后执行，即可。

原创 前端本地部署代码

记得映射到的是/etc/nginx/conf.d/default.conf -》这个配置是对于server的描述。2、在代码根目录新建一个start_nginx_server.sh。因为部署到的是二级目录/所以要用alias别名。dist 目录新建一个nginx文件夹。1、首先要装一个docker。

原创 项目中用到的webpack优化

简述项目中自己用到的webpack 优化点，基于vue-cli

原创 将画面上的DOM元素转为SVG并且导出

将页面上的DOM元素转变成SVG下载到浏览器上

原创 vue-cli 项目配置 svg 图片

vue项目全局注册svg-icon

原创 vue template模版引入scss变量报错

模版里面引入scss变量需要在vue.config.js 里面配置：module.exports = defineConfig({ css: { loaderOptions: { sass: { additionalData: ` @import "@/assets/style/variable.scss"; `, }, }, },});vari

原创 rollup简单介绍

多入口会提取公共模块和代码拆分，输出格式为amd,不能是iife。rollup 只能处理es-module。rollup加载commonJS 模块。rollup和webpack的选用原则。插件是Rollup唯一拓展途径。默认tree-shaking。input 属性设置为数组。rollup多入口打包。

原创 vue模版代码在线编辑器实现

使用codeMIrror实现的。

原创 canvas绘制粒子背景

【代码】canvas绘制粒子背景。

原创 canvas绘制手势密码

【代码】canvas绘制手势密码。

原创 ES语法（6-12）

原创 IndexedDB的使用

对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，（5）储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

原创 window.speechsynthesis 连续说一断话

需求就是接收到一段websocket之后连续说出一段话。接收到websocket推送之后。handleSpeak方法。

原创 Vue3 按需加载element-plus

4)配置vite.config.js。1)安装Element Plus。2) 安装自动导入组件的插件。3)安装按需引入样式的插件。

原创 css实现按钮加重效果

【代码】css实现按钮加重效果。

原创 echarts 绘制地铁线路

【代码】echarts 绘制地铁线路。

原创 elementui 实现表格数据懒加载 触底加载

【代码】elementui 实现表格数据懒加载 触底加载。

原创 echarts 折线图带平均刻度线

【代码】echarts 折线图带平均刻度线。

原创 点击下载json文件

【代码】点击下载json文件。

原创 vue 实现天数滚动

【代码】vue 实现天数滚动。

原创 leaflet 限制地图在指定区域里面

原创 echarts 多折线图自定义tooltip

【代码】echarts 多折线图自定义tooltip。

原创 leaflet 渲染大量轨迹点

【代码】leaflet 渲染大量轨迹点。

原创 js数组单调 清空数组 扁平化 求交集 for in for of for之间的比较

【代码】javascript 确定数组单调。

原创 Vue3 封装Element-plus Dialog组件

【代码】Vue3 封装Element-plus Dialog组件。

原创 loading效果 svg实现

【代码】loading效果 svg实现。

原创 Git使用注意

2)本地修改要，但是冲突拉不了。1）本地修改不要，直接拉远端。2.commit 规范。3.常见问题解决办法。

原创 vue3使用记录

2.vue3监听reactive定义的响应式数据没有办法获取到正确的oldVal，ref定义的可以。3.把一个reactive对象转成普通对象，或者把props转成普通对象，属性还具有响应式。这样被teleport 包裹的内容就会瞬移到app平级的modal下面。4.teleport 用法 把里面的内容瞬间移动。1.组件状态驱动css。

原创 echarts 渲染注意点

echarts.clear()是清空当前实例，会移除实例中所有的组件和图表。1.画echart的时候一定要再mounted方法中初始化，不然没有容器时没法画图的。echarts.dispose()是销毁实例，销毁后实例无法再被使用。如果连图表容器都被销毁了，那就要调用echarts.dispose()销毁实例。4.clear 和dispose区别。3.折线图底下带阴影效果。

原创 echart 多折线图双击曲线事件

为什么要加上zrender,因为我要的是点击线，dbclick只触发点，所以要监听2个。如图，需要在双击曲线的时候展示底下的东西，需要监听echart事件。对于zrender的理解，直接上图。

原创 echart展示暂无数据

5.关键语句： dom.removeAttribute('_echarts_instance_') 不移除这个dom不展示。3.chart清空，chart一般当成全局，不要放到data里，这样能省一点响应式的开销。如图，需要在点击按钮的时候展示暂无数据，有数据的时候渲染图表，同一个Dom。2.reset函数表示清空原来option有数据的状态。4.接口没数据的时候，设置公用dom显示暂无数据。

原创 echarts 横轴设置图表滚动

dataZoom 是在option下面，也就是和series是同层级的。

原创 微服务部署笔记

基于nomad,consul,kong,konga的微服务部署架构学习

原创 echarts饼图动态旋转效果

echarts饼图可旋转效果

原创 数组对象按照某一项属性排序

var infoObj=[ { name:"张三", sex:'female', age:30 }, { name:"李四", sex:'male', age:20 }, { .

原创 echarts缩放浏览器图表自适应

this.resizeFn = this.debounce(()=>{ this.myCharts.resize()},1000)window.addEventListener("resize",this.resizeFn)debounce(fn,deley){ let timer = null; return function(){ if(timer){...