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

快速上手

资源获取

项目 gitHub 地址：https://github.com/yued-fe/lulu

快速使用

复制下面的代码，就可以运行 LuLu UI Hope 主题所有的组件了。

<!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 Hope 主题</title>
    <link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/ui.min.css">
    <script src="https://qidian.gtimg.com/lulu/hope/ui/all.min.js"></script>
</head>
<body>
    <!-- 组件使用这里 -->
</body>
</html>

如果是在前端工程开发环境中，可以使用 NPM 安装使用：

npm install lu2

然后按照对应的框架语法进行 import 引用即可，例如 Vue 项目中：

<script>
import Dialog from 'lu2/theme/hope/ui/all.js'
</script>
<style src="lu2/theme/hope/ui/ui.css"></style>

资源引入

本文档所有样式源代码均使用的是最新的在线资源，但如果是实际开发，建议 NPM 安装或下载并整合到本地项目资源中。

因为线上的 LuLu UI 代码会一直迭代，所以如果直接使用线上资源，可能会影响本地使用。

当然，如果目的是为了学习如何使用 LuLu，可以直接引用在线地址。

Hope 主题所有的 JS 和 CSS 资源都支持独立引入和批量引入。

CSS 独立引入

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

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/*/index.css">

具体使用参见各个组件文档说明。

CSS 完整引入推荐

如果用到 LuLu UI 多个组件，我们可以直接引入一个完整的 ui.css 文件就可以了，可能会有些许冗余，但成本较低，可以忽略。

如果使用本地资源：

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

如果直接使用线上资源：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/ui.css">

JS 独立引入

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

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Drop/index.js"></script>

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

<script type="module">
    import Drop from 'https://qidian.gtimg.com/lulu/hope/ui/Drop/index.js';
</script>

JS 完整引入

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

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/all.js"></script>

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

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

兼容 Safari 浏览器

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

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/safari-polyfill.js"></script>

LuLu UI 已经在内部完成了相关的引入，大家实际开发无需关心具体细节，但是需要知道有这么一回事。

本页贡献者：

zhangxinxu