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.预览图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。