@[toc]

1. 常用

1) Mint UI:

a. 主页: http://mint-ui.github.io/#!/zh-cn (opens new window) b. 说明: 饿了么开源的基于vue 的移动端UI 组件库

2) Elment UI

a. 主页: http://element-cn.eleme.io/#/zh-CN (opens new window) b. 说明: 饿了么开源的基于vue 的PC 端UI 组件库

2. 使用Mint UI

2.1. 下载:

npm install --save mint-ui

2.2. 实现按需打包

1. 下载

npm install --save-dev babel-plugin-component

2. 修改babel 配置

"plugins": ["transform-runtime",["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]

2.3. mint-ui 组件分类

1. 标签组件
2. 非标签组件

2.4. 使用mint-ui 的组件

1)index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
	if ('addEventListener' in document) {
		document.addEventListener('DOMContentLoaded', function() {
			FastClick.attach(document.body);
		}, false);
	}
	if(!window.Promise) {
		document.writeln('<script
		src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>

2) main.js

import {Button} from 'mint-ui'
Vue.component(Button.name, Button)

3) App.vue

<template>
<mt-button @click="handleClick" type="primary" style="width: 100%">Test</mt-button>
</template>
<script>
	import {Toast} from 'mint-ui'
	export default {
		methods: {
			handleClick () {
				Toast('点击了测试');
			}
		}
	}
</script>

3. 使用Elment-UI

3.1 安装依赖包

npm i element-ui -S

3.2 导入 Elment-UI 相关资源

1. 导入组件库

import ElmentUI from 'element-ui';

2. 导入组件相关样式

import 'element-ui/lib/theme-chalk/index.css';

3. 配置Vue插件

Vue.use(ElementUI);

3.3 图形化界面使用ElementUI

插件-添加插件

vue-cli-plguin-element

配置插件，按需导入

http://element-cn.eleme.io/#/zh-CN (opens new window)