Vue移動組件庫Mint UI的安裝與使用

1、什麼是 Mint UI

一、Mint UI 包含豐富的 CSS 和 JS 組件，能夠提高移動端開發效率

二、Mint UI 按需加載組件

三、Mint UI 輕量化

 

 

2、Mint UI 的安裝

 

一、在項目根目錄終端引入：

npm i mint-ui -S

 

二、在 main.js 中加入：

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

同時在 main.js 中經過全局方法 Vue.use() 使用 MintUI

Vue.use(MintUI)

完整示例：

main.js 文件：

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

Vue.use(MintUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

 

 

3、Mint UI 的使用

這裏引用 Mint UI 的 Toast 組件做爲例子

（1）在頁面的 script 中導入 Toast 組件

import { Toast } from 'mint-ui'

（2）在 mounted 中調用 Toast

Toast('提示信息')

完整示例：

views/demo.vue 文件：

<template>
    <div>
      <div>Mint UI</div>
    </div>
</template>

<script> import { Toast } from 'mint-ui' export default { data () { return { } }, mounted () { Toast('提示信息') } } </script>

運行效果：

更多 MintUI 組件請參考 http://mint-ui.github.io/docs/#/zh-cn2/repositories