{"id":13439933,"url":"https://github.com/yued-fe/lulu","last_synced_at":"2025-05-13T17:13:26.819Z","repository":{"id":40477097,"uuid":"111541940","full_name":"yued-fe/lulu","owner":"yued-fe","description":"跨端跨框架的原生 UI 组件库，即插即用","archived":false,"fork":false,"pushed_at":"2025-02-17T03:40:55.000Z","size":5010,"stargazers_count":2795,"open_issues_count":4,"forks_count":266,"subscribers_count":62,"default_branch":"master","last_synced_at":"2025-04-25T14:43:52.795Z","etag":null,"topics":["components","css","html","javascript","lulu","lulu-ui-js","ui","web-components"],"latest_commit_sha":null,"homepage":"https://l-ui.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yued-fe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-11-21T11:46:44.000Z","updated_at":"2025-04-22T14:45:25.000Z","dependencies_parsed_at":"2024-11-19T01:10:25.594Z","dependency_job_id":"ed1e8eee-d514-4eba-99ea-65b08bf9667e","html_url":"https://github.com/yued-fe/lulu","commit_stats":{"total_commits":237,"total_committers":12,"mean_commits":19.75,"dds":0.5274261603375527,"last_synced_commit":"df15107dd656d8b9d24a62d4eaacc5aea54262b3"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yued-fe%2Flulu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yued-fe%2Flulu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yued-fe%2Flulu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yued-fe%2Flulu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yued-fe","download_url":"https://codeload.github.com/yued-fe/lulu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253990492,"owners_count":21995776,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","css","html","javascript","lulu","lulu-ui-js","ui","web-components"],"created_at":"2024-07-31T03:01:18.287Z","updated_at":"2025-05-13T17:13:21.800Z","avatar_url":"https://github.com/yued-fe.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","HarmonyOS","目录","前端常用"],"sub_categories":["Windows Manager"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://imgservices-1252317822.image.myqcloud.com/image/093020210104728/9999e481.svg\" width=\"227\" height=\"98\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e追本溯源，穿越沉浮\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/lu2.svg\" height=\"20\"\u003e \u003cimg src=\"https://img.shields.io/npm/l/lu2\" height=\"20\"\u003e\n\u003c/p\u003e\n\n# LuLu UI\n\nLuLu UI 是阅文集团荣誉出品的前端 UI 组件库。\n\n形象气质如下图，柔软亲近，使用简单灵活，适用场景广泛，适合面向外部用户的 PC 网站，或者需要轻量与敏捷的项目。\n\n\u003cimg data-src=\"https://qidian.gtimg.com/lulu/modern/css/common/images/temp/figure.png\" width=\"122\" height=\"137\" src=\"https://imgservices-1252317822.image.myqcloud.com/coco/s06052023/01633c5c.0dk4w0.png\"\u003e\n\n## 开发\n\n拉取完整项目，包括 gh-pages 分支，然后执行下面的语句即可开发：\n\n```js\n// 所有主题\nnode run\n```\n\n也可以只启动某一个主题，例如：\n\n```js\n// Edge主题\nnode run edge\n```\n```js\n// Hope主题\nnode run hope\n```\n\n对应主题的演示兼文档页面的本地访问入口：\n\n* Pure主题：http://localhost:10086/docs/pure/about.use.html\n* Edge主题：http://localhost:10086/docs/edge/about.use.html\n* Hope主题：http://localhost:10086/docs/hope/about.html\n\n此时，修改项目的 JS 和 CSS 文件，刷新对应的组件页面，就可以看到变化的效果了。\n\n### 注意：\n如果执行失败，提示 gh-pages 是无效名称，可以执行下 ```git checkout gh-pages``` ，然后在回到 master 分支执行 ```node run```。\n\n文档页面禁止在 master 分支提交，如果需要推送，请切换到 gh-pages 分支。\n\n## 使用文档\n\n* \u003ca href=\"https://l-ui.com/\"\u003eLuLu UI 中文文档兼演示\u003c/a\u003e（GitHub 托管，访问有延迟，IE8 无法访问）\n* \u003ca href=\"https://www.zhangxinxu.com/sp/lulu/mockup/\"\u003eLuLu UI 中文文档兼演示\u003c/a\u003e（国内服务器托管，速度可以，IE8 可以访问）\n\n关于适合使用 LuLu UI 的场景，可以访问下面的视频介绍：\n\n\u003ca href=\"https://www.bilibili.com/video/BV19f4y1N7X1\"\u003e\u003cimg src=\"https://imgservices-1252317822.image.myqcloud.com/image/112220210184445/0c589289.png\" width=\"360\" height=\"240\"\u003e\u003c/a\u003e\n\n## 使用教程\n\n* \u003ca href=\"https://www.zhangxinxu.com/sp/lulu/guide/edge/\"\u003eLuLu UI 中文教程\u003c/a\u003e\n\n## 上手简单\n\nLuLu 整个项目就是提供一些 UI 组件的 JS 和 CSS，很纯粹的 JS 和 CSS，贴近原生，简单直白，即插即用。\n\nLuLu UI 支持直接引入 CSS 和 JS 文件地址，所有主题通用，例如下面的代码引用了全部的 UI 组件库：\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"zh\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eLuLu UI Edge 主题\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/lu2/theme/edge/css/common/ui.min.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- \n      组件使用这里 \n    --\u003e\n\n    \u003cscript src=\"https://unpkg.com/lu2/theme/edge/js/common/all.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e// 业务代码这里\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n您也可以直接单独引入某一个组件，例如：\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/lu2/theme/edge/css/common/ui/Dialog.css\"\u003e\n```\n```html\n\u003cscript src=\"https://unpkg.com/lu2/theme/edge/js/common/ui/Dialog.js\"\u003e\u003c/script\u003e\n```\n\nEdge 主题还支持浏览器原生的 import 引入，例如：\n\n```html\n\u003cscript type=\"module\"\u003e\nimport Dialog from 'https://unpkg.com/lu2/theme/edge/js/common/ui/Dialog.js';\n\u003c/script\u003e\n```\n\n也支持 npm install 后作为包文件使用，例如：\n\n```js\nimport Dialog from 'lu2/theme/edge/js/common/ui/Dialog.js';\n```\n\n或者是在业务代码中动态引入：\n\n```js\nimport('lu2/theme/edge/js/common/ui/Dialog.js');\n```\n\nLuLu UI 基于原生 HTML 特性构建，因此使用的时候 HTML 还是原来的 HTML，CSS 还是原来的 CSS，无需掌握流行概念，参照文档，复制复制，粘贴粘贴，效果就出来了。\n\n由于 LuLu UI 中的代码基础，结构简单，没有炫技成分，也没有复杂技巧，因此非常适合新人的学习。\n\n## 使用场景广泛\n\nLuLu UI 既保留了传统插件即插即用的特性，也支持适合多人合作的模块化加载方式，因此适用场景更加广泛。\n\n* 单人完成的某个简单运营活动页，需要个弹框提示功能，可以直接引入 LuLu UI 中的 Dialog.js，就可以使用了。\n* 某网站看中了 LuLu UI 某一个组件，例如日期选择功能，想拿过来使用，`\u003cscript\u003e` 引入日期选择JS，然后就可以使用了。\n* 对于多人合作大型项目，可以基于 AMD/CMD 规范，或者 ES6 原生的 import/export 进行模块化加载与开发。\n* 对于 Vue 或者 React 项目，想要使用某个组件，但又不希望引入一大堆东西，则 LuLu UI 非常合适，支持 Vue/React 单独引入（见下方使用示意）。\n\n#### 在Vue/React中使用\n\n安装：\n```js\nnpm install lu2\n```\n\nVue/React项目建议使用Edge主题。\n\n在 Vue-CLI 环境中：\n```html\n\u003cscript\u003e\nimport Dialog from 'lu2/theme/edge/js/common/ui/Dialog'\n\u003c/script\u003e\n```\n```html\n\u003cstyle src=\"lu2/theme/edge/css/common/ui/Button.css\"\u003e\u003c/style\u003e\n\u003cstyle src=\"lu2/theme/edge/css/common/ui/Dialog.css\"\u003e\u003c/style\u003e\n```\n\nReact 框架中：\n\n```js\nimport \"lu2/theme/edge/css/common/ui/Button.css\";\nimport \"lu2/theme/edge/css/common/ui/Dialog.css\";\nimport Dialog from \"lu2/theme/edge/js/common/ui/Dialog.js\";\n```\n\nSvelte 框架中：\n\n```js\nimport Dialog from 'lu2/theme/edge/js/common/ui/Dialog.js';\n// 或者全局引入\n// import 'lu2/theme/edge/js/common/all.js';\nimport 'lu2/theme/edge/css/common/ui.css';\n```\n\n## 成熟\n\nLuLu UI 诞生于 2015 年，非 KPI 项目，服务于真实业务场景，会一直不断迭代，不要担心遇到问题会无人问津。\n\n开源是件严肃的事情，LuLu UI 一直认为，如果组件还没有达到不动如山的境地，那就应该继续埋头打磨。这么多年过去了，LuLu UI 经过阅文集团对内对外近20个大中小型项目的实践与打磨，无论是交互细节还是代码本身细节，LuLu UI 现在都已经可以做到不显山露水了。\n\n## 体验\n\nLuLu UI 支持高清屏幕，支持辅助阅读设备无障碍访问，以及不少 UI 框架忽略的键盘无障碍访问。\n\n借助扎实的前端基础知识，LuLu UI 有着很多创新的细节打磨，举个例子：如果用户是通过鼠标点击按钮打开的弹框，则弹框界面平平无奇；如果用户是通过 ENTER 回车键点击按钮打开的弹框，则弹框中的按钮默认会 \u003ccode\u003eoutline\u003c/code\u003e 高亮！\n\n\u003cimg src=\"https://qidian.qpic.cn/qidian_common/349573/851af9151027efc7e412e456f379263e/0\" width=\"748\" height=\"558\"\u003e\n\n这样的细节处理对于 C 端产品颇有价值。\n\n## 快速了解项目目录结构\n\n所有资源都在 \u003ccode\u003e/theme/\u003c/code\u003e 目录下，目前支持4个主题：\n\n* Modern 主题\u003cbr\u003e\n  基于 jQuery，兼容 IE7+，针对 PC 网站。分 sass, css 和 js 3个目录，如果你不想要 sass，那这个文件夹就不用管。图片资源在 css 目录下。\n* Peak 主题\u003cbr\u003e\n  基于 jQuery，兼容 IE8+，针对PC网站。分 sass, css 和 js 3个目录，如果你不想要 sass，那这个文件夹就不用管。图片资源在 css 目录下。\n* Pure 主题\u003cbr\u003e\n  原生 JavaScript 编写，兼容 IE9+，PC，Mobile 网站通用。分 css 和 js 2个目录，没有图片资源目录，所有图像 CSS 内联。\n* Edge 主题\u003cbr\u003e\n  原生 JavaScript 编写，ES6 module，兼容现代浏览器，PC，Mobile 网站通用，Vue、Preact、React全兼容，是面向未来的现代 Web 组件库，目前主力维护主题，所有组件免初始化即可使用。\n* Hope 主题\u003cbr\u003e\n  原生 JavaScript 编写，ES6 module，技术前沿，移动端适用。\n\n组件分 ui 和 comp 两个目录，前者是 UI 组件，后者是基于 UI 组件整合的前端解决方案。\n\n更具体信息可以参见：\n\n* \u003ca href=\"https://l-ui.com/pure/about.use.html\"\u003e文档-使用与发布（Pure主题）\u003c/a\u003e\n* \u003ca href=\"https://l-ui.com/edge/about.use.html\"\u003e文档-使用与发布（Edge主题）\u003c/a\u003e\n* \u003ca href=\"https://l-ui.com/hope/about.html\"\u003e文档-设计思考（Hope主题）\u003c/a\u003e\n\n文档在 \u003ca href=\"https://github.com/yued-fe/lulu/tree/gh-pages\"\u003egh-pages 分支\u003c/a\u003e。\n\n另外，本 git 只展示了输出版本，原始 git 项目在公司内部，测试目录并未对外，并不是说本项目没有测试用例，以及 theme 中的 CSS 和 JS 文件就是开发版本，非编译版本，fork 项目后可直接二次开发。\n\n## 项目成员\n\n排名不分先后：nanaSun，ziven27，lennonover，wiia, popeyesailorman, 5ibinbin, littleLionGuoQing, peter006qi, HSDPA-wen, ShineaSYR, xiaoxiao78, zhangxinxu\n\n## 其他说明\n\n因为 IE7 大势已去，目前 modern 主题已停止维护。\n\n组件均有测试（Hope主题除外），不过在内部项目中，没有对外。\n\nLuLu UI 的设计理念、使用方式不同于常规 UI 组件库。\n\nLuLu UI 没有版本概念，均以发包日期作为版本号。\n\n\u003chr\u003e\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyued-fe%2Flulu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyued-fe%2Flulu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyued-fe%2Flulu/lists"}