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+js实现视频淡入淡出效果

    vue+js实现视频淡入淡出效果

    这篇文章主要为大家详细介绍了vue+js实现视频的淡入淡出,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue使用axios进行数据异步交互的方法

    Vue使用axios进行数据异步交互的方法

    大家都知道在Vue里面有两种出名的插件能够支持发起异步数据传输和接口交互,分别是axios和vue-resource,同时vue更新到2.0之后,宣告不再对vue-resource更新,而是推荐的axios,今天就讲一下怎么引入axios,需要的朋友可以参考下
    2024-01-01
  • nuxt踩坑之Vuex状态树的模块方式使用详解

    nuxt踩坑之Vuex状态树的模块方式使用详解

    这篇文章主要介绍了nuxt踩坑之Vuex状态树的模块方式使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue项目出现ERESOLVE could not resolve问题及解决

    vue项目出现ERESOLVE could not resolve问题及解决

    这篇文章主要介绍了vue项目出现ERESOLVE could not resolve问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue3响应式高阶用法之shallowRef()的使用

    Vue3响应式高阶用法之shallowRef()的使用

    在Vue3框架中,shallowRef()为开发者提供了细粒度的响应式控制能力,特别适用于处理深层嵌套对象或需要部分响应式的场景,本文就来详细的介绍一下,感兴趣的可以了解一下
    2024-09-09
  • vue中实现拖动调整左右两侧div的宽度的示例代码

    vue中实现拖动调整左右两侧div的宽度的示例代码

    这篇文章主要介绍了vue中实现拖动调整左右两侧div的宽度的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue实现tab标签(标签超出自动滚动)

    vue实现tab标签(标签超出自动滚动)

    当创建的tab标签超出页面可视区域时自动滚动一个tab标签距离,并可手动点击滚动tab标签,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 在vue2项目中使用dart-sass的问题及解决方法

    在vue2项目中使用dart-sass的问题及解决方法

    在Vue2项目中,使用dart-sass替代node-sass可以解决安装困难和环境兼容问题,VueCLI3+用户可直接使用,而VueCLI2用户需升级VueCLI和项目,具体方法包括修改package.json依赖并使用.scss文件编写样式,此更改有助于提升项目的开发效率和跨平台兼容性
    2024-09-09
  • ElementPlus表单rules校验的方法步骤

    ElementPlus表单rules校验的方法步骤

    相信大家经常都会遇到要处理表单验证的环节,而我在最近的项目中也遇到需要做表单验证的业务,下面这篇文章主要给大家介绍了关于ElementPlus表单rules校验的方法步骤,需要的朋友可以参考下
    2023-04-04
  • vue3.0找不到模块“./App.vue”或其相应的类型声明(多种情况分析)

    vue3.0找不到模块“./App.vue”或其相应的类型声明(多种情况分析)

    这篇文章主要介绍了vue3.0找不到模块“./App.vue”或其相应的类型声明,报错原因是typescript 只能理解 .ts 文件,无法理解 .vue文件,本文通过多种情况分析给大家详细讲解,需要的朋友可以参考下
    2023-01-01

最新评论