1-MintUI初次体验

这里基本概念,基本使用方法,按需使用方法
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有关，解决方法如下

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容