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
Vue移动组件库Mint UI的安装与使用的更多相关文章
- vue统计组件库和ui框架
UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...
- 使用webpack4搭建一个基于Vue的组件库
组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- 手把手教你如何构建Vue前端组件库
在前端开发中可能会遇到将相同的功能模板集合成一个组件,供他人调用,这样可以减少重复造轮子,也可以节约人力.财力,更能够提高代码的可维护度:下面将通过详细的步骤教你如何构建一个Vue前端组件. 1.在本 ...
- 基于Svelte3.x桌面端UI组件库Svelte UI
Svelte-UI,一套基于svelte.js开发的桌面pc端ui组件库 最近一直忙于写svelte-ui,一套svelte3开发的桌面端ui组件库.在设计及功能上借鉴了element-ui组件库.所 ...
- React组件库Ant Design的安装与使用
一.什么是 Ant Design 1.Ant Design 提炼自企业级中后台产品的交互语言和视觉风格 2.Ant Design 使用 TypeScript 构建,提供完整的类型定义文件 二.Ant ...
- react UI组件库 Salt UI
https://salt-ui.github.io/?spm=a219a.7629140.0.0.JWztQO
- Vue搭建组件库并发布到 npm
https://www.jianshu.com/p/72d303449abc
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
随机推荐
- 【电子电路技术】PoE供电技术的优缺点
转自http://www.mamicode.com/info-detail-1059108.html 1PoE供电稳定吗? 随着近几年网络监控的迅猛发展,技术门槛也是越来越高,厂商提供的技术支持也越来 ...
- 解决ViewPager与百度地图滑动冲突
一.问题描述 ViewPager中嵌套百度地图的时候会出现百度地图滑动冲突. 二.期望结果: 滑动地图的时候只有地图滑动,滑动其他区域可以切换viewpager. 三.解决方法 自定义viewpage ...
- Django ORM 数据库设置和读写分离
一 Django的数据库配置 (一)修改settings.py文件关于数据库的配置: Django默认使用sqlite: DATABASES = { 'default': { 'ENGINE': 'd ...
- php imagick生成gif动画的方法
>php imagick生成gif动画的方法<pre><?php$image=new Imagick();$animation = new Imagick(); //建立一个对 ...
- [Python]MySQLdb for Python使用指南/Python的数据库操作
网站就是要和数据库进行交互,否则什么都不用做了...今天我们来看一个叫MySQLdb的库,这个用来和MySQL数据库进行交互.可以从这里获得这个库http://sourceforge.net/proj ...
- Python-22-并发编程
一.进程 1. 什么是进程 狭义定义:进程是正在运行的程序的实例(an instance of a computer program that is being executed).广义定义:进程是一 ...
- gradle中引用本地项目
例如在别的地方有一个 apiProject,里面有 apiModule,你想要引用,而不是复制到现有项目,那么 1.现有项目的settings.gradle下 include ':apiModule' ...
- Jupyter交互式工具安装使用
Jupyter交互式工具安装使用 Jupyter Notebook(此前被称为IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言. 文档:https://jupyter ...
- Java File类与IO流
File 类 java.io.File 文件和目录路径名的抽象表示形式, 对文件或目录进行操作 构造方法: File(File parent, String child) : 根据 parent 抽象 ...
- 论PM与团队与敏捷开发
敏捷开发是每个有追求的PM都会去读的书 敏捷开发是很少程序会去读的书 敏捷开发是团体其他人很少会读的书 然而, 据我的 所见, 所闻, 所论 敏捷开发在大家的脑袋里分为很多种版本 既有可以一辩的新鲜思 ...