1.Mint UI

Mint UI是基于 Vue.js的移动端组件库

1、安装:

npm install mint-ui -S

2、引入方式

2.1 引入方式1 引入全部组件：但是不建议使用这种方式，因为会占用bundle.js的空间

import Vue from 'vue'; import Mint from 'mint-ui'; import 'mint-ui/lib/style.css';//为了更好看一下还可以使用mint-ui中的样式库 import App from './App.vue' Vue.use(Mint);//将mint-ui安装到Vue中 new Vue({ el: '#app', components: {App} });

2.2 引入方式2 按需引入部分组件： 建议使用按需引入，按需引入借助babel-plugin-component可以引入需要的组件，以达到减小项目体积的目的。首先安装babel-plugin-component：

npm install babel-plugin-component -D

然后将babelrc修改为：

{ "presets": [ ["es2020",{"moudles":false}] ], "plugins":[ [ "component", [ { "libraryName":"mint-ui", "style":true } ] ] ] }

然后再main.js中导入：

import {Cell, Checklist} from 'mint-ui';//导入需要的组件 Vue.component(Cell.name,Cell);//注册需要的Cell组件 或者使用自定义的名称：Vue.component('myCell',Cell); Vue.component(Checklist.name,Checklist);//注册需要的CheckList组件

步骤：

安装： cnpm i mint-ui -S引入 Mint UI

2.MUI

MUI不同于 Mint-UI ，MUI 只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于BootStrap； 而Mint-UI是真正的组件库，是使用Vue技术封装出来的成套的组件，可以无缝的和VUE项目进行集成开发；

因此，从体验上来说，Mint-UI体验更好，以为这是别人帮我们开发好的现成的Vue组件；

从体验上来说 MUI和Bootstrap类似，理论上，任何项目都可以使用MUI或Bootstrap，但是Mint-UI只适用于Vue项目。

MUI 并不能使用 npm 去下载，需要自己手动从 GitHub 上下载包解压使用。

使用步骤：

去下载最新的包，解压后，只需要copy dist文件夹下的文件放入到项目的lib目录下建一个叫mui 的包

在main.js中导入MUI的样式表和bootstrap的使用方式是一样的：

import './lib/mui/css/mui.min.css'