這里基本概念,基本使用方法,按需使用方法
http://mint-ui.github.io/#!/zh-cn
一.基本概念
- MintUI是餓了嗎團(tuán)隊(duì)基于VUE2.0開發(fā)的用于移動(dòng)端的組件庫(kù),與ElementUI相對(duì)應(yīng)是基于VUE2.0開發(fā)的用于PC端的組件庫(kù).
這里面有移動(dòng)端常用的組件,調(diào)用非常方便 - MintUI分為JS組件庫(kù)和CSS組件庫(kù),如果需要使用那個(gè)類型的組件,就可以導(dǎo)入那個(gè)類型對(duì)應(yīng)的外部文件,然后就可以按照說明文檔使用各個(gè)組件了
-
這里我們不講直接導(dǎo)入文件的方法,就講一下利用npm庫(kù)管理工具安裝mint-ui組件的方法,這樣方便打包
image.png
image.png
二.基本使用方法
- 初始化項(xiàng)目結(jié)構(gòu)
vue init webpack mintui - 安裝mint-ui組件庫(kù)
npm i mint-ui -S
利用NPM包管理工具安裝需要使用的框架,一般都會(huì)轉(zhuǎn)換為小寫 - 在main.js文件中導(dǎo)入安裝的框架
import MintUI from 'mint-ui'
import "mint-ui/lib/style.css" - 聲明需要使用MintUI
Vue.use(MintUI); - 在App組件中插入三個(gè)按鈕,并綁定點(diǎn)擊事件
這種用法會(huì)將整個(gè)框架都導(dǎo)入進(jìn)來,打包到部署的項(xiàng)目中,性能不是很好,所以mint-ui提供了另外一種使用方式,按需導(dǎo)入
三.按需導(dǎo)入使用的方法
- 安裝按需導(dǎo)入需要的插件
npm i babel-plugin-component -D - 在.babelrc(使webpack能夠翻譯高級(jí)語(yǔ)法)中添加相關(guān)配置
plugin:[,["component",[{"libraryName":"mint-ui","style":true}]]] - 導(dǎo)入需要的組件
import {Tabbar,TabItem} from 'mint-ui';
--注冊(cè)需要使用的組件
Vue.component(Tabbar.name,Tabbar);
Vue.component(TabItem.name,TabItem); - 需改圖片的src="@/assets/nav-icon-index.png"
-
改善底部導(dǎo)航欄無(wú)默認(rèn)狀態(tài)
v-model="selected"
app.vue
data(){return {selected,"id"}}
image.png
image.png
image.png
image.png
出現(xiàn)bug 與webpack-dev-server有關(guān)烘绽，解決方法如下
