Vue 学习笔记 6 Mint UI 和 MUI

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组件

步骤：

1. 安装： cnpm i mint-ui -S
2. 引入 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 上下载包解压使用。

使用步骤：

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

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

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