版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yaocong1993/article/details/85420160
一、Mint-UI
官方文档:http://mint-ui.github.io/#!/zh-cn GitHub:https://github.com/ElemeFE/mint-ui/
Mint UI基于Vue.js的移动端组件库。
npm install mint-ui -S 用于Vue 2.0
(1)完整引入
所有CSS Components不用再单独引入,可以以标签形式直接使用。JS Components需要再引入。
/* main.js */
import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css'; // 样式文件需要单独引入,省略node_modules目录
Vue.use(Mint);
(2)按需引入
借助babel-plugin-component,可以只引入需要的组件,以达到减小项目体积的目的。
npm install babel-plugin-component -D
/* .babelrc */
{
"presets":[
["es2015",{"modules":false}]
],
"plugins":[["component",
{
"libraryName":"mint-ui",
"style":true
}
]]
}
注册组件时,Button.name默认为'my-button'
/* main.js */
import Vue from 'vue'
import {Button,Cell} from 'mint-ui' // 导入
Vue.component(Button.name,Button) // 注册
Vue.component(Cell.name,Cell)
/* 或写为
* Vue.use(Button)
* Vue.use(Cell)
*/
二、Element-UI
官方文档:http://element-cn.eleme.io/#/zh-CN
Element,一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。
扫描二维码关注公众号,回复:
5006193 查看本文章
npm i element-ui -S
完整引入与按需引入与Mint-UI相同。
三、MUI
官方文档:http://dev.dcloud.net.cn/mui/ GitHub:https://github.com/dcloudio/mui
MUI类似于Bootstrap。
MUI不能用npm下载,需手动下载导入。将dist文件夹拷入项目的lib文件夹。example文件夹的文件可以拷贝源码,类似于Bootstrap的源码。
/* main.js */
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css' // 使用mui-icon-extra时导入
使用mui-icon-extra需要导入icons-extra.css和mui-icons-extra.ttf,在example的子文件夹下,拷贝到项目中。还需要基类mui-icon。