zoukankan      html  css  js  c++  java
  • Vue移动组件库Mint UI的安装与使用

    一、什么是 Mint UI

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

    2、Mint UI 按需加载组件

    3、Mint UI 轻量化

    二、Mint UI 的安装

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

    npm i mint-ui -S

    2、在 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')

    三、Mint UI 的使用

    这里引用 Mint UIToast 组件作为例子

    (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

  • 相关阅读:
    $.getJSON()
    seconds
    ini_set
    validation
    component
    ini_set();
    长期阅读英文技术博客的好处
    用xml还是json
    单​手​打​字
    洛谷P1141 01迷宫
  • 原文地址:https://www.cnblogs.com/Leophen/p/11276414.html
Copyright © 2011-2022 走看看