Vue常用UI库

常用的UI组件库

Mint UI

主页：https://mint-ui.github.io/#!/zh-cn
说明：基于vue的移动端UI组件库
1、下载：npm install --save mint-ui
2、实现按需打包
（1）下载
npm install --save-dev babel-plugin-component
（2）修改babel配置

3、在项目中的main.js文件引入一下内容：

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})

4、按需引入
通过babel-plugin-component，我们可以只用需要的组件，以达到分割项目体积的目的。
首先，要安装 babel-plugin-component

npm install babel-plugin-component -D

然后，将.babelrc修改为：

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

Element

主页：http://element-cn.eleme.io/#/zh-CN
说明：基于vue的PC端UI组件库
1、下载：npm install element-ui -S
2、在页面上引入js和css文件就可以开始使用：

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

3、main.js配置
（1）全局配置
在引入Element时，可以传入一个全局配置对象，该对象目前支持size与zIndex字段。size用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：
完整引入Element:

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });

（2）按需引入Element：

import Vue from 'vue';
import { Button } from 'element-ui';

Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);

按照以上设置，项目中所有的size属性的组件的默认尺寸为’small’，弹框的初始z-index为3000；

import Vue from 'vue';
impor