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