html mint ui,移动端UI库对比 vant mint-ui

基于vuecli3 构建的项目，对比vant mint-ui实现同样功能，打包后体积大小；

一 mint-ui 是饿了么团队开发的基于vue.js的移动端UI库

1 安装：npm install --save-dev mint-ui

2 引入：

A：全局引入，在main.js中

import Mint from 'mint-ui'

import 'mint-ui/lib/style.css'

Vue.use(Mint)

B：按需引入，使用 babel-plugin-component

npm install --save-dev babel-plugin-component

在babel.config.js中配置：

module.exports = {

presets: [

'@vue/cli-plugin-babel/preset'

plugins: [

['component', {

libraryName: 'mint-ui',

style: true

}]

]

}

3 直接在页面中引入需要的组件

A：全局引入直接使用即可

title="checkbox list"

v-model="value"

:options="['optionA', 'optionB', 'optionC']">

B：按需引入

//js中

import { Radio, Checklist } from 'mint-ui'

//html中

:max="2"

v-model="answerOne"

:options="optionsOne"

4 全局引入和按需引入包体大小对比

二 vant 有赞开源的一套基于vue2.0的Mobile组件库，当做商城类的项目时优选改组件

1 安装：npm install --save-dev vant

2 引入：

A：全局引入，在main.js中

import Vant from 'vant'

import 'vant/lib/index.css'

Vue.use(Vant)

B：按需引入，使用 babel-plugin-import

npm install --save-dev babel-plugin-import

在babel.config.js中配置

module.exports = {

presets: [

'@vue/cli-plugin-babel/preset'

plugins: [

['import', {

libraryName: 'vant',

libraryDirectory: 'es',

style: true

}, 'vant']

]

}

3 直接在页面中引入需要的组件

A：全局引入直接使用即可

复选框 a

复选框 b

B：按需引入

import { RadioGroup, Radio, CheckboxGroup, Checkbox } from 'vant'

(item,index) in optionsOne">

4 全局引入和按需引入包体大小对比

经对比，个人觉得相对mint-ui更加轻量，非商城类项目可以选择mint-ui，商城类项目优选vant

html mint ui,移动端UI库对比 vant mint-ui相关推荐

移动端vant时间选择器_vue移动端组件库（vant）
[摘要]在vue中有许多组件库,vant就是一套主要为移动端网站开发的开源的移动端组件库... [作者:黄可毅] 一.vant安装以及使用经历 1.vant安装在Vue 2 项目,安装 Vant 2 ...
Vue3 UI组件库对比，Naive UI、Element Plus、 Ant Design Vue
对比图 \ Element Plus Naive ui Ant Design Vue 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库阿里Ant Desi ...
Mint UI —— 基于 Vue.js 的移动端组件库
写文章登录 Mint UI -- 基于 Vue.js 的移动端组件库杨奕 8 个月前 Mint UI GitHub:https://github.com/ElemeFE/mint-ui 项目主页:h ...
vue,uni-app 移动端UI框架（组件库）
一.Vant UI 轻量.可靠的移动端 Vue 组件库 https://youzan.github.io/vant/#/zh-CN/intro 二.uView(推荐): 多平台快速开发的UI框架. 介 ...
实战Vue：Mint UI移动端购物商城
文章目录 UI组件库下载安装配置UI组件库使用mint-ui组件库中组件短消息提示框 iconfont 确认框创建空组件实现提示框案例 mint-ui表单组件输入框开关组件单选列表表单 ...
vue-cli3.0结合lib-flexible、px2rem实现移动端适配，完美解决第三方ui库样式变小问题
vue-cli3.0结合lib-flexible.px2rem实现移动端适配,完美解决第三方ui库样式变小问题参考文章: (1)vue-cli3.0结合lib-flexible.px2rem实现移动 ...
GMU（Global Mobile UI）是百度前端通用组开发的移动端组件库
GMU(Global Mobile UI)是百度前端通用组开发的移动端组件库,具有代码体积小.简单.易用等特点,组件内部处理了很多移动端的bug,覆盖机型广,能大大减少开发交互型组件的工作量,非常适合 ...
各种Android UI开源框架开源库
各种Android UI开源框架开源库转 https://blog.csdn.net/zhangdi_gdk2016/article/details/84643668 自己总结的Android开源 ...
Element UI（桌面组件库）之三大灵魂拷问
1. 什么是Element UI 概述 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供 ...
qt生成无ui界面动态库，有ui界面的动态库，以及含有资源文件和qss文件的动态库
提要此文分别就qt生成纯代码的动态库,含有ui文件的动态库以及含有资源文件qss文件和切图的动态库. 实现 1.纯代码的生成qt库.即没有ui文件的项目. 打开QtCreate,新建文件,选择lib ...

html mint ui,移动端UI库对比 vant mint-ui

html mint ui,移动端UI库对比 vant mint-ui相关推荐

最新文章

热门文章