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.創(chuàng)建一個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使用html2canvas實現截取圖片并保存
html2canvas是一個JavaScript庫,它可以將HTML元素轉換為Canvas元素本文將介紹一下Vue如何使用html2canvas實現截取圖片并保存功能,需要的可以參考下
2023-12-12
Vue在 Nuxt.js 中重定向 404 頁面的方法
這篇文章主要介紹了Vue在 Nuxt.js 中重定向 404 頁面的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-04-04
Element Card 卡片的具體使用
這篇文章主要介紹了Element Card 卡片的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
Vuex實現數據共享的方法
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。這篇文章主要介紹了Vuex實現數據共享的方法,需要的朋友可以參考下
2019-12-12
vue $set 給數據賦值的實例
今天小編就為大家分享一篇vue $set 給數據賦值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
拿來就用vue-gird-layout組件封裝示例
這篇文章主要介紹了vue-gird-layout組件封裝示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
Vue生命周期詳解
本文詳細講解了Vue的生命周期，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
antd的選擇框如何增加tab選中的方法示例
這篇文章主要為大家介紹了antd的選擇框如何增加tab選中的方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
vue發(fā)布到nginx下請求后臺404問題及解決
這篇文章主要介紹了vue發(fā)布到nginx下請求后臺404問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
詳解Vue3.x中組件間參數傳遞的示例代碼
在?Vue3.x?中,組件間的參數傳遞是構建復雜應用時不可或缺的一部分,無論是父子組件還是兄弟組件之間,合理的數據流動都是保持應用狀態(tài)一致性和可維護性的關鍵,本文將通過示例代碼,詳細介紹?Vue3.x?中組件間如何傳遞參數,需要的朋友可以參考下
2024-03-03