vue.js中mint-ui框架的使用方法


Posted in Javascript onMay 12, 2017

本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下

1.安装vue2.0的mint-ui框架

npm install mint-ui -save

2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component

import Mint from 'mint-ui'; 
Vue.use(Mint);

3.创建一个header.vue组件,里面写入mint-ui的头部组件

<template> 
 <mt-header title="问答"> 
 <router-link to="/search" slot="left"> 
  <mt-button icon="search">{{searchTitle}}<mt-button> 
 <router-link> 
 <mt-button to="/ask" slot="right"> 
  <mt-button icon="ask">提问<mt-button> 
 <mt-button> 
 <mt-header> 
<template>
<script> 
 require('../less/config.less'); 
 export default { 
  data(){ 
  return{ 
   searchLeft:'searchLeft', 
   searchTitle:'搜索', 
  } 
  }, 
  methods:{ 
  handleClose:function(){ 
   this.$indicator.open('加载中...'); 
  } 
  } 
 } 
<script>

4.在app.vue组件中调用header.vue组件

<template> 
 <div id="app"> 
 <h-eader><h-eader> 
 <router-link to="/home">主页<router-link> 
 <router-link to="/news">新闻<router-link> 
 <mt-button @click.native="handleClick">按钮<mt-button> 
 <div> 
  <router-view><router-view> 
 <div> 
 <div class="box"><div> 
 <div> 
<template>
<script> 
 import Header from './components/header.vue'; 
 require('./less/collect.less'); 
 export default { 
 name: 'app', 
 methods:{ 
  handleClick:function(){ 
  this.$indicator.open('加载中...'); 
  }, 

 }, 
 components:{ 
  'h-eader':Header 
 } 
 } 
<script>

5.预览图

vue.js中mint-ui框架的使用方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
js如何获取网页所有图片
May 12 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 #Javascript
微信小程序之数据双向绑定与数据操作
May 12 #Javascript
Flask中获取小程序Request数据的两种方法
May 12 #Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 #Javascript
微信小程序 支付功能实现PHP实例详解
May 12 #Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 #Javascript
JS实现图片预加载之无序预加载功能代码
May 12 #Javascript
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
基于文本的留言簿
2006/10/09 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
js获取form的方法
2015/05/06 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
Django使用Celery异步任务队列的使用
2018/03/13 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
护理专业个人求职简历的自我评价
2013/10/13 职场文书
中学老师的自我评价
2013/11/07 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
上班玩手机检讨书
2014/02/17 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
给学校的建议书400字
2015/09/14 职场文书
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技