- 博客(112)
- 收藏
- 关注
RSS订阅原创 CommonJs与ESModule还在傻傻分不清？
最近在升级公司脚手架时发现一些包由于版本问题，出现了mjs文件类型无法被解析、、 不能使用require或者不能使用import导入等等一系列错误，经过查询资料，发现他们的差别正是由于使用了不同的CommonJs与ESModule模块化方法。那么他们到底有什么区别呢，为什么会采取这两种不同的处理方式呢？本文将带你一探究竟。在理解完这一堆理论知识后，在处理脚手架报错时，也明白了为什么会存在问题。通过配置babel，项目就可以完美支持ES Module了。
2024-03-14 17:44:48
339
原创 如何实现一个雨滴落下效果
下雨天坐在车窗前，看着雨滴顺着车窗渐渐落下，这一唯美的场景，忍不住想记录下来。最近在纠结电脑壁纸时，无意间看到有类似的场景，可以将自己喜欢的壁纸加上这种效果。作为多年切图仔，不由地想到了用css动画应该可以实现这一效果，于是，直接开干。首先直接使用absolute定位，只需要亿点点时间就能创造出多个分布于不同位置以及不同大小的水滴。....
2024-03-14 17:42:59
473
原创 GSAP动画库，探究苹果官网页面滚动动画是如何实现的
每次浏览苹果官网时都在好奇，当我们向下滚动页面时一个个文字或图片总能缓缓浮现，往上滚动时又能慢慢收起来，这就究竟是如是实现的呢。在查阅一些资料时发现了Scrollmagic.js插件,该插件提供了灵活的滚动动画，可以自定义各种各样的效果，但是当我满怀信心的决定大干一场时，发现这个插件已经很久没有维护更新了，而且是基于jquery开发的，在引入vue3脚手架时并不适配，有感兴趣的小伙伴可以去看官网：http://scrollmagic.io/docs/index.html。
2023-12-07 15:43:57
1126
原创 仿贝壳地图画圈找房功能实现（高德地图）
在最近租房时，看到贝壳找房上线了一个地图画圈找房的功能，感觉很是新奇。接触地图开发也有很长一段时间了，以前大部分都是基于web pc端开发，所以一般遇到这种圈选，绘制多边形圆形都是直接基于官方API直接修改使用的，对于PC端鼠标操作来说，现有的交互用起来已经很不错了，但是对于H5移动端来说，只能通过手指触摸来模拟鼠标滑动，直接使用现有的API对于移动端交互体验来说并不是特别好。因此，看到了贝壳找房上这一新颖的功能，确实让我眼前一亮。话不多说，直接开搞，自己手动实现一个看看。
2023-12-07 15:42:32
766
原创 前端新趋势？有了Web Component，还在纠结vue或react
Web Component 的概念最早在 2011 年被 Google 提出，并在 2018 年 V1 版本开始被主流浏览器所支持（除了 IE）。Web Component 规范正式成为 W3C 的推荐标准。与Vue和React类似，都是基于组件化思想用于构建用户界面的一种框架，不同的是Web Component是使用封装的自定义HTML元素来创建可复用的组件，与此同时，它能够完美解决Html、css、js的复用问题，做到沙箱隔离，在任何地方使用都不会受到代码冲突影响。
2023-12-06 16:20:40
493
原创 地图服务 ArcGIS API for JavaScript基础用法全解析
在接触ArcGIS之前，开发web在线地图时用过Leaflet来构建地图应用，作为一个轻量级的开源js库，在我使用下来Leaflet还有易懂易用的API文档，是个很不错的选择。在接触使用ArcGIS后，我发现其API文档的阅读体验很不尽人意。尽管它提供了详尽的接口描述和参数说明，但由于文档的复杂性和缺乏直观的示例，对于初学者来说可能难以理解和应用，经过几天的努力，手写了多个helloworld，并终于整理出了地图的基本用法。
2023-12-06 16:20:03
1085
原创 自定义递归实现级联组件，可默认展开全部子节点
级联组件是各个UI组件库中不可或缺的组件，他们常作为下拉选择使用，可以多选或者单选，但是在最近开发中，这个组件并不能实现产品经理无理的需求（需要默认展开所有子节点，需要支持某一项可多选，其他层不需要选择框。。。等等），既然UI框架用不了，只能自己动手造轮子，能够自定义每个选项的插槽内容。源码git地址：https://gitee.com/fcli/vue-cascade-panel.git。
2023-11-27 17:13:42
693
3
原创 git日历坐标系? 手动实现github活跃/贡献图
在使用github或gitlab时，我们总能发现，我们一年内的活跃度能够通过一张图直观地展现出来，那么你是否好奇它是如何实现的，最近工作中也遇到这样类似的需求，刚开始打算使用echarts的日历坐标系，但demo测试下来结果不尽人意，除了配置麻烦，自定义自由度不够，以及对于业务需求支持度也不够，因此，痛定思痛，决定动手手写一个自由度更高的组件。
2023-11-27 17:12:51
1061
原创 封装一个vue3 多行文本超出省略展开/收起和tooltip展示组件
相信大家都能遇到这样一个问题，文本超出省略了，那么怎么既能让页面不被密密麻麻的文字占满，又能让所有的内容让用户能够清晰便捷地看到。在使用UI框架时我们常用tooltip组件去包裹过长的文本内容，但是，在我使用过程中存在这样一个问题，包裹的内容如果过短也展示了toltip，这样明显并不是最好地解决方案。以及在H5中使用tooltip也不是最好地选择，通常使用展开和收起来隐藏过长的文档。我将这两者结合起来，手动造轮子，手动封装一个通用组件。
2023-10-31 09:42:39
1141
原创 右下角悬浮随意拖动banner组件封装
在参加掘金1024活动时，注意到页面右下角的悬浮的banner，这种表现效果优于直接悬浮位置固定不变的方式，因为它可以随意拖动并改变位置。在以前的H5开发中，也遇到了类似的效果。因此决定将它抽离为一个单独的组件，防止以后重复搬砖。直接访问获取源码：https://gitee.com/fcli/vue_drag.git。
2023-10-31 09:41:31
63
原创 还不会柱状图动态排序？手把手带你卷起来
echarts在前端开发中实属必不可缺的大数据可视化工具，在前段时间搬砖时遇到这样一个需求，需要实现一个动态排序的柱状图，用来展示不同部门在不同月份的绩效收益情况，能够直观地看到每个月各个部门的排名变化情况。并能够随时暂停，手动切换来展示某个月的具体情况。经过一下午一顿敲击键盘后，完美完成本次任务，总结记录一下，以后就可以愉快地摸鱼了。完整代码看文末。
2023-10-31 09:38:07
388
原创 动手实现H5仿原生app前进后退切换效果
最近在优化H5页面，我注意到当开发完成的移动端H5页面嵌入到微信小程序或者原生app中时，当触发页面路由切换会与原生app看上去有点格格不入，因为H5页面切换路由时是直接替换了原来页面的内容，在视觉效果上看到的是页面的跳转变化都是在同一个页面上，并没有一级二级页面这种视觉差，因此，参考了原生app中的页面切换效果，我打算将已经成熟的H5项目改造一下，优化视觉上的体验效果。在前端开发中通过实现一些动态效果，在用户使用体验上都能得到较大的改善，作为前端页面优化的一部分，有更多的动画效果值得我们花时间去研究。
2023-10-18 10:23:49
680
原创 Husky - 你一定需要的Git Hook 工具
在团队开发协作中，Git作为不可或缺的利器，想必每个开发人员都已经对它的基本运用驾轻就熟了。然而，在实际的团队协作开发中，你是否曾经遇到过这样的问题：当你在本地执行拉取（pull）操作，获取到团队成员的代码时，却发现他们的代码并未经过格式化，或者存在一些语法错误，甚至遗漏了某个文件的提交。而此时，那位同事却恰好处于休假状态。你只能先着手解决这些报错问题，才能顺利地在本地运行代码。
2023-09-26 14:28:26
488
原创 前端换肤方案 - element+less无感换肤（无需页面刷新）
前不久在改造一个迭代了一年多的项目时，增加了一个换肤功能。通过自己的探索，总结出了一套比较合适的改造方案供大家参考，如有更好的方案欢迎评论区踊跃评论😄首先定义一套或多套样式变量，包括浅色和深色两种主题。在scss或less中使用变量，通过js改变root节点的class或属性来达到样式覆盖。这种方式实现的前端换肤方案，可能会导致样式不易管理，查找样式复杂，每一套皮肤需要写一个css文件，造成多个css代码冗余。
2023-09-25 11:22:25
301
原创 贝赛尔曲线 - Vue3实现加入购物车抛物线效果组件
在前几天的一次迭代中，我遇到了这么一个需求，模仿支付宝首页应用中心的编辑功能，支持编辑首页展示的应用，在支付宝应用首页编辑功能中，我注意到一种独特而细致的设计。无论是增加还是移除某个应用，都会引发一个精美的移动动画效果。这种贴心的设计在用户体验中起到了微妙而关键的作用，使得操作更加流畅，为整个过程增添了趣味性。不由地想起我们在使用各种购物外卖软件时，添加商品到购物车也有这么一个抛物线的动画效果。因此，决定手动造轮子，封装一个通用的抛物线组件。
2023-09-22 16:12:45
648
原创 使用Canvas绘制一个验证码组件
验证码，这一日常伴随我们的要素，是我们在线交互的重要安全保障。你的手机短信里是否被它占据半壁江山，今天我们就来聊聊如何在网页上实现一个简单的验证码组件。大家在登录网站时为了防止被恶意攻击或者多次点击操作，使用验证码是最常用的实现方式。在学习完Canvas后，通过Canvas实现简单的验证码就比较简单了，该组件已开源上传npm，可以直接安装使用，源码已上传Git，地址在文尾。
2023-09-21 13:53:54
241
原创 瀑布流 - Vue3基于Grid布局简单实现一个瀑布流组件
在学习Grid布局之时，我发现其是CSS中的一种强大的布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，在刷某书和某宝首页时，我们发现其展示方式就是一种瀑布流，是一种流行的网站页面布局，视觉表现为参差不齐的多栏布局，随着页面向下滚动，这种布局会不断加载数据块并附加到当前尾部。采用瀑布流布局的方式可以打破常规网站布局排版，给用户眼前一亮的新鲜感，更好的适应移动端。
2023-09-20 14:41:38
1358
原创 虚拟列表 - Vue3实现一个可动态改变高度的虚拟滚动列表
在开发中经常遇到大量的渲染列表数据问题，往往我们就只是简单地遍历渲染，没有过多地去关注是否会存在性能问题，这导致如果数据量较大的时候，比如上万条数据，将会在dom中渲染上万个节点，这将加大浏览器的开销，可能会导致页面卡顿，加载慢等性能问题。因此，在渲染大量数据时，可以选择使用虚拟列表，只渲染用户可视区域内的dom节点。该组件已开源上传npm，可以直接安装使用，Git地址在文尾。
2023-09-20 14:40:56
1115
原创 Vue3 实现一个无缝滚动组件（支持鼠标手动滚动）
在日常开发中，经常遇到需要支持列表循环滚动展示，特别是在数据化大屏开发中，无缝滚动使用频率更为频繁，在jquery时代，我们常用的无缝滚动组件为liMarquee，在vue中已经有vue-seamless-scroll组件（通过Vue2实现，不支持鼠标手动滚动），但是在使用过程中，发现滚动后会存在点击事件失效的问题，并且产品提了个需求，需要支持鼠标手动滚动，也要支持自动滚动，于是痛定思痛，决定通过Vue3来实现该功能，该组件已经实现上传npm，可以直接安装使用，链接在文尾。
2023-09-15 10:38:20
3295
8
原创 Docker Compose
Docker Swarm 是 Docker 官方推出的容器编排和集群管理工具，它可以让多个 Docker 主机（即 Docker 节点）组成一个虚拟的 Docker 集群，以便更方便地部署、扩展和管理容器应用。简单易用的命令和 API：通过简单的命令或 API，就可以创建、部署和管理一个分布式容器应用。高可用和负载均衡：Docker Swarm 支持容器的自动负载均衡和故障转移，以确保应用始终可用。
2023-06-28 17:01:53
507
原创 Docker学习--容器
Docker 容器是 Docker 平台上的一个轻量级的可移植软件打包和交付解决方案。容器是一种独立的、可执行的软件单元，包括应用程序和其所有的依赖项。容器技术使得开发人员可以在不同的环境中以相同的方式部署和运行应用程序，因为它们在不同的环境中表现得几乎相同。与传统的虚拟机不同，Docker 容器不需要完整的操作系统。相反，每个容器都共享主机系统的内核，只提供所需的系统库和其他运行时依赖项。这使得容器非常轻量级和高效，更容易在不同的平台和环境中进行部署和移植。
2023-06-27 14:18:31
884
原创 Docker学习--镜像
Docker 镜像（Docker Image）是一个可执行的软件包，其中包含运行应用程序所需的所有内容，包括代码、运行时、库、环境变量和配置文件等。Docker 镜像非常轻量级，它们是基于分层的文件系统构建的，因此许多 Docker 镜像可以共享相同的基础镜像，这也使得它们在存储和传输时非常高效。以下是 Docker 镜像的一些特点：Docker 镜像是只读的，一旦创建就不能被更改，任何更改都会生成新的镜像。
2023-06-26 09:12:08
2443
原创 初识Docker
Docker 容器是由 Docker 镜像创建而来，与镜像不同的是，容器是可读可写的，并可以运行在 Docker 容器运行时（runtime）环境中。使用 Docker 可以将应用程序和其依赖的库、框架等一起打包成一个 Docker 镜像，该镜像可以在任何支持 Docker 的机器上运行。Docker 客户端（Docker client）： 用于构建、打包和管理 Docker 容器，用户和 Docker 守护进程之间的交互都是通过 Docker 客户端来完成的。Docker 是一个基于容器技术的开源项目。
2023-06-25 14:14:11
919
原创 Nuxt3学习总结（7）
在 Nuxt.js 3 中，Layers 是一个新的概念，用于在应用程序中组织代码。如果你需要将该中间件用作给定页面或页面组件的中间件，则可以通过在页面或组件的 middleware 属性中列出中间件名称来指定该中间件。匿名中间件，直接在使用它们的页面中定义，这些中间件只会针对当前页面组件生效，对其他页面组件不会造成影响。“Pages” Layer：包含所有页面组件，通常在 pages/ 目录下。，这样不需要在页面中指定中间件，每个页面访问都会自动使用到该中间件。目录下，客户端中间件位于。
2023-06-24 15:30:16
522
原创 Nuxt3学习总结（6）
SPA（Single Page Application）指的是一种在浏览器端使用 Ajax 技术来实现无刷新页面更新的应用模式，这样可以提高用户在应用中的交互体验，同时也便于对用户的行为进行追踪和数据收集。通过上述设置，Nuxt.js 会自动帮我们运行一台 Node.js 服务器，在服务端拼接组件代码并输出 HTML 文件，最后将文件返回给客户端。在这种模式下，Nuxt.js 会将所有的路由生成在前端，然后使用 Vue Router 进行导航控制，从而实现单页面应用的效果。下面是这三种渲染模式的详解。
2023-06-23 14:41:34
657
原创 Nuxt3学习总结（05）
app.config配置文件公开应用程序中的响应性配置，能够在生命周期内的运行时更新它，或者使用nuxt插件并使用HMR(热模块替换)编辑它。：该属性用于配置应用程序的构建过程。您可以通过定义选项来自定义构建过程，例如输出目录、用于块和文件的文件名以及要使用的插件。：该属性用于配置应用程序的 HTML 标头。：该属性用于定义应该包含在应用程序中的 CSS 文件。：该属性用于定义应在构建过程中使用的模块（例如。：该属性用于定义应包含在应用程序中的插件。：该属性用于定义应导入到应用程序中的模块。
2023-06-22 14:11:27
623
原创 Nuxt3学习总结（04）
Nuxt遇到错误时，无论是在服务器生命周期中，还是在呈现您的Vue应用程序(SSR和SPA)时，它都会呈现一个JSON响应(如果请求带有Accept: application/json标头)或一个HTML错误页面。这对用户来说并不友好，因此我们需要自定义一个错误页面，展示给用户。
2023-06-21 09:24:27
1062
原创 Nuxt3学习总结（03）
Nuxt 项目下~/server/api目录下的文件会被注册为服务端 API，并约定在这些文件中导出一个默认函数defineEventHandler(handler)，handler 中可以直接返回 JSON 数据或 Promise。在 Vue 或 Nuxt.js 应用中，通常会定义一些事件处理器函数，以便在不同的组件中重复使用。它不会在组件实例创建时立即发起异步数据获取，而是在组件加载后才会发起请求。: 该函数用于在组件实例创建时立即发起异步数据获取，并将结果绑定到当前组件的。中，可以使用该函数。
2023-06-20 09:27:50
858
原创 Nuxt3学习总结（02）
在 Nuxt.js 中，我们可以将应用中的组件、路由等模块导出，然后在其他应用中自动导入。Nuxt.js 3 中引入了自动导入（Automatic Imports）的功能，可以帮助我们更方便地管理应用中的组件、路由、中间件等，减少手动导入的代码量，提高开发效率。Nuxt 中约定把组件放在components/目录中，这些组件只要被用在页面或其他组件中，就会自动导入并注册。自动导入路由：可以将应用中的路由自动导入到路由配置中，不需要手动配置。自动导入组件：可以将应用中的组件自动导入到模板中，不需要手动导入。
2023-06-19 17:15:14
675
原创 小程序数据传递和自定义事件
小程序自定义事件是指开发者可以自定义事件名称和触发方式的事件。通过自定义事件，开发者可以实现组件之间的数据传递和交互。实现一个自定义事件的步骤如下：在组件的js中定义自定义事件的名称和触发方式例如，定义一个名为myeventmethods: {})在上述代码中，方法用于触发自定义事件myevent，并可以传递一个对象作为事件参数，该对象中的myData属性即为需要传递的数据。在组件的wxml中绑定自定义事件在需要监听自定义事件的元素上绑定。
2023-06-18 11:24:21
1992
原创 微信小程序数据绑定和事件触发
在这个例子中，inputValue 是一个变量，当用户在输入框中输入内容时，onInput 事件会被触发，将输入框中的值赋给 inputValue 变量，当用户离开输入框时，onBlur 事件会被触发，将输入框中的值赋给 inputValue 变量。单向绑定：单向绑定是指数据和视图之间的单向关联，当数据发生变化时，视图也会相应地发生变化，但是反过来不行。双向绑定：双向绑定是指数据和视图之间的双向关联，当数据发生变化时，视图也会相应地发生变化，反之亦然。小程序中的事件包括用户的点击、滑动、输入等操作。
2023-06-18 11:20:32
2480
原创 微信小程序生命周期和常用API详解
onLaunch:小程序启动时触发，此时小程序实例已经创建完成，但还未进入应用状态。onShow:小程序启动或从后台进入前台显示时触发，此时小程序已经进入应用状态。select:表示一个下拉列表，可以选择多个选项，可以设置默认选项等属性。onError:小程序发生错误时触发，例如网络请求失败、页面渲染异常等。radio:表示一个单选框，只能选择一个选项，可以设置选中状态等属性。onHide:小程序从前台进入后台时触发，此时小程序已经失去焦点。checkbox:表示一个复选框，可以设置选中状态等属性。
2023-06-16 09:26:30
970
原创 初识微信小程序
WXSS是微信小程序的样式表语言，类似于CSS,用于描述页面的样式和布局。WXML是微信小程序的标记语言，类似于HTML,用于描述页面的结构和内容。需要注意的是，创建新的小程序项目需要先注册一个微信公众平台账号，并获取到相应的 AppID。安装完成后，进入项目目录，在命令行中输入“npm install”命令，安装项目的依赖库和插件。在弹出的窗口中，填写小程序的 AppID、项目名称和项目目录等信息。在微信开发者工具中，打开需要安装vant的小程序项目。安装完成后，可以在微信开发者工具中预览和调试小程序。
2023-06-15 09:13:37
3737
原创 Nuxt3学习总结（01）
在中配置路由：router : {middleware : 'auth' , // 添加中间件以进行身份验证 mode : 'history' , // 使用HTML5历史记录模式 routes : [ {path : '/home' , component : '~/pages/index.vue' } , // 默认路由 {path : '/about' , component : '~/pages/about.vue' } , // 其他路由 ] , } , }在pages目录下创建一个名为。
2023-06-14 10:12:03
805
原创 nuxt3学习（上）
这个目录是 可选的 ，这意味着如果你只使用app.vue， vue-router不会被包括在内(除非你在nuxt.config中设置了pages: true或者有一个app/router.options.ts)，减少应用程序的包大小。components/目录是您放置所有Vue组件的地方，然后可以在您的页面或其他组件中导入这些组件,Nuxt自动导入你的components目录中的任何组件(以及你可能正在使用的任何模块注册的组件)。Nuxt 使用.nuxt/目录在开发中生成您的Vue应用程序。
2023-06-09 16:11:55
1272
原创 初识nuxt3
components/目录是您放置所有Vue组件的地方，然后可以在您的页面或其他组件中导入这些组件，Nuxt自动导入你的components目录中的任何组件(以及你可能正在使用的任何模块注册的组件)。如果你想只根据组件的名称而不是路径自动导入组件，那么你需要使用配置对象的扩展形式将pathPrefix选项设置为false.如果你在嵌套目录中有一个组件,组件的名称将基于它自己的路径、目录和文件名，删除重复的段。在文档中，没有显式导入的每个函数都是由Nuxt自动导入的，可以在代码中原样使用。
2023-06-07 17:53:05
790
原创 VuePress学习指南（下）
要自定义VuePress的主题，需要做以下几步：创建主题文件夹：在VuePress项目的根目录下创建一个themes文件夹，并在其中新建一个以主题名命名的文件夹，例如my-theme。创建主题配置文件：在my-theme文件夹中创建一个config.js文件，用于配置主题的一些选项，例如导航栏、侧边栏、颜色等。创建主题模板文件：在my-theme文件夹中创建一个layouts文件夹，并在其中创建.vue文件，用于定义不同页面类型的布局，如首页、文章页、404页等。
2023-06-02 09:17:55
768
原创 VuePress学习指南（上）
VuePress 是一个静态网站生成器，它基于 Vue.js 和 Markdown 来创建文档网站。VuePress 能够快速创建高质量的文档网站，具有易用性和可定制性。VuePress 采用了现代化的技术栈，包括 webpack、Vue.js、markdown-it 等等，这些技术使得 VuePress 具备自定义主题和插件、支持代码语法高亮、提供搜索和分页等功能。VuePress 还能够对网站进行优化，例如 gzip 压缩、预渲染和缓存等操作，从而提升网站的性能和访问速度。
2023-06-01 16:32:23
1051
原创 大前端之Koa2学习
Koa2是一个基于Node.js的Web框架，它使用了ES6的语法和async/await特性，使得编写异步代码更加简单和优雅。Koa2的核心思想是中间件，它允许开发者将应用程序拆分成小的、可重用的部分，从而使得代码更加模块化和易于维护。Koa2还提供了一些常用的中间件，如路由、静态文件服务、错误处理等，使得开发者可以更加快速地构建Web应用程序。总的来说，Koa2是一个轻量级、灵活、易于扩展的Web框架，适合用于构建中小型的Web应用程序。
2023-05-30 15:17:55
2073
原创 Vite 使用学习指南
支持的框架不同：Vite 支持多种前端框架，包括 Vue、React、Angular 等，而 webpack 则需要通过相应的 loader 和 plugin 来支持不同的框架。构建方式不同：Vite 采用了基于浏览器原生 ES 模块的开发模式，可以在开发时快速启动应用，减少了冷启动时间，而 webpack 则是将所有模块打包到一个文件中。插件开发：Vite 提供了丰富的插件 API，可以通过编写插件来扩展 Vite 的功能，例如添加自定义的文件类型、自定义处理器、自定义中间件等。
2023-05-29 16:16:01
2241
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人