Vue移动组件库Mint UI的安装与使用

一、什么是 Mint UI

1、Mint UI 包含丰富的 CSS 和 JS 组件，可以提升移动端开发效率

2、Mint UI 按需加载组件

3、Mint UI 轻量化

二、Mint UI 的安装

1、在项目根目录终端引入：

代码语言：javascript复制

npm i mint-ui -S

2、在 main.js 中加入：

代码语言：javascript复制

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

同时在 main.js 中通过全局方法 Vue.use() 使用 MintUI

代码语言：javascript复制

Vue.use(MintUI)

完整示例：

main.js 文件：

代码语言：javascript复制

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')

三、Mint UI 的使用

这里引用 Mint UI 的 Toast 组件作为例子

（1）在页面的 script 中导入 Toast 组件

代码语言：javascript复制

import { Toast } from 'mint-ui'

（2）在 mounted 中调用 Toast

代码语言：javascript复制

Toast('提示信息')

完整示例：

views/demo.vue 文件：

代码语言：javascript复制

<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

mintui javascript vue.js

0 人点赞