Vue筆記(十三) vue UI 組件庫

常用vue UI 組件庫

1) Mint UI:
a. 主頁: http://mint-ui.github.io/#!/zh-cn
b. 說明: 餓了麼開源的基於 vue 的移動端 UI 組件庫

2) Elment
a. 主頁: http://element-cn.eleme.io/#/zh-CN
b. 說明: 餓了麼開源的基於 vue 的 PC 端 UI 組件庫

Mint UI

下載: npm install --save mint-ui

實現按需打包

1. 下載 npm install --save-dev babel-plugin-component
2. 修改 babel 配置

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

mint-ui 組件分類
1) 標籤組件
2) 非標籤組件

使用 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>