前端工具和插件
关注
分享
扫一扫
文章平均质量分 79
前端工具和插件集合
空城机
光阴雕琢生命，岁月磨砺人生
成为一个普通的上班族
展开
-
Vue3：显示 markdown 文档
平时自己的 markdown 文档如何放在网页上，那么就需要将其转换成 html 文本，这次使用了 v-md-editor 库在 vue3 中进行转换原创 2022-07-18 20:55:51 · 7034 阅读 · 7 评论 -
echarts饼图指示器文字颜色设置不同
学习记录，平时开发时遇到过的问题echarts饼图label文字颜色💬需求： 绘制一份环形饼状图，并且有指示器文本标签（文字的颜色需要和各部分相同）数据：pieData: [ { name: '犯人', value: 30 }, { name: '官差', value: 35 }, { name: '平民', value: 35 },]，// 颜色.原创 2022-04-12 22:10:54 · 10123 阅读 · 6 评论 -
为了兼容IE，配置Babel+Webpack
前端开发过程中，很可能需要兼容IE浏览器（虽然很无奈就是了），在兼容IE浏览器时要十分小心，因为IE是不支持es2015以上的，所以你可能会发现Promise、箭头函数等方式通通报错。Webpack前端项目化的过程中，很多都会使用到Webpack、Gulp等工具。这里我使用的是Webpack，对于Webpack的项目配置因为以前也具体说过，所以这里不再做过多的讲述了。参考链接：简单的前端项目配置webpack打包typescriptwebpack5热更新打包TS一、使用的javascri原创 2021-10-24 15:14:29 · 3503 阅读 · 3 评论 -
VS Code配置markdown代码片段
vs code真的是一款特别好用的编辑器不过有时候在写东西时快捷键提示会有一些不足，在vs code中写markdown时还是比较明显的。这里就需要自己在代码片段中进行配置了在左上角打开文件 --> 首选项 --> 用户片段找到markdown.json在markdown.json上面有一大段注释的代码，这里有一个Example例子“Print to console” 是快捷语句的标题prefix 是快捷语句触发的命令，也就是关键字body 是触发后的样子，使用 $1，$2原创 2021-07-14 17:56:23 · 8135 阅读 · 28 评论 -
纹理打包器 TexturePacker
纹理打包器 TexturePacker序TexturePacker介绍TexturePacker简单使用准备工作添加精灵和生成纹理贴图集json序在前端调用图片时，可能会使用到雪碧图(Sprite)。对于雪碧图，有一个配套的纹理贴图集也是比较方便工程师进行开发工作的。纹理贴图集是一个 JSON 数据文件，其中包含子图像在雪碧图上的位置和大小。如果你使用纹理贴图集，你只需要知道子图像的名字。您可以按任意顺序排列雪碧图， JSON 文件将为您跟踪它们的大小和位置。TexturePacker介绍本原创 2021-04-12 08:55:18 · 1201 阅读 · 0 评论 -
Three.js杂记（四）—— 更好的运动：TweenMax
运动效果在之前的three.js运动效果制作时可以通过移动相机和移动物体来产生动画的效果。在实际中开发中，移动相机和移动物体是在渲染循环里去移动相机或者物体的位置。如果动画稍微复杂一些，这种方式实现起来就比较麻烦一些了。这时候就又要学新东西了，比如说——动画引擎…（吐槽：我是从工作需求中因为IE浏览器兼容性放弃了CSS animation动画，然后去用canvas解决了问题。之后就对这个有兴趣 ，开始学起来，学了canvas之后，又发现three.js，然后才开始学就发现好的效果用动画引擎比较好，原创 2020-12-12 16:03:13 · 1491 阅读 · 0 评论 -
Three.js杂记（三）——物体运动
物体运动在three.js中想要让静止的物体呈现出运动效果有两种方法：让物体geometry进行运动让相机camera进行运动测试代码： 让圆柱体进行移动，实际移动的是相机。圆柱体可以使用EdgesGeometry绘制边框线<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>运动</title> <script src="js/thr原创 2020-12-11 10:26:54 · 1460 阅读 · 2 评论 -
Three.js杂记（二）——绘制点、线、面
点和线Threejs使用的是右手坐标系，这源于opengl默认情况下，也是右手坐标系图中右边那个手对应的坐标系，就是右手坐标系。在Threejs中，坐标和右边的坐标完全一样。x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。一维指的是一条线，没有宽度和高度二维指的是一个面，没有高度三位指的是立体空间，由面组成示例代码：<body> <div id="app"></div> <script> // 创建场景 var scene原创 2020-12-07 15:20:37 · 2580 阅读 · 1 评论 -
Three.Js杂记（一）
相机原创 2020-12-07 11:44:19 · 936 阅读 · 0 评论 -
自定义一个适应vue的下拉框组件
在页面制作的过程中，经常需要使用到下拉框组件，有时候使用原生的select标签十分不便，因为存在shadow root。Shadow DOM概念Shadow DOM是HTML的一个规范 ，它允许浏览器开发者封装自己的HTML标签、CSS样式和特定的javascript代码，同时也可以让开发人员创建类似这样的自定义一级标签，创建这些新标签内容和相关的的API被称为Web Component。shadow-root：Shadow DOM的根节点；shadow-tree：Shadow DOM包含的子节点原创 2020-09-06 20:45:29 · 1149 阅读 · 0 评论 -
vue插件 vue-countTo
vue-countTo是一个无依赖，轻量级的vue组件，可以实现数字的滚动效果属性描述类型默认值startVal开始值Number0endVal结束值Number2017duration持续时间，以毫秒为单位Number3000autoplay自动播放Booleantruedecimals要显示的小数位数Number0decimal十进制分割String.separator分隔符String,pre原创 2020-09-06 20:07:19 · 1918 阅读 · 2 评论 -
pdf.js使用小结
pdf.js是一款可以在线预览pdf文档的插件，虽然目前大部分浏览器中都可以使用iframe直接浏览pdf，但是这种方式就难以对pdf的显示进行配置。pdf.js的官网地址：http://mozilla.github.io/pdf.js/虽然可以在pdf.js官网或者GitHub中下载下来pdf.js。但是此时的pdf.js仍需要我们去进行构建才能愉快的进行使用所以可以去网上直接寻找已经构建完成的pdf.js包进行导入使用。我在码云上存放了一个构建好的pdf.js压缩包，这也是我从网上找到的原创 2020-09-06 17:47:31 · 4107 阅读 · 2 评论