禅思院
靡不有初,鲜克有终
展开
-
基于vue-cli4.*开发的UI库(极光UI)《二》
在工程中加入markdown 库npm install -D markdown-it markdown-it-anchor markdown-it-chain markdown-it-container, transliteration使用highlight.js高亮代码npm install -D highlight.js清除 aurora-ui/examples下无用的目录和文...原创 2019-12-17 16:19:18 · 3334 阅读 · 7 评论 -
基于vue-cli4.*开发的UI库(极光UI)《一》
前言aurora-ui 是一款基于 VUE-CLI4.* 的前端 UI组件库,是个人在工作中为了更好的学习和使用vue相关技术栈而实现的。本项目的源码和文档主要参考借鉴了 element-ui和 iView。分离了常用业务组件并封装,部分组件参考这两个开源库进行了简化实现。所有样式为方便开发已使用stylus进行了重写,现已实现扩展了约 47 个组件可供日常开发。添加了开源协议,编写本UI库的目...原创 2019-12-16 18:48:15 · 5260 阅读 · 10 评论 -
手把手教你Termius去除登录并解除限制,非常简单
Termius 8 去除登录并解除限制 多协议远程管理软件 for Mac or for Win原创 2024-01-30 13:58:02 · 1143 阅读 · 0 评论 -
VUE3-响应式
Vue 3引入了新的响应式系统。这个新的响应式系统使用了 ES6 的 Proxy 和 Reflect 的新特性,相对于 Vue 2.x 使用的 Observer 和 Watcher,提供了更加简洁、高效的实现。Vue3 响应式系统的核心是依赖收集器(Deprecator)。依赖收集器可以追踪一个对象上的所有依赖关系,并在对象发生变化时触发更新。原创 2024-01-04 18:15:00 · 531 阅读 · 0 评论 -
Module-Federation[微前端]
微前端是借鉴了微服务的理念,将一个庞大的应用拆分成多个独立灵活的小型应用,每个应用都可以独立开发,独立运行,独立部署,还可以随意组合,这样就降低了耦合度,从而更加灵活。技术栈无关 主框架不限制接入应用的技术栈,子应用可自主选择技术栈(vue,react,jq,ng等)独立开发/部署 各个团队之间仓库独立,单独部署,互不依赖增量升级 当一个应用庞大之后,技术升级或重构相当麻烦,而微应用具备渐进式升级的特性独立运行时 微应用之间运行时互不依赖,有独立的状态管理。原创 2024-01-04 10:02:13 · 760 阅读 · 1 评论 -
2022年来啦,你有属于自己的库吗?来这里,让你新的一年一起虎虎生威,事半功倍。
@TOC)前言为了进一步的进行前端工程化的打下基础,也为了公司产品线的增多,开发维护的项目也越来越多等提到前端的开发效率,从而解放大量的劳动力。从零搭建一个工具库来给各个项目使用,也有人说啦,现在工具库市面上那么多,没有必要去单独去搞一个,这不是给自己增加额外的劳动力吗?一点都不划算,比如像市面上的lodash工具库等等,市面的拿过来用是很方便,单不利于我们去维护,也不利于自己的开发,包的体积也大,影响打包后整个项目的大小;不一定适用你的项目和公司,所以公司搭建一个工具库也是很有必要的。下面我这边一步原创 2022-01-24 00:00:00 · 292 阅读 · 0 评论 -
Rollup 打包通用项目工程库[非TS],工程化之路
Rollup 打包通用项目工程库[非TS],工程化之路很长一短时间没有写博客啦!最近刚好有空写了一下,本文侧重于实践,文案描述不太多,总体实现效果如图效果图1效果图2Rollup 的基础概念就不说的,不知道请点击这里看官网在这里就不废话多说啦,直接上代码,下面就是通用的一些基础配置,我们所有的工具类,组件库等都是通过这一块实现的,形成通用的一些配置,形成工程化的模板!下面我以组件库图表为例子,项目工程结构如下:项目目录├─ packages原创 2021-09-03 08:26:17 · 1026 阅读 · 1 评论 -
一个基于在线切换和自定义的实现的换肤研究和实现
一个基于在线切换和自定义的实现的换肤研究和实现前言市面上有好多在线切换主题的方式,但是我个人感觉不是那么的完美,感觉有实现上只是表面的上一些简单的变化,都是借助webpack + less/scss的实现。最近在做UI组件库的一些事情,对在线换肤的一点方式实现,一下只是个人的一点想法,仅仅只代表个人。市面上的分析可供选择的换肤这种方式限制性太强,也就是针对性,在产品发布之前定义好几套主题,然后打包到生产环境中,想要超出之外要么重新定制一套出来,之后打包发布,很麻烦!Element-UI上原创 2021-07-19 09:39:20 · 148 阅读 · 0 评论 -
搭建rollup的组件库,研究和实战
搭建rollup的组件库,研究和实战前言今年慢慢的发现大部分主流的前端框架vue和react都采用rollup来打包,但是好多UI组件库,基本没有用rollup来打包,接下来我就基于rollup搭建一个UI库,来发布组件,并且对rollup的一些实践,并记录下来。rollup 介绍官网上是这样说的Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式,这些标准都包含在 JavaS原创 2021-03-29 09:22:02 · 606 阅读 · 2 评论 -
基于md的UI组件文档库研究
写在前面的话自过年以来,由于时间的原因,一直没有更新博客,年前规划的事情,一直没有推动,一直想写个基于vue3的禅思UI库,迟迟为动手,各个方面的原因都有吧,一边工作,一边要忙着考试,心有余力而不足啊!前端组件化是我们前端圈子里最流行的一段话,也是我们前端在开发过程中面临的挑战。所以我们面临的问题很多,学习的有限,所以一边的学习,一边的去研究,把已有的消化为自己的,这才是技术人员的成长之道。我为了后面我自己的禅思UI库做准备,所以我根据已有的,慢慢去琢磨,看看别人的思想和设计,来完成属于禅思的组件原创 2021-03-15 09:59:58 · 874 阅读 · 0 评论 -
定制团队的eslint rules(二)
@[TOC](定制团队的eslint rules(二))前言在上篇文章中定制团队的eslint rules(一),已经介绍了eslint的各种参数说明,配置等等,对它有个大致的了解,接下来,我如何定义的一个自己的团队规则配置,以cicada-eslint-config为列。项工程搭建目录树我搭建我的一个cicada-eslint-config 的项目工程,具体目录树如下。cicada-eslint-config├─ index.js├─ package.json├─ README.md└原创 2021-01-04 11:24:30 · 277 阅读 · 0 评论 -
LayUI 在 table 中 使用 select,input,date等form组件
LayUI 在 table 中 使用 select,input,date等form组件需求在表格中新增 td ,td种包含select,input,date组件并且编辑,而不是直接点击才可编辑,点击保存一直保存到后端。废话不多说,代码撸起来。 看效果图上代码.... overflow: visible; } .layui-table-body { overflow: visible; } </style></hea原创 2020-10-01 08:44:00 · 1544 阅读 · 0 评论 -
我的第一个基于HarmonyOS的 (鸿蒙 OS)TV
距离鸿蒙 OS 2.0 发布已经过去一些日子了,由于公司项目的事情比较多,一直没有怎么去关注,这位国产的HarmonyOS,闲暇之余,我看了下这个HarmonyOS,感觉还不错,支持java和JavaScript开发,对于做作为前端开发人员,也顺便了解下!HarmonyOS 是什么?在官网上是这样说的: HarmonyOS是一款“面向未来”、面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统。在传统的单设备系统能力的基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形原创 2020-09-27 18:11:43 · 27182 阅读 · 16 评论 -
前端工程化研究之数据mock化
前端工程化研究之数据mock化相信大家都知道,前后端分离最的好处就是各司其职,效率更高。我们都知道,在早些年,也就是”三剑客“时代,往往等待后端开发完成之后,前端才能完全介入开发工作,有冲淡测试数据的角色。前端的眼里越来越大,往往项目的延期,推到前端的角色上,大部分的项目开发,往往都是前期很轻松,等到快上测试的时候,就是各种加班,更有甚者通宵,这又是谁的过呢?前端、后端?各种责任的推卸。开发的周期后端和前端不是同步进行的,造成开发的周期扩大,成本的增加;前后端的分离开发,按照规范执行,事半功倍,效率、成本原创 2020-09-07 16:07:05 · 2114 阅读 · 2 评论 -
前端与Nginx[介绍,安装,负载均衡调度,算法,配置]
前端与Nginx[介绍,安装,负载均衡调度,算法,配置]前言相信我们前端的人都知道,前端只管开发一些代码,打包,之后丢给后端人员,让后端人员去部署,这样的情况屡见不鲜,贴别在毕业的一群大学生,也看到了曾经自己的身影。在几年前,在vue 没有流行之前,前端的基本都是放在后端的,前端只做一些工作,切图,html,css,js 等等,很少关注自己的写的代码如何部署,有的人甚至都不关心,有情可原。现在...原创 2020-01-20 14:49:10 · 3712 阅读 · 3 评论 -
webSocket封装,心跳检测+断线重连基于ES6 class
ES6 class 封装websocket 使用介绍在《菜鸟教程中》这样介绍WebSocketWebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的...原创 2020-01-16 12:13:39 · 8090 阅读 · 12 评论 -
深入了解npm
我们作为一个前端的开发人员,无论你是刚刚入行还是已经入行很久,我们都有必要了解下npm,在这个日益变更的互联网时代,我们已经要快速跟上时代的发展,不然就被社会淘汰,扯远啦!回归正传,之前我写过一篇文章叫《项目中利用npm生成package.json的那点事儿》,我感觉有点太简单啦!适合一些刚刚入门的人来看,现在想具体了了什么是npm,它做了什么?干了什么?这样对们了解项目,了解各种依赖,更好的管理...原创 2020-01-13 01:10:59 · 841 阅读 · 1 评论 -
git subtree 研究,提高项目管理效率
使用git subtree 管理项目前言一个公司基本都有UI/UE + 前端的开发人员,UI/UE 还有属于整个公司的设计(针对小型的),公司基本都是一个好几个项目,每个项目都有自己独立的模块。但是因为各个开发人员的分布在不同的产品,所以人员与人员之间有可能造成相同的组件或者业务,组件,出现重复的问题,如果前端之间沟通很少的话,会有可能造成人员开发时间的浪费,增加开发时间和项目的成本,不利于公...原创 2020-01-02 16:24:09 · 2825 阅读 · 1 评论 -
vue-cli3引入svg-icon正确姿势
在博客的前边已经介绍前端svg-icon的使用.为啥要这样做,我们都知道任何一个项目到上线经过一段时间的UI设计,开发,测试等流程,为了统一管理项目中所使用的icon,也是为了后期的更改,更为了多人开发的使用,这样统一引用,给开发带来很好的收益以及减少开发时间,也为了后期更好的维护,下面我以项目实列来说下(vue-cli3脚手架构建):项目构建生成目录:在构建的项目中在src的compone...原创 2019-01-22 10:18:10 · 10088 阅读 · 2 评论 -
前端进阶之路之webpack
今天给公司做个培训,顺便做个ptt。本次项目DEMO欢迎进入个人公众号 ,一起学习啊!原创 2019-03-01 17:19:43 · 2923 阅读 · 1 评论 -
Babel 不是万能的, 慎用 for..of
最近被一个for…of的问题耽误好久,发现是for…of的问题,哈哈,真的很苦逼啊,有时候能过,有时候过不了,看babel 的心情啦!什么是Babel给大家讲个故事传说古时候一群人想建一个通天塔,去天上看看上帝在干什么。上帝于是挥挥手,让这群人说不同的语言,于是他们再也不能顺畅沟通,塔也就建不起来了。在JavaScript中,不同版本的浏览器对JavaScript的版本各有要求,而...原创 2019-09-09 18:12:33 · 2725 阅读 · 1 评论 -
项目中锁定npm依赖包版本
缘由package.json文件中列出了我们需要的npm包依赖,正常情况下都是直接npm install即可,并没有在意。可是前段时间新来同事发现项目出现问题了。找了好久,都是同样的代码。我的可以正常运行,同事的却不行。 最后发现是公共库的版本问题导致考虑到package.json文件中包版本中的^符号匹配的范围比较大。参考npm官方给出的解释:^1.2.3 := >=1.2.3 &l...原创 2019-08-27 19:50:06 · 5019 阅读 · 2 评论 -
基于vue-cli4.*开发的UI库(极光UI)《五》
之前的工作都已经做完啦,现在这篇文章告诉大家怎么去发布。在发布之前,来我们先说说npmnpm是什么?npm是javascript著名的包管理工具,是前端模块化下的一个标志性产物,简单地地说,就是通过npm下载模块,复用已有的代码,提高工作效率和移动端开发中,iOS使用的Cocoapods,Android使用的maven有异曲同工之妙。npm 官网介绍如何发布一个自己的npm包第一我们首先要有...原创 2019-12-23 08:38:26 · 3360 阅读 · 6 评论 -
基于vue-cli4.*开发的UI库(极光UI)《四》
前言经过前面的三篇文章,UI文档工程基本已经完成,接下啦就是愉快的定制我们自己的UI把。从第一个滚动条[AuScrollbar]组件写起。新建文件夹 libs,路径 packages/libs新增工具类dom.js,操作dom/** * 去除空格 * @param {String} string */const trim = function (string) { return...原创 2019-12-19 13:58:59 · 3043 阅读 · 3 评论 -
基于vue-cli4.*开发的UI库(极光UI)《三》
定制提交日志格式化,文档化,规范化参考我下面的2篇文章git 加入钩子和提交信息规范化https://blog.csdn.net/alnorthword/article/details/88537561新建git-hooks// eslint-pre-commit.jsconst shell = require('shelljs')const path = require('path...原创 2019-12-17 17:57:36 · 2851 阅读 · 4 评论 -
研究Javascript 中的 AST
聊一聊 Javascript 中的 AST原创 2019-12-18 18:13:51 · 2487 阅读 · 2 评论