![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
Lucky小维
天天向上
展开
-
【前端】桌面版docker并部署前端项目
使用阿里云的容器加速,访问下面地址去获取加速链接。上面的xxx换成自己获取的。先build打包生成dist文件夹,只配置dockerfile文件即可,镜像配置加速,在settings—>docker engine下。docker桌面版和模拟器只能选一个,不然一直转圈圈。点MB后面的开始图标去配置一下,可以先本地测试。最简单配置如下:比较好的配置去网上找找。官网下载安装包并安装4.29.0版本。win10专业版 2004+ ,vue项目打包成docker镜像。云服务使用 打开9090端口。原创 2024-05-11 18:59:42 · 370 阅读 · 0 评论 -
【前端】项目Vue2升级Vue3注意事项
Vue2项目页面直接迁移到Vue3环境下,依旧2的写法,页面各种报错,尤其element-ui升级组件改动比较大;原创 2024-04-09 17:00:03 · 1010 阅读 · 0 评论 -
【前端】国际化实现过程
确定初始化的语言在setting中,页面加载会读取里面的语言走一次语言的初始化配置,后面就是按钮切换。安装依赖,配置,当点击中英文切换按钮时候,全局变换,element-plus组件也需要中英文切换。src下新建文件夹lang,再新建package文件夹同级别index.js。package下的en.json和zh-cn.json,类似下面。一开始确认默认的语言.main.js中配置ep的。其中setting是自定义的配置。走小仓库app.js。原创 2024-03-18 14:19:50 · 532 阅读 · 0 评论 -
【前端】字典获取过程
登录成功后,去路由守卫那获取用户名,如果有则放行,没则请求用户信息以及权限菜单和字典表等信息,存入浏览器缓存中,在需要的下拉框或者表格中使用,每次后端新增字典,前端需要在utils中的字典工具类中DICT_TYPE里加上对应的常量。utils里的字典工具类。原创 2024-03-18 11:43:03 · 652 阅读 · 0 评论 -
【前端】vscode快捷键和实用Api整理
切记,最好一个]要手输才有提示,代码右键使用插件Live Server打开浏览器查看效果。只需在我们的 URL 后添加您想要的图像尺寸(宽度和高度),您就会获得随机图像。生成5张图片,200*300的,再300后面加个]回车即可。由于浏览器缓存,则会5张图片会长一样,只需要300后面加个。开发静态页面没有数据的时候可以用它来占位。要获得正方形图像,只需添加尺寸即可。创建a.html 生成模板。div.lucky+回车。原创 2024-03-10 13:31:50 · 546 阅读 · 0 评论 -
【前端】原子化UnoCSS使用
有时候我们会遇到样式复用的情况,需要将一些相同的样式提取到一个 class 中。手动将每个原子粒的样式提取出来非常耗时耗力。曾经使用过 Bootstrap,但它会将没有使用到的类样式也打包到生产环境中,影响了性能。我们需要的是只打包使用到的样式,而不包括没有使用到的。UnoCSS 应运而生,它让我们能够实现“原子化 CSS”的构想。原创 2024-03-07 14:17:14 · 583 阅读 · 0 评论 -
【前端】Vite打包页面简单部署到GitHub上
vite打包的配置如图,base是仓库名称,docs是build后生成的打包目录。访问就是第一张图里的一串地址,这种方式比较方便吧。注意点已经打上箭头,代码我传到的是test分支。创建仓库---->上传代码---->设置。上传到GitHub就自动部署了。原创 2024-03-05 17:46:05 · 553 阅读 · 0 评论 -
【前端】i18n Ally插件使用
再如我的翻译文本是en.json和zh-CN.json,都在src目录下的lang/package下,配置就如下。比如我的翻译文件en.ts和zh-CN.ts,都在src目录下的locales目录,配置就如下。由于每个项目的语言可能做的都不一样,会导致无法找到真正的路径位置,所以我推荐。在项目的根目录找到.vscode再找到settings.json编辑它。如果发现翻译是英文的则看下vscode右下角的en改一下即可。vscode扩展搜i18n Ally。原创 2024-03-05 15:30:41 · 3073 阅读 · 2 评论 -
【前端】Echarts自适应分辨率和缩放功能
【代码】【前端】Echarts自适应分辨率和缩放功能。原创 2024-02-27 14:49:30 · 1285 阅读 · 0 评论 -
【前端】数据处理
2、验证必填*数据不能为空,再读取流格式Excel时候为空的转换为-4、将数据处理成elementUi里表格需要的数据。补充方法去掉*返回elementUi中表头的格式。3、将数组处理成elementUi中表头的格式。1、校验是否缺少必填字段。原创 2024-02-26 15:55:06 · 394 阅读 · 0 评论 -
【前端】Vue中引入excel模板并下载以及XLSX封装使用
我使用XLSX的场景,在我上传excel的时候,我需要获取它的表头以及里面的数据进行渲染到表格中,在我编辑的时候需要请求Excel的地址,将返回流转JSON也拿里面的表格数据。新增配置,在vue.config.js中,自己比较一下,最后一段新增的chainWebpack。src/assets/excelTemplate/模板.xls。即可将模板下载到本地。原创 2024-02-19 10:56:33 · 2727 阅读 · 0 评论 -
【前端】弹框组件
vue2项目,封装的第一版弹框组件使用基于elment-ui。在vue同级创建components/dialog文件夹。里面放paramDialog.vue。原创 2024-02-02 14:50:51 · 418 阅读 · 0 评论 -
【前端】echarts最少留下一个图例
需求是,有多个的legend配置,正常情况echarts可以全部点击取消掉,现在需要最少保留一个。用一个监听即可解决 myChart是图表实例。原创 2024-01-30 14:39:09 · 411 阅读 · 0 评论 -
【前端】Echarts使用 三纵坐标以及封装它
如果是npm替换一下yarn即可。弄个demo.vue 参考如下。main.js中引入。原创 2024-01-30 10:58:44 · 601 阅读 · 0 评论 -
【前端】日期转换
记录项目中需要处理的日期格式 默认vue2。原创 2024-01-30 10:36:09 · 711 阅读 · 0 评论 -
【前端】防抖和节流
项目中遇到的场景,需要鼠标悬浮在图表的时候,将ToolsTip里的数据回显到头部,由于是2张图表,无法直接赋值,必须通过请求后端接口,由于ToolsTip里的Api是鼠标放上面就会触发,就会出现发起了N个请求,这时候就可以利用防抖,只有一定时间没有动作,才会请求后端接口。防抖用于限制连续触发的事件的执行频率。当一个事件被触发时,防抖会延迟一定的时间执行对应的处理函数。如果在延迟时间内再次触发了同样的事件,那么之前的延迟执行将被取消,重新开始计时。监听echarts的tooltip 事件。原创 2024-01-29 18:57:12 · 720 阅读 · 0 评论 -
【前端】vue3和vue2区别
响应式系统的性能优化:Vue 3 使用 Proxy 替代了 Vue 2 中的 Object.defineProperty,这使得响应式系统在性能上有所提升。Proxy 的实现方式更高效,可以一次性拦截整个对象或数组,而不需要逐个定义属性,从而提高了大型对象或数组的性能。虚拟 DOM 的优化:Vue 3 在虚拟 DOM 的实现上进行了一些优化。原创 2024-01-16 17:55:01 · 1139 阅读 · 0 评论 -
【前端】AntV X6学习笔记
/ 注册自定义模板节点 'custom-image'width: 62, // 节点宽度height: 62, // 节点高度markup: [selector: 'body', // 节点外部矩形},},},],attrs: {body: {stroke: 'green', // 外部矩形边框颜色fill: 'pink', // 外部矩形填充颜色},image: {refWidth: '100%', // 图片宽度和节点宽度一致。原创 2023-11-16 15:11:15 · 1753 阅读 · 0 评论 -
【前端】原生js实现表格的增删改查
原生js实现表格的增删改查功能原创 2022-11-14 22:02:10 · 870 阅读 · 0 评论 -
【前端】Html+Css+JavaScript基础知识点
Html+Css+JavaScript基础知识点原创 2022-07-18 13:28:07 · 6189 阅读 · 1 评论