快捷導(dǎo)航

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+js實(shí)現(xiàn)視頻淡入淡出效果
這篇文章主要為大家詳細(xì)介紹了vue+js實(shí)現(xiàn)視頻的淡入淡出，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue使用axios進(jìn)行數(shù)據(jù)異步交互的方法
大家都知道在Vue里面有兩種出名的插件能夠支持發(fā)起異步數(shù)據(jù)傳輸和接口交互,分別是axios和vue-resource,同時(shí)vue更新到2.0之后,宣告不再對(duì)vue-resource更新,而是推薦的axios,今天就講一下怎么引入axios,需要的朋友可以參考下
2024-01-01
nuxt踩坑之Vuex狀態(tài)樹(shù)的模塊方式使用詳解
這篇文章主要介紹了nuxt踩坑之Vuex狀態(tài)樹(shù)的模塊方式使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue項(xiàng)目出現(xiàn)ERESOLVE could not resolve問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目出現(xiàn)ERESOLVE could not resolve問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue3響應(yīng)式高階用法之shallowRef()的使用
在Vue3框架中,shallowRef()為開(kāi)發(fā)者提供了細(xì)粒度的響應(yīng)式控制能力,特別適用于處理深層嵌套對(duì)象或需要部分響應(yīng)式的場(chǎng)景,本文就來(lái)詳細(xì)的介紹一下,感興趣的可以了解一下
2024-09-09
vue中實(shí)現(xiàn)拖動(dòng)調(diào)整左右兩側(cè)div的寬度的示例代碼
這篇文章主要介紹了vue中實(shí)現(xiàn)拖動(dòng)調(diào)整左右兩側(cè)div的寬度的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
vue實(shí)現(xiàn)tab標(biāo)簽(標(biāo)簽超出自動(dòng)滾動(dòng))
當(dāng)創(chuàng)建的tab標(biāo)簽超出頁(yè)面可視區(qū)域時(shí)自動(dòng)滾動(dòng)一個(gè)tab標(biāo)簽距離，并可手動(dòng)點(diǎn)擊滾動(dòng)tab標(biāo)簽，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
在vue2項(xiàng)目中使用dart-sass的問(wèn)題及解決方法
在Vue2項(xiàng)目中,使用dart-sass替代node-sass可以解決安裝困難和環(huán)境兼容問(wèn)題,VueCLI3+用戶可直接使用,而VueCLI2用戶需升級(jí)VueCLI和項(xiàng)目,具體方法包括修改package.json依賴并使用.scss文件編寫(xiě)樣式,此更改有助于提升項(xiàng)目的開(kāi)發(fā)效率和跨平臺(tái)兼容性
2024-09-09
ElementPlus表單rules校驗(yàn)的方法步驟
相信大家經(jīng)常都會(huì)遇到要處理表單驗(yàn)證的環(huán)節(jié),而我在最近的項(xiàng)目中也遇到需要做表單驗(yàn)證的業(yè)務(wù),下面這篇文章主要給大家介紹了關(guān)于ElementPlus表單rules校驗(yàn)的方法步驟,需要的朋友可以參考下
2023-04-04
vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明(多種情況分析)
這篇文章主要介紹了vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明,報(bào)錯(cuò)原因是typescript?只能理解?.ts?文件，無(wú)法理解?.vue文件，本文通過(guò)多種情況分析給大家詳細(xì)講解，需要的朋友可以參考下
2023-01-01