vue前端框架—Mint UI詳解(更適用于移動端)
一、mintUI簡介
mint是一個基于vue的前端UI框架,而它的樣式比較類似于手機的樣式,可以說是一個基于vue打包app的UI框架,使用mint框架可以給使用vue打包的app的用戶更好的交互體驗。mint已支持vue2.0。
二、安裝和引入mintUI
在安裝之前首先要對vue.js有所了解,有一個建立好的vue的項目以及安裝好的node.js。
執(zhí)行命令npm i mint-ui -S,出現(xiàn)以下界面代表安裝成功。

引入muitUI:
在main.js中加入
import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(MintUI)
注意:樣式需要單獨引入。這樣引入可以引入全部的組件
如果不想引入全部組件,只想按需引入,則需要安裝
npm install babel-plugin-component -D
修改.babeirc為:

然后import需要的組件就可以了
三、使用示例
1、提示信息toast
html:
'
js:

在頁面中的效果:

2、消息提示框
html:

js:

頁面效果:

更多的示例和具體使用方法請看mintUI官方文檔:http://mint-ui.github.io/#!/zh-cn
通過以上的兩個示例可以看到,使用mintUI的用戶交互界面要友好很多,在基于vue開發(fā)app的時候可以考慮使用這個前端UI框架。
以上所述是小編給大家介紹的vue前端框架—Mint UI的詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue?this.$router和this.$route區(qū)別解析及路由傳參的2種方式?&&?this.$route
this.$router?相當(dāng)于一個全局的路由器對象,包含了很多屬性和對象(比如?history?對象),任何頁面都可以調(diào)用其?push(),?replace(),?go()?等方法,本文給大家介紹Vue中this.$router與this.$route的區(qū)別?及push()方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
Vue使用Three.js創(chuàng)建交互式3D場景的全過程
在現(xiàn)代Web開發(fā)中,通過在頁面中嵌入3D場景,可以為用戶提供更加豐富和交互性的體驗,Three.js是一款強大的3D JavaScript庫,它簡化了在瀏覽器中創(chuàng)建復(fù)雜3D場景的過程,本文將介紹如何在Vue中使用Three.js,創(chuàng)建一個簡單的交互式3D場景,需要的朋友可以參考下2023-11-11
vue 綁定對象,數(shù)組之?dāng)?shù)據(jù)無法動態(tài)渲染案例詳解
這篇文章主要介紹了vue 綁定對象,數(shù)組之?dāng)?shù)據(jù)無法動態(tài)渲染案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue中循環(huán)多個li(表格)并獲取對應(yīng)的ref的操作代碼
我想要獲取每一個循環(huán)并獲取每一個li(或者其它循環(huán)項)的ref,以便于后續(xù)的操作,接下來通過本文給大家分享vue中循環(huán)多個li(表格)并獲取對應(yīng)的ref的操作代碼,感興趣的朋友跟隨小編一起看看吧2024-02-02
vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題解決
這篇文章主要介紹了vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題的問題及解決方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-01-01

