lime-ui

KO | EN

gitlite — search

#python #cli #hacktoberfest #java #javascript #react #php #machine-learning #api #typescript #android #ios

★ 52 Open GitHub ↗

《如何打造一套vue组件库》示例代码

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1>
LimeUI
    <h3>A lightweight Vue.js UI toolkit</h3>
</h1>

demo: [https://arronkler.github.io/lime-ui/](https://arronkler.github.io/lime-ui/)

# Install

Run the command below in your terminal to install limeUI first
```
npm install lime-ui --save
```

# Usage

## Global Use
Import in your entry script file and register it
```javascript
import LimeUI from 'lime-ui'
import "lime-ui/lib/styles/lime-ui.css"

Vue.use(LimeUI)
```

### Example

```html
<l-button>click</l-button>
```

## On-demand Loading

Firstly, you should install `babel-plugin-component` in your project.
```
npm install babel-plugin-component
```

Configure your `.babelrc` file like this

```json
{
    "plugins": [
        ["component", {
            "libraryName": "lime-ui",
            "libDir": "lib",
            "styleLibrary": {
                "name": "styles",
                "base": false, // no base.css file
                "path": "[module].css"
            }
        }]
    ]
}
```

The you can import component on demand, and you don't need to care about importing styles, the babel plugin will do it automaticly.

```javascript
import Vue from 'vue'
import { Button } from 'lime-ui'

Vue.component('a-button', Button)
```

lime-ui

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README