1.引入文件

引入全部组件

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'Vue.use(MintUI)new Vue({el: '#app',components: { App }
})

解释：

import MintUi from 'mint-ui';// 把所有组件都导入进来
import 'mint-ui/lib/style.css';// 这里可以省略 node_modules 这层目录
Vue.use(MintUi);// 将 mint-ui 安装到 vue 中，把所有组件，注册为全局组件

按需引入部分组件（推荐，因为体积小）

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
注意：按需导入，可能存在某些插件无法正常显示，此时就需要改为引入全部组件，或用其他 UI 框架
安装命令：npm install babel-plugin-component -D
然后，将 .babelrc 修改或是添加为：

    {"presets": [["es2015", { "modules": false }]],"plugins": [["component", [{"libraryName": "mint-ui","style": true}]]]}

上面出错可以试试下面的：

{"presets": ["env","stage-0"],"plugins": ["transform-runtime",["component", [{"libraryName": "mint-ui","style": true}]]]
}

最后在 main.js 中引入

import Vue from 'vue'
import App from './App.vue'// 按需导入 mint-ui
import {Button, Cell} from 'mint-ui';
// 注册组件（引号中可自定义模板名称）
Vue.component('my-cell',Cell);
Vue.component(Button.name,Button);// 也可以这种的选择它的默认命名（推荐）/* 或写为* Vue.use(Button)* Vue.use(Cell)*/new Vue({el: '#app',components: { App }
})

2.导入后的应用

类似 bootstrap ，例如在一级路由下使用：

css components

<template><div><h1>这是 App 组件！</h1><!-- type 是类型， size 是尺寸 --><mt-button type="danger" size="large">default</mt-button><router-link to="/account">Account</router-link><router-link to="/goodslist">GoodsList</router-link><router-view></router-view></div>
</template>

js components

<template><div><h1>这是 App 组件！</h1><p class="panel">hihao</p><!-- type 是类型， size 是尺寸 --><mt-button type="danger" size="large">default</mt-button><router-link to="/account">Account</router-link><router-link to="/goodslist">GoodsList</router-link><router-view></router-view></div>
</template>

<script>// 按需导入 Toast 组件import {Toast} from 'mint-ui';export default {data() {return {toastClose: ''}},created() {this.getList();},methods: {getList() {// 模拟获取列表的一个 Ajax 方法// 在获取数据之前，立即弹出 Toast 提示用户，正在加载数据this.show();setTimeout(() => {// 当 3 秒过后，数据获取回来了，要把 Toast 移除this.toastClose.close();}, 3000)},show() {this.toastClose = Toast({message: '加载中...', // 弹窗内容position: 'top', // 显示位置duration: -1, // 持续时间（-1 代表一直显示）iconClass: '', // 设置图标的类(可用 bootstrap 中的字体图标)className: 'red' // 自定义 Toast 的样式，需要自己提供一个类名});}}}
</script>

<style>.red {color: red !important;}
</style>

附加：

在 vue 事件中点击有 @click ，但是 mint-ui 中有个 @tap 也是点击事件，在手机端页面中点击失灵可以换为 @tap 试试（注意：@tap 仅在 mint-ui 中适用）

mint-ui（基于 Vue.js 的移动端组件库）相关推荐

Mint UI —— 基于 Vue.js 的移动端组件库
写文章登录 Mint UI -- 基于 Vue.js 的移动端组件库杨奕 8 个月前 Mint UI GitHub:https://github.com/ElemeFE/mint-ui 项目主页:h ...
移动端cube界面设计html,滴滴开源基于 Vue.js 的移动端组件库 cube-ui
原标题:滴滴开源基于 Vue.js 的移动端组件库 cube-ui 开源最前线(ID:OpenSourceTop) 猿妹整编综合自:https://didi.github.io/cube-ui/ ...
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
【014】基于Vue.js的移动端购物商城网站(含源码、课设报告)
文章目录一.项目介绍二.代码及报告获取一.项目介绍基于Vue.js的移动端购物商城网站(含源码.课设报告),代码获取放在文末了,码字不易,感谢点赞~ 一.系统概述本部分主要是对项目进行简要描 ...
基于Vue.js的表格分页组件
转载自基于Vue.js的表格分页组件有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
基于Vue.js的后台管理系统组件开发
什么是Vue Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合. ...
vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
基于Vue 的常用移动端框架
移动端框架: 该文章参考来源于:[Vue移动端UI框架](https://www.cnblogs.com/tt-ff/p/11698959.html) 1.Vux 中文文档在线预览 Vux是基于 W ...

mint-ui（基于 Vue.js 的移动端组件库）

1.引入文件

引入全部组件

按需引入部分组件（推荐，因为体积小）

2.导入后的应用

类似 bootstrap ，例如在一级路由下使用：

css components

js components

附加：

mint-ui（基于 Vue.js 的移动端组件库）相关推荐

最新文章

热门文章