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

更新時(shí)間：2017年05月12日 16:59:20 作者：遇酒

這篇文章主要為大家詳細(xì)介紹了vue.js中使用mint-ui框架的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文為大家分享了vue.js中mint-ui框架的使用方法，具體內(nèi)容如下

1.安裝vue2.0的mint-ui框架

npm install mint-ui -save

2.引用和使用框架，我用的是全部組件，也可以按需選擇加載相應(yīng)的組件，不過(guò)要使用babel-plugin-component

import Mint from 'mint-ui'; 
Vue.use(Mint);

3.創(chuàng)建一個(gè)header.vue組件，里面寫(xiě)入mint-ui的頭部組件

<template> 
 <mt-header title="問(wèn)答"> 
 <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">提問(wèn)<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組件中調(diào)用header.vue組件

<template> 
 <div id="app"> 
 <h-eader><h-eader> 
 <router-link to="/home">主頁(yè)<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.預(yù)覽圖

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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