- 博客(25)
- 收藏
- 关注
RSS订阅原创 Pnpm + Turbo 搭建 Web Component Monorepo 组件库
技术选型 使用 Pnpm + Turbo 搭建 Web Component Monorepo项 组件库，提高开发构建速度
2024-04-06 14:02:23
1727
原创 Web Component 组件库有什么优势
web component 搭建组件库有哪些优势，使用 Stencil.js 造一个 Element-plus 风格的 Web Component 组件库
2024-04-04 16:17:50
1061
原创 基于 Editor.js 开发富文本编辑器库
基于 Editor.js 封装富文本编辑器库，可以用于 Vue 和 React 项目，根据需求可以灵活添加自定义的编辑工具，通过插件扩展功能
2023-12-23 23:36:57
899
1
原创 记录一次《Vue 组件库开发》技术分享
前言为了在团队推广落地组件库，让大家参与到组件库的贡献，准备了一场《组件库开发》技术分享，让大家了解组件库的搭建流程，熟悉组件库项目。为什么造轮子？为什么要造一个组件库轮子？毕竟这需要团队投入大量的人力和精力的一件事情。回答清楚这个问题，才能说服领导和同事们知道做这件事情的意义。首先分析目前使用组件库的现状，对于 Element-ui 组件库来说，目前使用存在不足的地方：官方团队不在维护新增组件功能只提供基础组件，封装的方法、属性都是基本需求的，不够丰富不能定制主题和样式，不满足团队的UI规范
2022-10-17 19:00:52
680
1
原创 Vue3 源码系列：项目调试和项目架构分析(一)
源码阅读，知其然知其所以然，学习框架背后优秀的设计思想和理念，接触开源项目，零距离和大佬接触，吸收他们优秀的编程经验
2022-09-22 11:07:33
1289
1
原创 基于element-plus button 源码分析造轮子
实现组件 button 新增功能和自定义UI换肤，使用 SCSS 变量和 CSS 自定义属性，参考 element-plus`源码造轮子
2022-09-07 22:06:51
1500
原创 element-ui 组件库 button 源码分析
前言团队要根据新的 UI 规范实现一个组件库，button 组件规范要支持多种主题换肤，字体颜色、背景颜色、边框和禁用使用新的规范，并且一种主题颜色「主要组件」上使用两种主题颜色混合。另外，增加多一种幽灵按钮类型，经过分析，在 element-ui 的 button 组件上改造麻烦，不好维护，所以需要造一个 button 组件，阅读 element-ui 组件库 button 的源码设计，参考 element-plus css 自定义变量 实现element-ui 源码分析 buttonbutton
2022-09-02 10:57:16
1997
原创 Vue2.7 + Vite3.2 + Rollup 组件库开发指南
基于 Vue2.7 + Vite3.2 + Rollup 搭建 Vue 组件库，沉淀通用和业务组件，提高开发效率
2022-08-23 17:00:35
1303
原创 Vue组件库必备 Sass(Dart) 知识
Dart Sass 是Sass 的主要实现版本，这意味着它集成新功能要早于任何其它的实现版本。 Dart Sass 速度快、易于安装，并且可以被编译成纯JavaScript 代码，这使得它很容易集成到
2022-08-14 11:42:34
4168
原创 水平、垂直居中布局大全
文章目录水平居中布局text-alignmargin + autofloat + margin autoposition + transform / marginflex + justify-contentdisplay - table 水平居中grid 水平居中垂直居中布局height + line-heightvertical-aligntable + vertical-alignabsolu...
2020-05-05 18:21:20
880
原创 ES6 常用语法和开发总结（万字长文）
文章目录前言let 声明 VS const 声明解构赋值字符串新增方法正则表达式数值扩展函数数组对象Set 和 Map 数据结构SetMapProxy 拦截器ReflectPromiseAsync 函数ClassModule 模块编程风格前言阮一峰老师的 ES6 入门教程 看了好几遍，发现每次看完都感觉有很多地方不懂，越看越焦虑，现在稍微明白了，这可能是大多数人追求的完美主义，希望每件事情都...
2020-05-01 18:43:22
413
原创 Element-ui 和 vue-cropper 实现图片上传按尺寸大小裁剪
使用 element-ui 和 vuedraggable 实现图片上传按尺寸大小裁剪功能，这是 github源码element-ui upload 组件element-ui upload 组件上传图片，设置自动上传，使用 before-upload 钩子进行上传校验将图片文件转化为图片路径进行裁剪<el-upload class="upload-banner" ...
2020-04-06 23:25:22
8855
2
原创 一名合格前端人员必须知道的 this 用法和陷阱（JS系列之三）
欢迎大家关注，接下来我会写一个关于 JavaScirpt系列文章，希望我们一起进步。前言this 关键字是 JavaScript 中最复杂的机制之一。它是一个很特别的关键字，被自动定义在所有函数的作用域中。作为一名前端攻城狮对它再熟悉不过了，然而正是因为熟悉它所以很容易忽略它，以至于用它时踩了不少的坑，甚至在面试时还因为它挂了。所以学习和掌握 this 的用法和一些陷阱对于进阶成名一名合格...
2020-03-22 16:23:22
334
原创 深入学习作用域和闭包—全面（JS系列之二）
作用域在学习作用域之前，先了解两个重要的概念：编译器、引擎编译器：负责词法分析及代码生成等编译过程引擎：负责整个 JavaScript 程序的编译和执行什么是作用域通俗的来讲就是变量起作用的范围。比较规范的解释（引用《你不知道的 JavaScript 》上卷），负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行代码对这些标识符的访问权限。在...
2020-03-22 15:01:01
288
原创 深入了解JavaScript执行过程（JS系列之一）
前言JavaScript 执行过程分为两个阶段，编译阶段和执行阶段。在编译阶段 JS 引擎主要做了三件事：词法分析、语法分析和代码生成；编译完成后 JS 引擎开始创建执行上下文（JavaScript 代码运行的环境），并执行 JS 代码。编译阶段对于常见编译型语言（例如：Java ）来说，编译步骤分为：词法分析 -> 语法分析 -> 语义检查 -> 代码优化和字节码生成...
2020-03-22 14:59:07
2741
原创 Vuex多模块开发应用
Vuex多模块开发应用Vuex多模块开发应用背景使用 Vuex 的modulemodule 的命名空间的高级用法Vuex 使用的小技巧State仓库字段太多怎么维护 —— 使用函数使用mapState, mapGetters, mapMutations, mapActions 辅助函数减少代码量mapStatemapGettersmapMutations辅助函数mapActions辅助函数模块中使...
2019-05-30 15:29:25
1801
原创 一枚菜鸟前端工程师月度工作总结
工作总结前言技术工作学习2019年的展望前言每个月进行工作总结，有利于自己回顾在这个月完成了什么工作，有哪些地方做的好，想想还能不能做的更好；哪些地方做的不好遇到哪些问题，记录下来，审视自己避免重蹈覆辙。以下从技术、工作、学习上来总结一下自己这个月遇到了什么问题，有哪些感悟以及未来如何去做一个梳理。技术在技术上的收获来源于具体的场景和解决的问题。这周遇到了两个问题。一是如果是多条件判断赋值...
2018-12-22 12:33:00
10028
1
原创 JavaScript系列之一 (数据结构）
JavaScript基础数据结构JavaScript数据类型JavaScript数据类型分类基本类型Null类型Undefined类型Number 类型String 类型Boolean类型类型转换引用类型Array类型Object数据类型ES5中的方法ES6对象的新增方法JavaScript数据类型JavaScript数据类型分类JavaScript数据类型分为基本类型和引用类型基本类型：...
2018-11-15 00:09:27
221
原创 Android通过JSON数据格式和java服务后台进行数据交互
Android和JAVA后台实现数据通信前言项目介绍目录结构介绍功能介绍登陆功能特别重要注册功能功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart...
2018-10-28 11:20:13
11167
3
原创 手动实现一个js的call, apply, bind, instanceof方法
手动实现js的call, apply, bind, instanceof方法call方法apply方法bind 方法call方法/** * 实现一个caLl方法 */Function.prototype.mycall = function(context) { //判断是否传入指定的对象 context = context || window; //拿到传入的参数 le...
2018-10-14 19:43:26
1234
原创 vue-cli + webpack + sass 搭建一个工程化项目
环境安装1、首先安装 node的环境，官网地址这里 检查是否安装成功node -v //node的版本npm -v //npm是node的包管理器如果出现 “ 不是内部或外部命令，也不是可运行的程序或批处理文件。”需要到环境变量中进行配置 node -vv10.5.0 npm -v6.1.02、安装vue-cli由于npm的服务器在国外，网速慢而且安装容易失...
2018-08-31 23:58:50
1430
转载 阿里云ECS服务器部署javaweb项目整个流程
阿里云ECS建网站超详细全套完整图文教程！菜鸟必看！ 第一步：如何以最低价格快速买到阿里云服务器？1.1 如果我是学生，我如何通过￥9.9买到价值￥117的服务？答：用￥9.9购买云服务器ECS是阿里云学生专属活动。首先，你需要在阿里云官网注册账号。然后在阿里云官网首页点击校园扶持，经学生认证后便...
2018-08-12 16:11:34
11759
4
原创 git的常用使用方法和命令总结
git的安装和基本配置git的安装在这里以Windows环境为例，git的安装很简单，直接点击next,下一步，下一步就行了，安装完成之后，点击鼠标右键，选择Git Bash Here就启动了git的客户端。 下载网址：下载git工具网址 其他平台的安装可以参考这里git的配置用户信息 配置个人的用户名称和电子邮件地址（可以读写）：git config --g...
2018-08-08 19:52:31
227
原创 CSS文本样式和CSS3文本效果以及背景
CSS文本样式text-indent属性text-indent属性可以为特定选项的文本进行首行缩进，取值可以是长度值或百分比，它的属性值通常使用em作为单位，text-indent: 2em;表示首行缩进两个字符。另外要注意的是text-indent属性只在块级元素其作用，在行内元素或行内块级元素不起作用，同时它也会被继承。text-align属性text-align属性值分别...
2018-07-13 23:29:47
10612
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人