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
|
21 | npm i mint-ui -S
|
22 |
|
23 | # for Vue 1.x
|
24 | npm i mint-ui@1 -S
|
25 | ```
|
26 |
|
27 | ## Usage
|
28 |
|
29 | Import all components.
|
30 |
|
31 | ```javascript
|
32 | import Vue from 'vue';
|
33 | import Mint from 'mint-ui';
|
34 | import 'mint-ui/lib/style.css';
|
35 |
|
36 | Vue.use(Mint);
|
37 | ```
|
38 |
|
39 | Or import specified component. (Use [babel-plugin-component](https://www.npmjs.com/package/babel-plugin-component))
|
40 |
|
41 | ```javascript
|
42 | import { Cell, Checklist } from 'mint-ui';
|
43 |
|
44 | Vue.component(Cell.name, Cell);
|
45 | Vue.component(Checklist.name, Checklist);
|
46 | ```
|
47 |
|
48 |
|
49 | Equals to
|
50 |
|
51 | ```javascript
|
52 | import Vue from 'vue';
|
53 | import Mint from 'mint-ui';
|
54 | import 'mint-ui/lib/style.css';
|
55 |
|
56 | Vue.use(Mint);
|
57 |
|
58 | // import specified component
|
59 |
|
60 | import MtRadio from 'mint-ui/lib/radio';
|
61 | import 'mint-ui/lib/radio/style.css';
|
62 |
|
63 | Vue.component(MtRadio.name, MtRadio);
|
64 | ```
|
65 |
|
66 | ## babel-plugin-component
|
67 | - Auto import css file
|
68 | - Modular import component
|
69 |
|
70 | Installation
|
71 | ```shell
|
72 | npm i babel-plugin-component -D
|
73 | ```
|
74 |
|
75 | Usage
|
76 |
|
77 | .babelrc
|
78 | ```json
|
79 | {
|
80 | "plugins": ["other-plugin", ["component", [
|
81 | { "libraryName": "mint-ui", "style": true }
|
82 | ]]]
|
83 | }
|
84 | ```
|
85 |
|
86 | ## CDN
|
87 | RawGit
|
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 |
|
92 | NPMCDN
|
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
|
100 | npm run dev
|
101 | ```
|
102 |
|
103 | ## Contribution
|
104 | Please 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
|
107 | MIT
|