初识vue（6）—— Mint UI 的 完全引入 和 按需引入

Mint UI 是基于 Vue.js 的移动端组件库，包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。

关于如何安装 vue 脚手架项目，请看我的博客 初识vue（2）——如何搭建脚手架项目

先安装 Mint UI

npm install --save mint-ui

一、完全引入

在 main.js 文件中写：

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

Vue.use(MintUI)

new Vue({
  el: '#app',
  components:{
    App
  },
  template:'<App/>'
})

在 App.vue 中写：

<template>
  <div>
    <mt-button type="default" size="large">default</mt-button>
    <mt-button type="primary" size="large">primary</mt-button>
    <mt-button type="danger" size="large">danger</mt-button>
  </div>
</template>

<script>
export default {
  
}
</script>

<style>

</style>

运行效果如下图所示：

二、按需引入

1. 安装 babel-plugin-component：

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

2. 将 .babelrc 文件中的 plugins 修改为：

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

3. 在 main.js 文件中写：

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

Vue.component(Button.name, Button)
/* 或写为
 * Vue.use(Button)
 */

new Vue({
  el: '#app',
  components:{
    App
  },
  template:'<App/>'
})

4. 在 App.vue 中写：

<template>
  <div>
    <mt-button type="primary" size="large" @click.native="handleClick">primary</mt-button>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  methods:{
    handleClick(){
      Toast('提示信息')
    }
  }
}
</script>

<style>

</style>

5. 运行结果如下图所示：