安装

npm i mint-ui -S

main.js

import Vue from 'vue'
// 1,导入 vue-router包
import vueRouter from 'vue-router'
// 导入mintui
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
// 使用bootstrap的样式
import 'bootstrap/dist/css/bootstrap.css'
import './css/app.css'
// 导入app组件
import app from './app.vue'
import router from './router.js' // 将MintUI 安装到Vue
Vue.use(MintUI);
// 2,手动安装vueRouter
Vue.use(vueRouter); var vm = new Vue({
el: '#app',
render: c => c(app), // render会把el 指定的容器中所有的内容都清空覆盖
// 所以不要把router-view和router-link直接写到 el 所控制的元素中。
router
})
// 注意app这个组件是通过vm实例的render函数渲染的,render函数如果要渲染组件
// 渲染出来的组件只能放到el : '#app' 所指定的元素中去。
// account 和 goodslist组件是通过路由匹配监听到的,所以,这两个组件只能展示到
// 属于路由的<router-view></router-view>中去。

app.vue

<template>
<div>
<h1>app组件</h1>
<mt-button type="primary" icon="more" @click="show">默认按钮</mt-button>
<router-link to="/account">account</router-link>
<router-link to="/goodslist">goodslist</router-link>
<router-view></router-view>
</div>
</template> <script>
import { Toast } from "mint-ui"; export default {
data() {
return {
toastInstanse : null
};
},
created() {
this.getList();
},
methods: {
getList() {
//模拟获取数据的方法
this.show();
setTimeout( () => {
// 当5S过后,数据获取成功后要把Toast移除
this.toastInstanse.close();
}, 5000);
},
show() {
this.toastInstanse = Toast({
message: "提示消息",
// duration : -1, //如果是-1则弹出后不消失
duration: -1,
iconClass: "glyphicon glyphicon-heart",
className: "mytoast"
});
}
}
};
</script> <style lang="">
</style>

app.css

.mytoast i{
color : red !important;
}

 按需导入模块以减少文件大小,安装 babel-plugin-component

cnpm i babel-plugin-component -D

然后修改.babelrc文件

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

然后再引入单个模块后,用vue组件注册

import { Button,Cell } from 'mint-ui'

// 使用vue.component 注册按钮组件
Vue.component('mybtn',Button); //组件名称,实例名称

Vue系列之 => MintUI初使用的更多相关文章

  1. Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  2. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  3. oracle 12c 学习系列(1)–12c初体验

    详见原文博客链接地址: oracle 12c 学习系列(1)–12c初体验

  4. [js高手之路] vue系列教程 - 事件专题(4)

    本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...

  5. 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  6. AngularJS路由系列(3)-- UI-Router初体验

    本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...

  7. Vue系列(2):Vue 安装

    前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...

  8. Vue系列(一):简介、起步、常用指令、事件和属性、模板、过滤器

    一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...

  9. Vue系列(二):发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

随机推荐

  1. FZU 2285 迷宫寻宝

    思路: bfs求最短路径. #include<stdio.h> #include<iostream> #include<queue> #include<cst ...

  2. [Python]sort与sorted高级技巧

    与其他语言不同,python 3.0之后,弃用了其他语言中常见的cmp方法,在sort方法中改用key实现. 之前一直疑惑自定义对象的排序如何写comparator,最后发现还是通过内部的__cmp_ ...

  3. 2017-11-8—自动控制原理在软硬件方面上的应用和体现

    这个话题讲起来是非常大的,先贴一下百度百科的定义: 自动控制(automatic control)是指在没有人直接参与的情况下,利用外加的设备或装置,使机器.设备或生产过程的某个工作状态或参数自动地按 ...

  4. 什么是 B 树?

    本文提到的「B-树」,就是「B树」,都是 B-tree 的翻译,里面不是减号-,是连接符-.因为有人把 B-tree 翻成 「B-树」,让人以为「B树」和「B-树」是两种树,实际上两者就是同一种树. ...

  5. 如何在 code blocks中使用 mkl库

    为了安装caffe, 所以安装了mkl, 现在想在codeblock的项目中使用mkl. 设置mkl环境变量: mkl安装好后默认是在/opt/intel/mkl中,其中/opt/intel/mkl/ ...

  6. Mouse w/o Borders实现两台主机共用一套键鼠方法及问题处理

    因为经常遇到同时用到实验室配备的主机和自己的笔记本同时使用的场景,两台设备需要切换两套键鼠很麻烦,这里介绍一个微软开发的一个免费软件Microsoft Garage Mouse without Bor ...

  7. (54)Wangdao.com第七天_JavaScript 运算符

    JavaScript 运算符,也叫操作符 对一个或者多个值进行运算,都是会返回结果的. 比如: typeof    返回一个值的类型,返回值类型是字符串. 隐式类型转换: 任意值 = 任意值 + &q ...

  8. Idea使用说明

    快捷键 ctrl + alt + b : 查找接口的实现类 ctrl + h : 查找类或接口的继承关系 double shift : 搜索任何地方 ctrl + shift + n : 查找文件 c ...

  9. Homework 7 INF 552

    Homework 7 INF 552,1. Generative Models for Text(a) In this problem, we are trying to build a genera ...

  10. oracle_创建表空间_临时表空间_修改表空间_以及自增长

    管理员用户登录oracle数据库 [oracle@DBORACLE ~]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on ...