mint-ui 是基于Vue.js的移动端组件库
安装Mint-UI
cnpm i mint-ui -S
全局导入
,在main.js
文件中先导入Vue.js,然后再导入:
import MintUI from 'mint-ui'; //这是把所有组件导入进来
import 'mint-ui/lib/style.css'
//将 MintUI 安装到 Vue 上
Vue.use(MintUI); //把所有组件注册为全局组件
按需导入
-
首先安装
babel-plugin-component
:
cnpm i babel-plugin-component -D
-
然后打开
.babelrc
文件,进行修改配置:
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
- 比如像导入
Button
组件:
import { Button } from 'mint-ui'
//使用 Vue.component 注册按钮组件
Vue.component(Button.name,Button)
- 然后在要用按钮组件的
template
引用就行:
<template>
<div>
<mt-button type="danger" disabled icon="more">default</mt-button>
<mt-button type="primary" size="large" plain>default</mt-button>
<mt-button type="default" size="small" @click="show">default</mt-button>
</div>
</template>
注意:
在第3步,注册组件的时候, Button.name
其实就是你给组件起的名字,如果不想用 mint-ui
定义好的名字,你也可以自定义,例如:
Vue.component('mybtn',Button);
引用组件:
<template>
<div>
<mybtn>自定义的组件名</mybtn>
</div>
</template>