Vue的UI组件库

vue常用的组件库有两个: Mint UI(移动端) 和 Element(PC端).

这两个都是饿了么开源的组件库.

下面主要介绍一下 mint-ui 的使用.

1.使用前配置

  • 首先下载mint-ui: npm install --save mint-ui

  • 为了缩小项目整体体积, 借助 babel-plugin-component, 实现按需打包: 只需引入需要的组件, 以达到减小项目体积的目的.

  • 安装 babel-plugin-component: npm install --save-dev babel-plugin-component

  • 修改项目根目录下的 .babelrc 文件. 在 plugin 配置中添加一些新的配置. 新的 plugin 配置如下:

1
2
3
4
5
6
"plugins": ["transform-vue-jsx", "transform-runtime", ["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]

2.mint-ui

mint-ui组件分为: 标签组建和非标签组建.

由于 mint-ui 是一个移动端的库, 需要在./src/index.html中引入一些移动端必要的第三方库

添加 meta:

1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

引入JS文件以解决移动端事件延迟的问题, 实现快速点击.

1
2
3
4
5
6
7
8
9
10
11
<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>

3.根据mint-ui官网的文档编写即可

main.js:

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue'
import App from './App'
import {Button} from 'mint-ui'
// 注册成为全局标签
Vue.component(Button.name, Button)
new Vue({
el: '#app',
components: {
App
},
template: '<App/>'
})

App.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
<mt-button style="width: 100%;" type="primary" @click.native="handleClick">primary</mt-button>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
methods: {
handleClick () {
Toast('提示信息')
}
}
}
</script>

<style scoped>

</style>

评论