Mint UI

早过忘川 提交于 2019-12-23 04:03:56

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>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!