内容大部分文字描述来自尚硅谷课件，实例操作截图和注释内容为亲测。
第4 章：vue UI 组件库
4.1. 常用
- Mint UI:
a. 主页: http://mint-ui.github.io/#!/zh-cn
b. 说明: 饿了么开源的基于vue 的移动端UI 组件库 - Elment
a. 主页: http://element-cn.eleme.io/#/zh-CN
b. 说明: 饿了么开源的基于vue 的PC 端UI 组件库
4.2. 使用Mint UI
4.2.1. 下载:
npm install --save mint-ui
注释：点开网站点使用
在工程文件目录下运作这个命令
4.2.2. 实现按需打包
- 下载
npm install --save-dev babel-plugin-component - 修改babel 配置
"plugins": ["transform-runtime",["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
注释：
只需要在plugins中添加
["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]
内容即可，不要把原里的 .babelrc文件替换掉
4.2.3. mint-ui 组件分类
- 标签组件
- 非标签组件
4.2.4. 使用mint-ui 的组件
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
minimum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="./static/css/bootstrap.css">
<title>vue_demo</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<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>
</html>
main.js
import Vue from 'vue'
import App from './App.vue'
import {Button, Swipe} from 'mint-ui'
//注册成标签（全局注册）
Vue.component(Button.name, Button)
Vue.component(Swipe.name, Button)
new Vue({
el: '#app',
components: {App},
template: '<App/>'
})
App.vue
<template>
<mt-button type="primary" @click.native="handleClick" style="width: 100%">Test</mt-button>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
methods: {
handleClick () {
Toast('提示信息')
}
},
};
</script>
<style>
</style>
