上手简单

lulu整个项目就是提供一些UI组件的JS和CSS，很纯粹的JS和CSS，没有任何矫揉造作的“变身”处理。

因此，想要使用lulu ui，直接引入CSS和JS文件地址就可以使用了。HTML还是原来的HTML，CSS还是原来的CSS。什么Vue什么MV*什么高大上概念完全不需要掌握，参照文档，复制复制，粘贴粘贴，效果就出来了。

API文档参见：

使用场景广泛

lulu ui既保留了jQuery插件即插即用的特性，也支持适合多人合作的模块化加载方式，因此适用场景更加广泛。

• 单人完成的某个简单运营活动页，需要个弹框提示功能，可以直接引入lulu ui中的Dialog.js，就可以使用了。
• 某网站看中了lulu ui某一个组件，例如日期选择功能，想拿过来使用，<script>引入日期选择JS，然后就可以使用了。
• 对于多人合作大型项目，可以使用类似seajs这样的加载器进行模块化加载与开发。

成熟

lulu ui诞生到现在已经有好几年了，跟那些年轻的UI框架不同，lulu ui可是见过很多世面的，谦逊内敛不聒噪，没必要大肆鼓吹，口碑说话。

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

体验

lulu ui支持retina视网膜，同时支持aria无障碍访问，以及keyboard键盘无障碍访问。

快速了解lulu项目目录结构

所有资源都在/theme/peak/目录下，分sass, css和js 3个目录，如果你不想要sass，那这个文件夹就不用管。

图片资源在css目录下。

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

更具体信息可以参见：文档-使用与发布

其他说明

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

使用与发布

一、资源获取

Git地址：https://github.com/yued-fe/lulu

二、资源使用

本文档所有样式源代码均使用的是在线资源，但大家实际开发的时候，无论项目大小，建议下载并整合到本地项目资源中。因为线上的LuLu一直迭代，所以如果直接使用线上资源，可能会影响本地使用。

如果是多人合作的正式项目，应当获取完整LuLu UI资源，也就是所有Sass，JS以及图片资源。

如果是比较小型的项目，例如静态运营活动，可以按需下载需要的CSS和JS资源到本地，可以不用全部都下载到本地。

当然，如果目的是为了学习如何使用lulu，也是可以直接使用线上资源的。

1. 资源引入
2. JS和CSS资源都支持独立引入和批量引入。
3. CSS独立引入
4. 独立引入适用于轻量级的小页面，或者只想使用某一组件场景。类似下面：

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/*.css">

1. 具体使用参见各个组件文档说明。
2. CSS完整引入
3. 如果用到LuLu UI多个组件，我们可以直接引入一个完整的ui.css文件就可以了，可能会有些许冗余，但成本较低，可以忽略。
4. 如果使用本地资源：

<link rel="stylesheet" href="/css/common/ui.css">

1. 如果直接使用线上资源：

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui.css">

1. JS独立引入
2. 独立引入适用于轻量级的小页面，或者只想使用某一组件场景。方法有很多，可以直连：

<script src="http://qidian.gtimg.com/lulu/theme/peak/js/plugin/jquery.js"></script><script src="http://qidian.gtimg.com/lulu/theme/peak/js/common/ui/*.js"></script>

1. 也可以是模块化加载，如：

<script src="http://qidian.gtimg.com/lulu/theme/peak/js/plugin/sea.js"></script><script>seajs.config({ base: "//qidian.gtimg.com/lulu/theme/peak/js", alias: { jquery: "plugin/jquery" }}).use(["common/ui/*"], function(*) { // *表示组件名称 // 这里干嘛干嘛});</script>

1. 或者直接使用combo的资源，例如：

<script src="https://qidian.gtimg.com/c/=/lulu/theme/peak/js/plugin/jquery.js,/lulu/theme/peak/js/common/ui/Follow.js,/lulu/theme/peak/js/common/ui/Keyboard.js,/lulu/theme/peak/js/common/ui/DateTime.js"></script>

1. JS完整引入
2. 所有JS都整合在一个JS中，如今流量不值钱，完整引入反而省心。。

<script src="http://qidian.gtimg.com/lulu/theme/peak/js/plugin/jquery.js"></script><script src="http://qidian.gtimg.com/lulu/theme/peak/js/common/all.js"></script>

1. 资源概览
2. 基本目录结构如下：

js |--common |----ui | |--Checkbox.js | |--Color.js | |--Datalist.js | |--DateTime.js | |--Dialog.js | |--Drop.js | |--DropList.js | |--DropPanel.js | |--Enhance.js | |--ErrorTip.js | |--Follow.js | |--Keyboard.js | |--LightTip.js | |--Loading.js | |--Paginaction.js | |--Placeholder.js | |--Radio.js | |--Range.js | |--Select.js | |--Tab.js | |--Tips.js | |--Validate.js | |--comp |--Table.js |--Form.js

1. 其中，ui文件夹下为具体每一个小的ui组件；comp文件夹为components缩写，指整合多个ui组件实现的常用解决方案。

本文仅代表作者个人观点，不代表巅云官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱qq2522407257。更多相关资讯，请到巅云www.yinxi.net学习互联网营销技术请到巅云学院www.yx10011.com。