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(B