最终效果:https://blog.pingan8787.com/exe-components/demo.html仓库地址:https://github.com/pingan8787/Learn-Web-Components 一、回顾 Web Components 在前端发展历史中,从刚开始重复业务到处复制相同代码,到 Web Components 的出现,我们使用原生 HTML 标签的自定义组件,复用组件代码,提高开发效率。通过 Web Compon...
packages/aura-design: 基于eslint-config-aurai和stylelint-config-aurai规范,使用Solid和Solid Element构建的Web Components元组件库,包括按钮、图标、卡片、布局等基础组件。 packages/aura-design-pro: 与aura-design类似,但封装了一些复杂组件,通常是依赖第三方库的组件,例如支持Markdown渲染的富文本组件、视频播放组...
•packages/aura-design: 基于eslint-config-aurai和stylelint-config-aurai规范,使用Solid和Solid Element构建的Web Components元组件库,包括按钮、图标、卡片、布局等基础组件。 •packages/aura-design-pro: 与aura-design类似,但封装了一些复杂组件,通常是依赖第三方库的组件,例如支持Markdown渲染的富文本组件、视...
•packages/aura-design: 基于eslint-config-aurai和stylelint-config-aurai规范,使用Solid和Solid Element构建的Web Components元组件库,包括按钮、图标、卡片、布局等基础组件。 •packages/aura-design-pro: 与aura-design类似,但封装了一些复杂组件,通常是依赖第三方库的组件,例如支持Markdown渲染的富文本组件、视...
组件化是前端发展的一个重要方向,它一方面提高开发效率,另一方面降低维护成本。主流的 Vue.js、React 及其延伸的 Ant Design、uniapp、Taro 等都是组件框架。 Web Components 是一组 Web 原生 API 的总称,允许…
一个基于Web Components的UI组件库可能包括按钮、表单控件、模态框、标签、导航等各种基础组件,以及这些基础组件的衍生组件。此外,组件库的结构应该包括样式表、文档和示例代码,以方便开发者使用和定制。 样式指南 设计系统应该包括详细的样式指南,包括颜色、字体、间距、布局等各种设计规范。这些规范可以确保UI组件库的一...
Web Components 组件库 All In One 原生组件、跨平台、高性能、无框架依赖、高度自定义、高可复用性、高扩展性、体积小 Web Components UI WCUI $ npm i -S @xgqfrms/wcui# $ npm i -S @xgqfrms/webcomponents-ui @xgqfrms/wcui https://www.npmjs.com/package/@xgqfrms/wcui ...
四、从0到1搭建Aura DesignWeb Components组件库 1、工程目录设计 该项目采用了 Monorepo 设计,旨在统一管理各个子项目,避免开发阶段频繁发布/安装 npm 包来同步代码。具体内容包括: •packages/eslint-config-aurai: 用于管理ESLint配置,集成了TypeScript和Prettier(用于JavaScript/TypeScript格式化)。
Slim.js是一个开源的轻量级 Web Components 库,它为组件提供数据绑定和扩展能力,使用 es6 原生类继承。专注于帮助开发者更好的编写原生web组件,而不依赖于其他框架,但是也提供了良好的拓展性,开发者可以自由拓展。 slim.js 核心很小(压缩后不到 3kB),从名字也能看出它很小 ...