Vue23话 简单使用 vue UI 组件库

逆流者 2020年02月02日 120次浏览

1. 常用UI 组件库

1.1 Mint UI

1.2 Elment

2. 简单使用 Mint UI

2.1 下载

npm install --save mint-ui

2.2 按需打包

2.2.1 下载

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

2.2.2 修改 babel 配置

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

2.2.3 mint-ui 组件分类

  • 标签组件
  • 非标签组件

2.2.4. 使用 mint-ui 的组件

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>

main.js

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

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>