LuLu UI Edge主题使用教程-安装

虽然 LuLu UI Edge 主题是基于 Web Components 开发的，但是在实际的策略上和常规的 Web Components 组件还是有区别的。

区别包括：

样式直接暴露在外，和主文档公用一个上下文，因此，在安装的时候，CSS 文件需要独立引入，而不是只引入 JavaScript 文件就结束。
因为 LuLu UI 的设计理念是轻 JavaScript，重 HTML。
会在全局暴露一个公开可访问的对象，使支持用户可以使用 new 语法进行构造，丰富组件的适用场景。

鉴于上面的这种设计，LuLu UI Edge 主题支持多种不同的安装方式，大家可以根据自己的项目形态选择合适的安装方式。

所谓直连，就是直接使用 <script> 元素，配合 src 属性加载 JavaScript 资源。

LuLu UI中，所有的 UI 组件都可以单独使用，在每个组件的文档页面的顶部均有示意，拿 <select> 组件示意。

引入对应的 CSS 文件和 JS 文件就完成了对应组件的安装。

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

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

对于部分组件，type="module" 可以省略，但是由于使用者是记不住哪个组件直连的时候需要使用 type="module"，哪个组件不需要使用 type="module"，因此，建议所有的组件在直连调用的时候都设置 type="module"。

如果想要使用 LuLu UI 一整套 UI 组件，可以所有组价一次性连接，示意代码：

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

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

注意，all.js 中不包含任何 import/export 代码，因此无需设置 type="module"。

曾经有人问过我这样一个问题，为何 CSS 文件的命名是 'ui'，但是 JS 文件的命名是 'all'？

因为CSS代码一定是与 UI 相关的，但是 JS 并不一定。

参见个组件对应的文档页面，也可以前往“起步”快速了解多种使用方式。

LuLu UI Edge主题抛弃了 commonJS 规范，拥抱标准的 import/export 模块导入规范。

所有的组件都支持 import 导入，支持静态导入和动态导入。

还是拿 <select> 组件示意。

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

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

此时，给页面中设置了 is="ui-select" 的<select> 元素就会自动变成美化的样式组件。

对于部分组件，还可以 import 对象在业务代码中使用，例如：

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

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

当然，我们也可以直接 import all.js，如下所示：

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

不过没什么必要，因为 all.js 中没有任何 export。

目前业界流行在框架中进行项目开发，LuLu UI 也是支持在框架中安装的。

NPM包名称是 lu2，因为 lulu 已经被占用了，所以使用的是 lu2，表示2个lu。

npm install lu2

此时即可以使用 LuLu UI 中的各个 UI 组件了，还是拿 <select> 组件示意。

<link rel="stylesheet" href="lu2/theme/edge/css/common/ui/Select.css">

<script>
    import 'lu2/theme/edge/js/common/ui/Select';
</script>

zhangxinxu