# @dingdaoos/lucid-ui

> Lucid UI components library.

Latest version **1.0.7** (published 2022-12-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dingdaoos/lucid-ui
pnpm add @dingdaoos/lucid-ui
yarn add @dingdaoos/lucid-ui
bun add @dingdaoos/lucid-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2022-12-16 |
| First published | 2022-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 7.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dingdao PWA Runtime |
| Maintainers | songyu6416, yaobb, zhanglibin8, boxup, dingdaoos-owner |
| Keywords | components |

## Links

- npm: https://www.npmjs.com/package/@dingdaoos/lucid-ui
- Repository: https://github.com/DingDaoOS/Lucid
- Homepage: https://github.com/DingDaoOS/Lucid#readme
- Issues: https://github.com/DingDaoOS/Lucid/issues
- npm.io page: https://npm.io/package/@dingdaoos/lucid-ui

## Dependencies (5)

- [dayjs](https://npm.io/package/dayjs.md) ^1.11.2
- [html2canvas](https://npm.io/package/html2canvas.md) ^1.4.1
- [lunar-javascript](https://npm.io/package/lunar-javascript.md) ^1.2.27
- [@dingdaoos/lucid-icons](https://npm.io/package/@dingdaoos/lucid-icons.md) ^1.0.2
- [@dingdaoos/lucid-theme](https://npm.io/package/@dingdaoos/lucid-theme.md) ^1.0.5

## Recent versions

- 1.0.7 (latest) — 2022-12-16
- 1.0.5 — 2022-09-13
- 1.0.4 — 2022-09-07
- 1.0.3 — 2022-09-05
- 1.0.2 — 2022-09-05
- 1.0.1-beta.6 — 2022-08-25
- 1.0.1-beta.5 — 2022-08-03
- 1.0.1-beta.3 — 2022-08-03
- 1.0.1-beta.2 — 2022-08-03
- 1.0.1-beta.1 — 2022-08-03
- 1.0.1-beta.0 — 2022-08-01
- 1.0.0-beta.3 — 2022-06-22
- 1.0.0-beta.2 — 2022-06-20
- 1.0.0-beta — 2022-06-20

## README

## 快速上手 | QuickStart

<!-- DESCRIPTION -->
本节将介绍如何在项目中使用 `Lucid UI` 组件库。

---

This section describes how to use the lucid UI component library in your project.
<!-- DESCRIPTION END -->

<lu-dividing-line />

#### 全局引用 | Global Reference

```javascript
npm install -S @dingdaoos/lucid-ui

import lucidUI from '@dingdaoos/lucid-ui'
Vue.use(lucidUI)
```

#### 按需引用 | Import on demand

<!-- DESCRIPTION -->
借助插件 `babel-plugin-import`，可以实现按需加载组件。首先，安装 `babel-plugin-import`。

---

With the help of the plugin `babel plugin import`, you can load components on demand. First, install `babel plugin import`.
<!-- DESCRIPTION END -->


###### 安装插件 | Install Plugins

```node
$ npm install babel-plugin-import -D
```

###### 配置插件 | Configure Plugins

<!-- DESCRIPTION -->
安装成功后，可以在项目中的 `.babelrc` 或 `babel.config.js` 文件中添加配置：

---

After successful installation, you can add the configuration in the `.babelrc` or `babel.config.js` file in the project:
<!-- DESCRIPTION END -->
```json
{
    "plugins": [
      [
        "import",
        {
          "libraryName": "@dingdaoos/lucid-ui",
          "libraryDirectory": "lib"
        }
      ]
    ]
}
```
<!-- DESCRIPTION -->
接下来在 `main.js` 中引入你需要的组件，以 `Button` 和 `Input` 为例：

---
#### 按需引用 | Import on demand
Next, in main.js introduces the components you need, such as Button and Input:
<!-- DESCRIPTION END -->

```javascript
import { Button, Input } from '@dingdaoos/lucid-ui'
Vue.use(Button)
Vue.use(Input)
```

#### 样式文件需要单独引入 | Style files need to be introduced separately

```javascript
import '@dingdaoos/lucid-theme/lib/theme-default.css'
```

#### 自定义组件前缀 | Custom component prefix

<!-- DESCRIPTION -->
组件前缀默认为 lu-，支持个性化组件前缀。

---

The component prefix defaults to lu-, which supports personalized component prefixes.
<!-- DESCRIPTION END -->

```javascript
Vue.use(lucentUI, {
  prefix: 'awesome'
})

// use
<awesome-button>Button</awesome-button>
```

#### CDN 方式使用组件 | Using components in CDN

<!-- DESCRIPTION -->
在浏览器中直接使用 `script` 和 `link` 标签引入文件（不推荐）。

---

Files were introduced directly in the browser using script and link tags (not recommended).
<!-- DESCRIPTION END -->

<!-- DESCRIPTION -->
> 请确保已提前引入 `Vue 2.x`，推荐使用 `2.6.14` 以上版本

---

> Ensure that the Vue 2.x has been introduced in advance, Above version '2.6.14' is recommended
<!-- DESCRIPTION END -->

<!-- DESCRIPTION -->
> 引入 js 文件

---

> Importing js files
<!-- DESCRIPTION END -->

```javascript
lucid-ui: https://lucent.dev.dingdaoos.com/lucid-ui/lucid-ui.umd.js
lucid-icons: https://lucent.dev.dingdaoos.com/lucid-icons/lucid-icons.umd.js
lucid-theme: https://lucent.dev.dingdaoos.com/lucid-theme/index.umd.js
```

<!-- DESCRIPTION -->
> 引入默认主题的 CSS 样式文件

---

> Introduces css style file for the default theme
<!-- DESCRIPTION END -->

```javascript
lucid-theme: https://lucent.dev.dingdaoos.com/lucid-theme/theme-default.css
lucid-icons: https://lucent.dev.dingdaoos.com/lucid-theme/lucid-icons.css
```

---
_Source: https://npm.io/package/@dingdaoos/lucid-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._