前端工具
文章平均质量分 73
我的名字豌豆
专注前端开发,懂一些Go啦~
展开
-
基于docker+jenkins+nginx实现一套CI/CD流程
代码的编写->提交代码到git->触发webHook->CI/CD流水线接收到webHook检测到代码发生变化->拉取新的代码->检测依赖/安装依赖->构建->单元测试/集成测试->交付部署(docker一键式搭建nginx等)代码的编写->单元测试/Eslint测试->提交到远程git仓库->手动打包构建->手动在服务器下载并配置Nginx->手动将构建包上传到Nginx对应的代理路径中(scp)->完成发布。通过cd ~/.ssh来获取生成的文件,将生成的秘钥id_rsa复制到jenkins的凭证中。原创 2022-11-11 20:19:27 · 2076 阅读 · 0 评论 -
Webpack中Loader与Plugin
Webpack的核心功能是通过抽离出很多插件来实现的,因此系统内功能的划分粒度很细,这样做到了完美解偶同时又分工明确,代码容易维护。所以说插件机制是也是Webpack的核心知识,那么下面我们就来写介绍一下Loader与Plugin,并写一些常用的Loader和Plugin。 对于Loader我们可以通过rules去匹配,哪些文件会被这个loader所处理。Loader本身就是一个函数,当webpack解析资源的时候,会调用相关的loader去处理,loader接收到文本内容作为参数,将处理完的内容进行返回原创 2022-07-13 17:21:20 · 2694 阅读 · 1 评论 -
一文带你了解Vite原理
Vite号称是 下一代的前端开发和构建工具,它采用了全新的unbundle思想利用浏览器ESM特性导入组织代码,在服务器端进行按需编译返回,对于生产环境使用rollup打包。比起传统的webpack构建,在性能速度上都有了质的提高。 esbuild 使用go编写,cpu密集下更具性能优势,编译速度更快,相比较其他打包工具的速度提升10~100倍的差距。Vite通过esbuild带来的好处:: 现仍共存多种模块化标准代码,比如commonJs依赖,Vite在预构建阶段将依赖中各种其他模块化规范(Comm原创 2022-07-07 00:38:37 · 4362 阅读 · 0 评论 -
vue-image-crop-upload裁剪工具使用踩坑
前言 用户需要进行上传头像,且能够对头像图片进行裁剪,引入vue-image-crop-upload裁剪工具,查看其源码后,增加处理业务问题的解决方法。自定义上传 在该组件中,当点击保存按钮时才会触发其点击事件,也就是触发文档中所写的cropSuccess函数方法,则我们可以将上传方法定义在这个函数内,函数中传入的第一个参数就是其裁剪图片后所产生的base64编码,可以将base64编码转换为File类型(base64->blob->file)或者直接向后端传输base64编码即可。具体原创 2021-03-12 10:49:58 · 2943 阅读 · 10 评论 -
vscode解除文件夹重叠
新装Vscode时,发现出现了vscode的文件夹重叠,在这里贴出解决办法:打开设置,找到功能选项,下面有对应的资源管理器一栏,将Compact Folders项取消即可~原创 2021-01-26 17:57:23 · 2724 阅读 · 0 评论 -
element-ui中导航菜单默认激活子菜单的第一项
默认激活子菜单的第一项 代码部分: <!-- 设置默认选中的选项为1-0 --> <el-menu class="el-menu-vertical-demo" background-color="#eef1f7" text-color="#6c6f72" active-text-color="#ffd04b" unique-opened default-activ原创 2020-12-13 15:18:14 · 13237 阅读 · 1 评论 -
mavonEditor修改其源码取消居中快捷键
为什么要删除该快捷键 在mavonEditor中居中、居左、居右的快捷键如下,该快捷键所显示的字符不能被marked解析,但仍被全局监听该快捷键,造成用户误触使用该快捷键,但渲染的markdown文件无法解析该特殊字符。快捷键功能CTRL + SHIFT + C居中CTRL + SHIFT + L居左CTRL + SHIFT + R居右 居中、居右、居左的快捷键所对应的字符修改mavonEditor源码 我们在node_module包中搜索mavon-e原创 2020-12-06 19:58:32 · 1820 阅读 · 6 评论 -
解决Ubuntu无法全屏问题
问题 在Vm VirtualBox中打开linux操作界面时,点击视图中的全屏模式但实际的界面大小却不发生改变。如下图:解决在界面中搜索setting找到设置打开设置后找到显示器选项修改其分辨率即可修改合适大小的分辨率后,将工具中视图选项中修改为全屏模式即可进入全屏界面。...原创 2020-09-07 14:56:58 · 4790 阅读 · 1 评论 -
如何快捷方便的进行移动端真机调试?
对于我们写的移动端代码,在谷歌浏览器中的手机模拟器中还是有很多地方不同于真机调试的,那么对于这个情况,我们还是需要将自己所写的移动端代码进行真机调试,对于真机调试,我看到很多编辑器还是需要下载插件才能进行真机调试。相比较来说,那种方法会比较麻烦,下面我将介绍一种更加方便且快捷的方法进行真机调试。 话不多说,直接上步骤! 我们需要打开草料二维码生成器,链接在这哦!????草料二维码生成器网站打开我们需要进行移动端真机调试的网站:复制本地url,并将其粘贴到草料二维码生成器:打开cmd输原创 2020-07-30 12:10:39 · 1708 阅读 · 0 评论