首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Mint-UI

一、 MUI不同于Mint-UI,MUI只是开发出来的一套很好用的代码片段,里面提供了配置的样式,配置的HTML代码段,类似于Bootstrap; 而Mint-UI,是真正的组件库,是使用了Vue技术封装出来的成套的组件...,可以无缝的和VUE项目进行集成开发; 因此,从体验上来说,Mint-UI体验更好,因为这是别人帮我们开发的现成的组件库;MUI和bootstrap类似 理论上,任何项目都可以使用MUI或Bootstrap...,但是,Mint-UI只适用于Vue项目 二、安装mint-ui cnpm install mint-ui -S 三、引入 // 引入 整个mint-ui import MintUI from 'mint-ui...' import 'mint-ui/lib/style.css' Vue.use(MintUI) // 注意样式文件要单独引入 // 按需导入 1、安装 babel-plugin-component...) 4、注意: 要将 import MintUI from 'mint-ui' 注释掉 保留 import 'mint-ui/lib/style.css' 四、分类 1、JS componnets

2.5K10

Mint UI入门系列教程

Vue移动端框架Mint UI教程-搭建环境引入框架(一) ---- :https://mint-ui.github.io/#!.../zh-cn Github: https://github.com/ElemeFE/mint-ui/ ---- 今天具体说一说比较常用的;Mint UI框架的按钮组件,Mint UI是 饿了么团队开发基于...6:安装 Mint UI npm install mint-ui -S 快捷键ctrl+c,终止批处理操 作吗(Y/N),从上一步退出来,再输入命令npm install mint-ui -S 成功安装组件显示如下.../router' import Mint from 'mint-ui' import 'mint-ui/lib/style.css' Vue.config.productionTip = false...Vue移动端框架Mint UI教程-组件的使用(三) 前面两节说到,从搭建环境,引入Mint框架,到实现一个页面导航跳转; 然后就是开始写每个页面的代码,Mint UI存在必有道理,基于vue2.0mint-ui

3.2K31
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    记录使用mint-ui的感想

    mint-ui 今天记录一下使用mint-ui的心得,首先说明一下mint-ui是用来做手机端界面的ui库,这个ui库我是做项目的时候使用到了,所以今天简单的说明记录一下该库的一些存在的一些可能会出问题的地方...vue安装引入mint-ui 和引入平常的ui库一样,在终端输入: npm i mint-ui -S main.js中引入: import MintUI from 'mint-ui' Vue.use(MintUI...) 个别的样式是需要单独引入的 部分引入的话,直接在main.js中引入需要的功能: import { Button, Cell } from 'mint-ui' Vue.component(Button.name..., Button) Vue.component(Cell.name, Cell) 举例使用第一类:直接引用 举例使用一个提示信息吧: import { Toast } from 'mint-ui'; let...下面将这个提示语句封装起来: import {Toast} from 'mint-ui'; /** * @instance mint-ui 提示语句 * @param val 需要传递的话 */

    81410

    vivoAPP全机型UI适配方案

    (2)UI设计师要做的效果图要多了,是不是要针对每种机型都要设计一套效果图呢?(3)产品和运营需要选择的物料更受限制了,会不会这个物料在一个机器上正常。在其他机器上就不正常了呢?...(3)数据源驱动UI,千万不要在UI层面判断机型做UI的动态计算,页面会闪屏,体验不好。3.4 方案落地实战上面介绍了不同机型的适配规范,这个没有疑问之后,直接通过案例来看下具体如何实施。...3.4.1 UI如何设计的如图所示,能够直观地感受到,从直板手机到折叠屏内屏再到Pad横屏,当设备的可显示面积增大时,页面充分利用空间展示更多的商品信息。...这两套数据源要根据UI设计的规则来组装,例如以折叠屏的楼层4为例:折叠屏-外屏-楼层4:一行展示2个商品信息。折叠屏-内屏-楼层4:一行展示3个商品信息。...五、我们摆脱困扰了吗5.1 解决原先的问题通过前面的介绍,我们知道了,vivo的团队针对折叠屏和pad这种大屏,采取了全屏展示的方案,一开始的时候,我们遇到的问题也得到了解决:(1)开发人员的适配成本高了

    1.6K30

    Vue移动端框架Mint UI教程-搭建环境引入框架(一)

    今天具体说一说比较常用的;Mint UI框架的按钮组件,Mint UI是 饿了么团队开发基于vue .js的移动端UI框架,它包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。...:https://mint-ui.github.io/#!/zh-cn Github: https://github.com/ElemeFE/mint-ui/ ---- ?...运行初始化demo,输入命令npm run dev;运行一下初始后的demo,弹出访问地址,如果没有问题则进行安装Mint UI;准备好好之后,开始引入饿了么Mint UI组件。...6:安装 Mint UI npm install mint-ui -S 快捷键ctrl+c,终止批处理操 作吗(Y/N),从上一步退出来,再输入命令npm install mint-ui -S 成功安装组件显示如下...7:然后在项目中的main.js文件引入所有组件 // 引入全部组件 import Vue from 'vue'; import Mint from 'mint-ui'; Vue.use(Mint

    3K20

    Vue 饿了么Mint UI组件的基本使用

    本篇章就来介绍一下如何基本使用饿了么的Mint UI组件。 使用 饿了么的 MintUI 组件 Github 仓储地址 Mint-UI官方文档 ? 腾讯说明文档 ?...安装基本说明 首先我们来看看官的首页介绍,如下: ? 对于mint-ui的导入更加推荐使用按需导入的方式,因为这样可以节省压缩编译后的bundle.js的空间大小。...Mint-UI中css组件的使用 3.在 main.js 配置完整导入mint-ui ? 当完整导入mint-ui之后,就可以使用使用相关的组件了,下面来看看一个button按钮组件。...Mint-UI中 js 组件的使用 上面演示了mint-ui中css组件的基本使用,那么下面来看看js组件的基本使用。...1.按需导入的说明 按需引入 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

    2.5K50
    领券