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'