欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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+js實現(xiàn)視頻淡入淡出效果

    vue+js實現(xiàn)視頻淡入淡出效果

    這篇文章主要為大家詳細介紹了vue+js實現(xiàn)視頻的淡入淡出，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-08-08
  • Vue使用axios進行數(shù)據(jù)異步交互的方法

    Vue使用axios進行數(shù)據(jù)異步交互的方法

    大家都知道在Vue里面有兩種出名的插件能夠支持發(fā)起異步數(shù)據(jù)傳輸和接口交互,分別是axios和vue-resource,同時vue更新到2.0之后,宣告不再對vue-resource更新,而是推薦的axios,今天就講一下怎么引入axios,需要的朋友可以參考下
    2024-01-01
  • nuxt踩坑之Vuex狀態(tài)樹的模塊方式使用詳解

    nuxt踩坑之Vuex狀態(tài)樹的模塊方式使用詳解

    這篇文章主要介紹了nuxt踩坑之Vuex狀態(tài)樹的模塊方式使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-09-09
  • vue項目出現(xiàn)ERESOLVE could not resolve問題及解決

    vue項目出現(xiàn)ERESOLVE could not resolve問題及解決

    這篇文章主要介紹了vue項目出現(xiàn)ERESOLVE could not resolve問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue3響應式高階用法之shallowRef()的使用

    Vue3響應式高階用法之shallowRef()的使用

    在Vue3框架中,shallowRef()為開發(fā)者提供了細粒度的響應式控制能力,特別適用于處理深層嵌套對象或需要部分響應式的場景,本文就來詳細的介紹一下,感興趣的可以了解一下
    2024-09-09
  • vue中實現(xiàn)拖動調整左右兩側div的寬度的示例代碼

    vue中實現(xiàn)拖動調整左右兩側div的寬度的示例代碼

    這篇文章主要介紹了vue中實現(xiàn)拖動調整左右兩側div的寬度的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07
  • vue實現(xiàn)tab標簽(標簽超出自動滾動)

    vue實現(xiàn)tab標簽(標簽超出自動滾動)

    當創(chuàng)建的tab標簽超出頁面可視區(qū)域時自動滾動一個tab標簽距離，并可手動點擊滾動tab標簽，需要的朋友們下面隨著小編來一起學習學習吧
    2021-05-05
  • 在vue2項目中使用dart-sass的問題及解決方法

    在vue2項目中使用dart-sass的問題及解決方法

    在Vue2項目中,使用dart-sass替代node-sass可以解決安裝困難和環(huán)境兼容問題,VueCLI3+用戶可直接使用,而VueCLI2用戶需升級VueCLI和項目,具體方法包括修改package.json依賴并使用.scss文件編寫樣式,此更改有助于提升項目的開發(fā)效率和跨平臺兼容性
    2024-09-09
  • ElementPlus表單rules校驗的方法步驟

    ElementPlus表單rules校驗的方法步驟

    相信大家經常都會遇到要處理表單驗證的環(huán)節(jié),而我在最近的項目中也遇到需要做表單驗證的業(yè)務,下面這篇文章主要給大家介紹了關于ElementPlus表單rules校驗的方法步驟,需要的朋友可以參考下
    2023-04-04
  • vue3.0找不到模塊“./App.vue”或其相應的類型聲明(多種情況分析)

    vue3.0找不到模塊“./App.vue”或其相應的類型聲明(多種情況分析)

    這篇文章主要介紹了vue3.0找不到模塊“./App.vue”或其相應的類型聲明,報錯原因是typescript?只能理解?.ts?文件，無法理解?.vue文件，本文通過多種情況分析給大家詳細講解，需要的朋友可以參考下
    2023-01-01

最新評論