Vue的UI组件库

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>