LuLu UI Edge版中文文档 » 使用与发布

资源获取

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

设计资源：LULU 提供 Figma UI 组件库设计资源文件，来帮助业务快速设计出高质量的产品原型。新窗口预览点我，当前页预览点我，下载点我。使用过程有任何疑问或者需要帮助点我反馈问题。

资源使用

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

如果是多人合作的正式项目，应当获取完整 LuLu UI 资源。

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

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

资源引入

JS和CSS资源都支持独立引入和批量引入。

CSS独立引入

独立引入适用于轻量级的小页面，或者只想使用某一组件场景。类似下面：

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

如果是在主流前端框架开发环境中，可以先安装 LuLu UI：

npm install lu2

使用 import 语法：

import 'lu2/theme/edge/css/common/ui/Drop.css';

CSS完整引入^推荐

LuLu UI 内置两个合集CSS，一个是 form.css，包含所有表单控件样式，适合用在演示页面中。

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/form.css">

或者：

import 'lu2/theme/edge/css/common/form.css';

还有一个是 ui.css，包含所有组件样式，推荐用在正式项目中。

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

或者：

import 'lu2/theme/edge/css/common/ui.css';

JS独立引入

独立引入适用于轻量级的小页面，或者只想使用某一组件场景。使用示意：

<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/ui/Drop.js"></script>

Edge 主题中的UI组件均采用原生的 import/export 语法，因此，在引用的时候需要设置type="module"，当然，也可以在JavaScript代码中进行引用，例如：

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

如果是在主流前端框架开发环境中，可以使用 import 语法：

import 'lu2/theme/edge/js/common/ui/Drop.js';

支持动态引入：

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

JS完整引入

所有JS都整合在一个JS中。

<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/all.js"></script>

完整引用的 all.js 并没有任何 export 暴露，因此：

• type="module"不是必需的。
• 可以使用暴露在全局的对象进行构造，类似 Dialog、LightTip 等。

兼容 Safari 浏览器

由于 Safari 浏览器目前还不支持内置自定义元素，因此，对于部分 UI 组件，如果需要兼容 Safari 浏览器，还需要引入下面这段 JS：

<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/safari-polyfill.js"></script>

资源概览

基本目录结构如下：

js
 |--common
       |----ui
       |    |--Color.js
       |    |--Datalist.js
       |    |--DateTime.js
       |    |--Dialog.js
       |    |--Drop.js
       |    |--ErrorTip.js
       |    |--Follow.js
       |    |--Keyboard.js
       |    |--LightTip.js
       |    |--Loading.js
       |    |--Pagination.js
       |    |--Range.js
       |    |--Select.js
       |    |--Tab.js
       |    |--Tips.js
       |    |--Validate.js
       |
       |--comp
       |    |--Table.js
       |    |--Form.js
       |
       |--all.js         // build by running 'node run edge'

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

各个JS具体作用参见下表：

资源的发布

跟着项目走。