大前端
文章平均质量分 80
天明-胡金斌
小前端
展开
-
如何基于vue开发ui组件库(heaven-ui)
前⾔Vue是⼀套⽤于构建⽤户界⾯的渐进式框架,⽬前有越来越多的开发者在学习和使⽤。⽽组件库能帮我们节省开发精⼒,⽆需所有东⻄都从头开始去做,通过⼀个个⼩组件拼接起来,就得到了我们想要的最终⻚⾯。在⽇常开发中如果没有特定的⼀些业务需求,使⽤组件库进⾏开发⽆疑是更便捷⾼效,⽽且质量也相对更⾼的⽅案。本⽂阐述了如何基于vue⼀步步完成⼀个UI组件库的打造。组件库官⽹github地址npm地址⼀、技术栈我们先简单了解⼀下要搭建⼀个UI组件库,会涉及到哪些技术栈,下⾯是我选⽤的内容:..原创 2021-05-23 12:48:00 · 507 阅读 · 0 评论 -
深入剖析webpack
背景说到构建工具,我往往会在前面加「自动化」三个字,因为构建工具就是用来让我们不再做机械重复的事情,解放我们的双手的。什么是前端自动化?前端工程师需要维护的代码极为庞大和复杂,代码维护、打包、发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部署工具。常用的构建工..原创 2021-06-12 18:02:43 · 270 阅读 · 0 评论 -
如何做组件库的单元测试
前言在我们开发完一个组件库的后,在做单元测试时,代码覆盖率常常被拿来作为衡量测试好坏的指标,甚至,用代码覆盖率来考核测试任务完成情况,比如,代码覆盖率必须达到80%或 90%。于是乎,测试人员费尽心思设计案例覆盖代码。用代码覆盖率来衡量,有利也有有弊。首先,让我们先来了解一下所谓的“代码覆盖率”。我找来了所谓的定义:代码覆盖率 = 代码的覆盖程度,一种度量方式。关于如何开发组件库,可看这篇:如何基于vue开发ui组件库(heaven-ui)单元测试英文叫 Unit Testing,又称为模块测原创 2022-04-26 17:48:44 · 1018 阅读 · 0 评论 -
pm2的基本使用
PM2PM2 是一个带有负载均衡功能的 Node 应用进程管理器。主要特性:内建负载均衡(使用 Node cluster 集群模块) 后台运行 0 秒停机重载 具有 Ubuntu 和 CentOS 的启动脚本 停止不稳定的进程(避免无限循环) 控制台检测 提供 HTTP API 远程控制和实时的接口 API(Nodejs 模块,允许和 PM2 进程管理器交互)全局安装pm2npm install -g pm2复制代码启动进程pm2 start app.js//原创 2022-02-19 17:02:32 · 641 阅读 · 0 评论 -
如何搭建一个自己的脚手架
脚手架搭建脚手架的目的就是快速的搭建项目的基本结构并提供项目规范和约定。目前日常工作中常用的脚手架有 vue-cli、create-react-app、angular-cli 等等,都是通过简单的初始化命令,完成内容的快速构建。其实我们也可以用git clone url来新建(复制)项目,再 low 一点的方法就是复制粘贴整个文件夹,一样也能达到初始化的目的。脚手架的本质也是从远程下载一个模板来进行一个新项目,但是脚手架可是高级版的克隆,它主要是提供了交互式的命令让我们可以动态的更改模板,然后用一句原创 2022-02-19 16:54:39 · 1938 阅读 · 0 评论 -
什么是XSS?
什么是XSS呢跨网站指令码(英语:Cross-site scripting,通常简称为:XSS)是一种网站应用程式的安全漏洞攻击,是[代码注入]的一种。它允许恶意使用者将程式码注入到网页上,其他使用者在观看网页时就会受到影响。这类攻击通常包含了 HTML 以及使用者端脚本语言。XSS 分为三种:反射型,存储型和 DOM-based如何攻击XSS 通过修改 HTML 节点或者执行 JS 代码来攻击网站。例如通过 URL 获取某些参数<!-- http://www.domain.com?n原创 2021-07-13 15:44:02 · 487 阅读 · 0 评论 -
vite初体验
Vite —— 一种新的、更快地 web 开发工具。vite 是什么vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具,它具有以下特点:1.快速的冷启动 2.即时的模块热更新 3.真正的按需编译Vite介绍Vite,一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。同时不仅有 Vue 文件支持,还搞定了热更新,而且热更新的速度不会随着模块增多而变慢。针对生产环境.原创 2021-05-19 14:02:53 · 538 阅读 · 4 评论 -
升级webpack 5实战
一、背景本次对公司项目进行webpack的升级 , 原有版本是webpack4.42.1, 本次升级目标是webpack5.28.0,已经是很新的版本了。目标,升级Webpack5,应用长效缓存,提升构建速度。二、步骤按照官网升级文档"vue-loader": "^15.9.6","terser-webpack-plugin": "^5.1.1","style-loader": "^2.0.0","mini-css-extract-plugin": "^1.4.0...原创 2021-05-19 14:04:28 · 2108 阅读 · 0 评论 -
什么是Event loop
众所周知 JS 是门非阻塞单线程语言,因为在最初 JS 就是为了和浏览器交互而诞生的。如果 JS 是门多线程的语言话,我们在多个线程中处理 DOM 就可能会发生问题(一个线程中新加节点,另一个线程中删除节点),当然可以引入读写锁解决这个问题。JS 在执行的过程中会产生执行环境,这些执行环境会被顺序的加入到执行栈中。如果遇到异步的代码,会被挂起并加入到 Task(有多种 task) 队列中。一旦执行栈为空,Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行,所以本质上来说 J原创 2021-06-19 12:38:51 · 77 阅读 · 0 评论 -
搭建组件库文档
前言在我们开发完一个组件库的时候,需要有一个组件说明文档,文档页面是最直接的获取信息的窗口。而文档页一般包含了这些信息:组件的描述组件 Demo 示例的展示、描述和源码组件的参数文档组件说明文档是让其他人了解组件库的关键环节,包括组件库的适用范围(pc端,移动端,轻量级还是重量级),兼容浏览器的版本,设计原则和背景,以及社区生态,使用方法等。关于如何开发组件库,可看这篇:heaven-ui文档生成这里推荐 vuepress ,可以快速帮我们完成组件库文档的建设。(https://vue原创 2021-08-21 17:20:57 · 460 阅读 · 0 评论