专栏首页Web前端开发Vue移动组件库Mint UI的安装与使用

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • new 运算符的原理

    (2)使用指定的参数调用构造函数 Foo,并将 this 绑定到新创建的对象。new Foo 等同于 new Foo(),也就是没有指定参数时,Foo 不带任何...

    Leophen
  • TypeScript 类型保护

    这时就需要用到类型保护,类型保护允许你使用更小范围下的对象类型,常见的类型保护如下:

    Leophen
  • 通过 koa-generator 快速搭建 Koa 项目

    Leophen
  • Python 从业十年是种什么体验?

    出于某些原因,想记录一下我过去数年使用 Python 的经验和一些感悟。毕竟算是一门把我带入互联网行业的语言,而我近期已经几乎不再写 Py 代码, 做一个记录,...

    咸鱼学Python
  • Hive UDF 手册

    等值比较: = 语法:A = B 操作类型: 所有基本类型 描述: 如果表达式A与表达式B相等,则为TRUE;否则为FALSE 举例:

    大数据工程师-公子
  • ModuleNotFoundError: No module named ‘__main__.XX‘; ‘__main__‘ is not a package

    from .XX.logger import Logger ModuleNotFoundError: No module named '__main__.XX...

    于小勇
  • vue前端实战注意事项

    老梁
  • 在非admin页面使用 Django Ueditor(二)

    benny
  • HTML DOC

    HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直...

    Hongten
  • Dubbo集群容错模式之Failback实现 原

                                                     图1 Dubbo的FailbackClusterInvoker...

    克虏伯

扫码关注云+社区

领取腾讯云代金券