@dingdaoos/lucid-ui v1.0.7

快速上手 | QuickStart

本节将介绍如何在项目中使用 Lucid UI 组件库。

This section describes how to use the lucid UI component library in your project.

全局引用 | Global Reference

npm install -S @dingdaoos/lucid-ui

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

按需引用 | Import on demand

借助插件 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.

安装插件 | Install Plugins

$ npm install babel-plugin-import -D

配置插件 | Configure Plugins

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

After successful installation, you can add the configuration in the .babelrc or babel.config.js file in the project:

{
    "plugins": [
      [
        "import",
        {
          "libraryName": "@dingdaoos/lucid-ui",
          "libraryDirectory": "lib"
        }
      ]
    ]
}

接下来在 main.js 中引入你需要的组件，以 Button 和 Input 为例：

按需引用 | Import on demand

Next, in main.js introduces the components you need, such as Button and Input:

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

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

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

自定义组件前缀 | Custom component prefix

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

The component prefix defaults to lu-, which supports personalized component prefixes.

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

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

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

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

Files were introduced directly in the browser using script and link tags (not recommended).

请确保已提前引入 Vue 2.x，推荐使用 2.6.14 以上版本

Ensure that the Vue 2.x has been introduced in advance, Above version '2.6.14' is recommended

引入 js 文件

Importing js files

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

引入默认主题的 CSS 样式文件

Introduces css style file for the default theme

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