UNPKG

2.66 kBMarkdownView Raw
1# Mint UI
2
3[![Build Status](https://travis-ci.org/ElemeFE/mint-ui.svg?branch=master)](https://travis-ci.org/ElemeFE/mint-ui)
4[![npm](https://img.shields.io/npm/v/mint-ui.svg?maxAge=3600)](https://www.npmjs.com/package/mint-ui)
5[![NPM downloads](http://img.shields.io/npm/dm/mint-ui.svg)](https://npmjs.org/package/mint-ui)
6![JS gzip size](http://img.badgesize.io/elemefe/mint-ui/master/lib/index.js.svg?compression=gzip&label=gzip%20size:%20JS)
7![CSS gzip size](http://img.badgesize.io/elemefe/mint-ui/master/lib/style.css.svg?compression=gzip&label=gzip%20size:%20CSS)
8[![Join the chat at https://gitter.im/ElemeFE/mint-ui](https://badges.gitter.im/ElemeFE/mint-ui.svg)](https://gitter.im/ElemeFE/mint-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
9
10> Mobile UI elements for **Vue 2.0**
11
12- [Homepage](http://mint-ui.github.io)
13- [Documentation](http://mint-ui.github.io/docs)
14
15<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/bD3dKbdDE2F7Ky9LUN1kjTFK/ElemeFE/mint-ui'>
16 <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/bD3dKbdDE2F7Ky9LUN1kjTFK/ElemeFE/mint-ui.svg' />
17</a>
18
19## Installation
20```shell
21npm i mint-ui -S
22
23# for Vue 1.x
24npm i mint-ui@1 -S
25```
26
27## Usage
28
29Import all components.
30
31```javascript
32import Vue from 'vue';
33import Mint from 'mint-ui';
34import 'mint-ui/lib/style.css';
35
36Vue.use(Mint);
37```
38
39Or import specified component. (Use [babel-plugin-component](https://www.npmjs.com/package/babel-plugin-component))
40
41```javascript
42import { Cell, Checklist } from 'mint-ui';
43
44Vue.component(Cell.name, Cell);
45Vue.component(Checklist.name, Checklist);
46```
47
48
49Equals to
50
51```javascript
52import Vue from 'vue';
53import Mint from 'mint-ui';
54import 'mint-ui/lib/style.css';
55
56Vue.use(Mint);
57
58// import specified component
59
60import MtRadio from 'mint-ui/lib/radio';
61import 'mint-ui/lib/radio/style.css';
62
63Vue.component(MtRadio.name, MtRadio);
64```
65
66## babel-plugin-component
67- Auto import css file
68- Modular import component
69
70Installation
71```shell
72npm i babel-plugin-component -D
73```
74
75Usage
76
77.babelrc
78```json
79{
80 "plugins": ["other-plugin", ["component", [
81 { "libraryName": "mint-ui", "style": true }
82 ]]]
83}
84```
85
86## CDN
87RawGit
88
89- https://cdn.rawgit.com/ElemeFE/mint-ui/master/lib/index.js
90- https://cdn.rawgit.com/ElemeFE/mint-ui/master/lib/style.css
91
92NPMCDN
93
94- https://unpkg.com/mint-ui/lib/index.js
95- https://unpkg.com/mint-ui/lib/style.css
96
97## Development
98
99```shell
100npm run dev
101```
102
103## Contribution
104Please make sure to read the [Contributing Guide](https://github.com/ElemeFE/mint-ui/blob/master/.github/CONTRIBUTING_en-us.md) before making a pull request.
105
106## License
107MIT