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

 更新时间:2017年05月12日 16:59:20   作者:遇酒  
这篇文章主要为大家详细介绍了vue.js中使用mint-ui框架的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文为大家分享了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文档中几个易忽视部分的剖析

    详解Vue文档中几个易忽视部分的剖析

    针对Vue文档中部分大家可能不会去研读的内容,这篇文章主要介绍了详解Vue文档中几个易忽视部分的剖析,非常具有实用价值,需要的朋友可以参考下
    2018-03-03
  • Vue渲染器设计实现流程详细讲解

    Vue渲染器设计实现流程详细讲解

    在浏览器平台上,用它来渲染其中的真实DOM元素。渲染器不仅能够渲染真实的DOM元素,它还是框架跨平台能力的关键。所以在设计渲染器的时候一定要考虑好自定义的能力
    2023-01-01
  • Vue打包路径配置过程

    Vue打包路径配置过程

    这篇文章主要介绍了Vue打包路径配置过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue使用$store.commit() undefined报错的解决

    vue使用$store.commit() undefined报错的解决

    这篇文章主要介绍了vue使用$store.commit() undefined报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • VueRouter导航守卫用法详解

    VueRouter导航守卫用法详解

    这篇文章主要介绍了VueRouter导航守卫的详细用法以及分类介绍,有兴趣的朋友学习参考下吧。
    2017-12-12
  • vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

    vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

    这篇文章主要介绍了vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue3中如何使用fullcalendar日历插件

    Vue3中如何使用fullcalendar日历插件

    这篇文章主要介绍了Vue3中如何使用fullcalendar日历插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • Vue如何使用百度地图自定义信息窗口InfoWindow的样式

    Vue如何使用百度地图自定义信息窗口InfoWindow的样式

    这篇文章主要介绍了Vue如何使用百度地图自定义信息窗口InfoWindow的样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue中的vendor.js文件过大问题及解决

    vue中的vendor.js文件过大问题及解决

    这篇文章主要介绍了vue中的vendor.js文件过大问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 在Vue中使用防抖与节流,及this指向的问题

    在Vue中使用防抖与节流,及this指向的问题

    这篇文章主要介绍了在Vue中使用防抖与节流,及this指向的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01

最新评论