Mint UI

Mint UI 官网

引入 Mint UI

你可以引入整个 Mint UI，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Mint UI。

完整引入

在 main.js 中写入以下内容：

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
 
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}
// 表示自动引入 mint-ui 组件，样式自动引入

如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容：

import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'

// 将组件映射成全局的标签，标签名是 mt-button
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Cell)
 */

new Vue({
  el: '#app',
  components: { App }
})

其中 Button.name值是mt-button，通过查看源码可得

使用：

 <div>
    <mt-button type="primary">primary</mt-button>
  </div>

上面一种是将组件映射成标签，可以将组件映射成函数

使用：

<template>
  <div>
  
    <mt-button @click.native="handleClick">点击触发 handleClick</mt-button>
   
  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui'
  export default {
    methods:{
      handleClick(){
       MessageBox.alert('操作成功').then(action => {
       console.log('成功')
});
      }
    }
  }
</script>