1-MintUI初次体验

这里基本概念,基本使用方法,按需使用方法
http://mint-ui.github.io/#!/zh-cn

• https://www.baidu.com/s?wd=!%20mintui%401.0.0%20dev%3A%20%60webpack-dev-server%20--inline%20--progress%20--config%20build%2Fw&rsv_spt=1&rsv_iqid=0xe923b9f500012060&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=2&rsv_sug1=1&rsv_sug7=001&rsv_n=2
  效果图.gif
  效果图.gif

一.基本概念

• 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有关，解决方法如下

• http://www.mamicode.com/info-detail-2279099.html