Home

Awesome

<p align="center"> <img src="https://imgservices-1252317822.image.myqcloud.com/image/093020210104728/9999e481.svg" width="227" height="98"> </p> <p align="center">追本溯源,穿越沉浮</p> <p align="center"> <img src="https://img.shields.io/npm/v/lu2.svg" height="20"> <img src="https://img.shields.io/npm/l/lu2" height="20"> </p>

LuLu UI

LuLu UI 是阅文集团荣誉出品的前端 UI 组件库。

形象气质如下图,柔软亲近,使用简单灵活,适用场景广泛,适合面向外部用户的 PC 网站,或者需要轻量与敏捷的项目。

<img 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">

开发

拉取完整项目,包括 gh-pages 分支,然后执行下面的语句即可开发:

// 所有主题
node run

也可以只启动某一个主题,例如:

// Edge主题
node run edge
// Hope主题
node run hope

对应主题的演示兼文档页面的本地访问入口:

此时,修改项目的 JS 和 CSS 文件,刷新对应的组件页面,就可以看到变化的效果了。

注意:

如果执行失败,提示 gh-pages 是无效名称,可以执行下 git checkout gh-pages ,然后在回到 master 分支执行 node run

文档页面禁止在 master 分支提交,如果需要推送,请切换到 gh-pages 分支。

使用文档

关于适合使用 LuLu UI 的场景,可以访问下面的视频介绍:

<a href="https://www.bilibili.com/video/BV19f4y1N7X1"><img src="https://imgservices-1252317822.image.myqcloud.com/image/112220210184445/0c589289.png" width="360" height="240"></a>

使用教程

上手简单

LuLu 整个项目就是提供一些 UI 组件的 JS 和 CSS,很纯粹的 JS 和 CSS,贴近原生,简单直白,即插即用。

LuLu UI 支持直接引入 CSS 和 JS 文件地址,所有主题通用,例如下面的代码引用了全部的 UI 组件库:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LuLu UI Edge 主题</title>
    <link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui.min.css">
</head>
<body>
    <!-- 
      组件使用这里 
    -->

    <script src="https://unpkg.com/lu2/theme/edge/js/common/all.min.js"></script>
    <script>// 业务代码这里</script>
</body>
</html>

您也可以直接单独引入某一个组件,例如:

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Dialog.css">
<script src="https://unpkg.com/lu2/theme/edge/js/common/ui/Dialog.js"></script>

Edge 主题还支持浏览器原生的 import 引入,例如:

<script type="module">
import Dialog from 'https://unpkg.com/lu2/theme/edge/js/common/ui/Dialog.js';
</script>

也支持 npm install 后作为包文件使用,例如:

import Dialog from 'lu2/theme/edge/js/common/ui/Dialog.js';

或者是在业务代码中动态引入:

import('lu2/theme/edge/js/common/ui/Dialog.js');

LuLu UI 基于原生 HTML 特性构建,因此使用的时候 HTML 还是原来的 HTML,CSS 还是原来的 CSS,无需掌握流行概念,参照文档,复制复制,粘贴粘贴,效果就出来了。

由于 LuLu UI 中的代码基础,结构简单,没有炫技成分,也没有复杂技巧,因此非常适合新人的学习。

使用场景广泛

LuLu UI 既保留了传统插件即插即用的特性,也支持适合多人合作的模块化加载方式,因此适用场景更加广泛。

在Vue/React中使用

安装:

npm install lu2

Vue/React项目建议使用Edge主题。

在 Vue-CLI 环境中:

<script>
import Dialog from 'lu2/theme/edge/js/common/ui/Dialog'
</script>
<style src="lu2/theme/edge/css/common/ui/Button.css"></style>
<style src="lu2/theme/edge/css/common/ui/Dialog.css"></style>

React 框架中:

import "lu2/theme/edge/css/common/ui/Button.css";
import "lu2/theme/edge/css/common/ui/Dialog.css";
import Dialog from "lu2/theme/edge/js/common/ui/Dialog.js";

Svelte 框架中:

import Dialog from 'lu2/theme/edge/js/common/ui/Dialog.js';
// 或者全局引入
// import 'lu2/theme/edge/js/common/all.js';
import 'lu2/theme/edge/css/common/ui.css';

成熟

LuLu UI 诞生于 2015 年,非 KPI 项目,服务于真实业务场景,会一直不断迭代,不要担心遇到问题会无人问津。

开源是件严肃的事情,LuLu UI 一直认为,如果组件还没有达到不动如山的境地,那就应该继续埋头打磨。这么多年过去了,LuLu UI 经过阅文集团对内对外近20个大中小型项目的实践与打磨,无论是交互细节还是代码本身细节,LuLu UI 现在都已经可以做到不显山露水了。

体验

LuLu UI 支持高清屏幕,支持辅助阅读设备无障碍访问,以及不少 UI 框架忽略的键盘无障碍访问。

借助扎实的前端基础知识,LuLu UI 有着很多创新的细节打磨,举个例子:如果用户是通过鼠标点击按钮打开的弹框,则弹框界面平平无奇;如果用户是通过 ENTER 回车键点击按钮打开的弹框,则弹框中的按钮默认会 <code>outline</code> 高亮!

<img src="https://qidian.qpic.cn/qidian_common/349573/851af9151027efc7e412e456f379263e/0" width="748" height="558">

这样的细节处理对于 C 端产品颇有价值。

快速了解项目目录结构

所有资源都在 <code>/theme/</code> 目录下,目前支持4个主题:

组件分 ui 和 comp 两个目录,前者是 UI 组件,后者是基于 UI 组件整合的前端解决方案。

更具体信息可以参见:

文档在 <a href="https://github.com/yued-fe/lulu/tree/gh-pages">gh-pages 分支</a>

另外,本 git 只展示了输出版本,原始 git 项目在公司内部,测试目录并未对外,并不是说本项目没有测试用例,以及 theme 中的 CSS 和 JS 文件就是开发版本,非编译版本,fork 项目后可直接二次开发。

项目成员

排名不分先后:nanaSun,ziven27,lennonover,wiia, popeyesailorman, 5ibinbin, littleLionGuoQing, peter006qi, HSDPA-wen, ShineaSYR, xiaoxiao78, zhangxinxu

其他说明

因为 IE7 大势已去,目前 modern 主题已停止维护。

组件均有测试(Hope主题除外),不过在内部项目中,没有对外。

LuLu UI 的设计理念、使用方式不同于常规 UI 组件库。

LuLu UI 没有版本概念,均以发包日期作为版本号。

<hr>

MIT License