这里基本概念,基本使用方法,按需使用方法
http://mint-ui.github.io/#!/zh-cn
一.基本概念
- MintUI是饿了吗团队基于VUE2.0开发的用于移动端的组件库,与ElementUI相对应是基于VUE2.0开发的用于PC端的组件库.
这里面有移动端常用的组件,调用非常方便 - MintUI分为JS组件库和CSS组件库,如果需要使用那个类型的组件,就可以导入那个类型对应的外部文件,然后就可以按照说明文档使用各个组件了
-
这里我们不讲直接导入文件的方法,就讲一下利用npm库管理工具安装mint-ui组件的方法,这样方便打包
image.png
image.png
二.基本使用方法
- 初始化项目结构
vue init webpack mintui - 安装mint-ui组件库
npm i mint-ui -S
利用NPM包管理工具安装需要使用的框架,一般都会转换为小写 - 在main.js文件中导入安装的框架
import MintUI from 'mint-ui'
import "mint-ui/lib/style.css" - 声明需要使用MintUI
Vue.use(MintUI); - 在App组件中插入三个按钮,并绑定点击事件
这种用法会将整个框架都导入进来,打包到部署的项目中,性能不是很好,所以mint-ui提供了另外一种使用方式,按需导入
三.按需导入使用的方法
- 安装按需导入需要的插件
npm i babel-plugin-component -D - 在.babelrc(使webpack能够翻译高级语法)中添加相关配置
plugin:[,["component",[{"libraryName":"mint-ui","style":true}]]] - 导入需要的组件
import {Tabbar,TabItem} from 'mint-ui';
--注册需要使用的组件
Vue.component(Tabbar.name,Tabbar);
Vue.component(TabItem.name,TabItem); - 需改图片的src="@/assets/nav-icon-index.png"
-
改善底部导航栏无默认状态
v-model="selected"
app.vue
data(){return {selected,"id"}}
image.png
image.png
image.png
image.png
出现bug 与webpack-dev-server有关，解决方法如下
