基于vue的移动端怎么开发（常用的几款Vue移动端UI推荐）

收录几个常用的移动端UI框架                ，不定时更新
  
  
  
  
  
  
  
  
 。

1. Ionic / Ionic Framework

官网地址 | Github地址

An open source mobile UI toolkit for building modern, high quality cross-platform mobile apps from a single code base in React.Vue.Angular.

一款开源的移动端UI工具包  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，用于开发现代的                、高性能的跨平台移动app
















，支持React / Vue / Antular 
  
  
  
  
  
  
  
 。

Ionic 有以下特点（官网说明翻译）：

**1. 高性能：**默认快速构建——硬件加速和手势优化 


 


 


 


 


 


 


 


 
。

**2. 跨平台：**一份代码可以为多个移动平台构建灵活的UI
 
 
 
 
 
 
 
 
。

**3. React  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  、Angular
















、Vue：**对三大框架支持
  
  
  
  
  
  
  
  
，也支持纯JS环境  
   
   
   
   
   
   
   
  。

**4. 亮色
  
  
  
  
  
  
  
  
、暗色UI：**支持亮色和暗色主题 

 

 

 

 

 

 

 

 
。

Ionic提供了十分丰富的组件  
  
  
  
  
  
  
  
 ，各个组件也提供了完善的API

 

 

 

 

 

 

 

 
。

个人感觉Ionic 已经不仅仅是个UI
 


 


 


 


 


 


 


 


 ，Ionic 的用户其中很大一部分是注重其跨平台 app开发的功能
 
 
 
 
 
 
 
 
，开发者通过Ionic cli可以便捷的进行跨平台app的开发   
   
   
   
   
   
   
   
 ，做到一份代码多端运行                 。

不过有一点点可惜的是
 

 

 

 

 

 

 

 

 ，其支持Vue

 

 

 

 

 

 

 

 
，但是只支持Vue3.x版本 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
。

2. Vant

文档网站 | Github地址 | Demo地址

Vant 是一个轻量  
  
  
  
  
  
  
  
 、可靠的移动端组件库                 ，于 2017 年开源
















。

目前 Vant 官方提供了 Vue 2 版本
 


 


 


 


 


 


 


 


 、Vue 3 版本和微信小程序版本
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，并由社区团队维护 React 版本和支付宝小程序版本                         。

Vant提供了比较完善的组件
















，尤其是对于移动端购物网站                         ，提供了丰富的组件 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，如AddressEdit 地址编辑
 
 
 
 
 
 
 
 
、Card 卡片   
   
   
   
   
   
   
   
 、ContactCard 联系人卡片等等一系列组件 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
。

Vant不仅仅支持Vue2.x

























，还支持最新的Vue3.x

3. cube-ui

cube-ui 是滴滴推出的基于 Vue.js 实现的精致移动端组件库
























。

文档网站 | Github地址 | Demo地址

个人感觉cube-ui提供的组件不是那么的丰富                ，还有待完善  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，不过可以满足大部分日常开发需求                 。另外一点给人的感觉就是官网文档写的不是很详细 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
。

4. TDesign

官方网站 | Github地址

TDesign诞生于鹅厂内部业务
















，其不仅仅是一个简单的UI
  
  
  
  
  
  
  
  
，更是一套比较完善的设计指南和视觉体系















。

TDesign支持以下多端： 桌面端（Vue： 2.x
 

 

 

 

 

 

 

 

 、3.x稳定支持

 

 

 

 

 

 

 

 
、React：beta                 、Angular：待上线） 移动端（Vue 3.x：beta
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 、React：alpha
















、Flutter：待上线                         、Taro：待上线） 小程序（微信小程序：Rc 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 、QQ小程序：alpha）

从上面我们可以看出TDesign对于桌面端支持的比较完善  
  
  
  
  
  
  
  
 ，app端则有待加强
 


 


 


 


 


 


 


 


 ，对Vue3.x的支持也仅仅是到beta的程度

























、并且似乎对于Vue2.x版本的支持并没有在计划中
  
  
  
  
  
  
  
  
 。

通过TDesign官网我们可以看到
 
 
 
 
 
 
 
 
，其对于不同的设计工具（如Figma                、Sketch  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  、Axure
















、AdobeXD）都提供了相应的设计素材   
   
   
   
   
   
   
   
 ，这一点对于设计人员确是比较友好的 
  
  
  
  
  
  
  
 。

5. Mint UI

Mint UI是饿了么前端团队推出的基于 Vue.js 的移动端组件库 


 


 


 


 


 


 


 


 
。

官网地址 | Github地址 | Demo地址

提供的组件能满足大部分日常开发需求
 

 

 

 

 

 

 

 

 ，组件API有待完善
 
 
 
 
 
 
 
 
。其支持Vue 1.x
  
  
  
  
  
  
  
  
、Vue 2.x

 

 

 

 

 

 

 

 
，遗憾的是并不支持Vue 3.x

6. VUX

官网地址 | Github地址 | Demo地址

VUX（读音 [v’ju:z]                 ，同 views）是基于WeUI和Vue(2.x)开发的移动端UI组件库
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，主要服务于微信页面  
   
   
   
   
   
   
   
  。VUX官网充满了浓浓的自嘲的味道
















，以下几点都是摘自官网首页                         ，😄：

一个凑合的 Vue.js 移动端 UI 组件库

体验不极致

是的 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，VUX 还有很多问题

























，远远不完美                ，但一直在解决 

 

 

 

 

 

 

 

 
。

如果你在使用并且觉得有一些问题  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，不妨开个 issue 反馈一下
















，我们乐意解决详细描述的问题

维护靠个人

是的
  
  
  
  
  
  
  
  
，没有团队维护

 

 

 

 

 

 

 

 
。国内大多数开发者都选择了有知名前端团队维护的组件库                 。

当然你也可以试试选择 VUX  
  
  
  
  
  
  
  
 ，毕竟维护两年时间
 


 


 


 


 


 


 


 


 ，star 12k
 
 
 
 
 
 
 
 
，一定程度上也说明并不比大公司团队开源的差   
   
   
   
   
   
   
   
 ，不是么？

很难想象这是一个靠个人维护的项目
 

 

 

 

 

 

 

 

 ，并且作者已经坚持了7年左右

 

 

 

 

 

 

 

 
，佩服 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
。

虽说是个人维护的项目                 ，不过可以看到VUX官网的文档还是比较完善的
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，各种常见问题  
  
  
  
  
  
  
  
 、实例代码也都很多
















，可以供开发者参考
















。组件的API也是十分的丰富                         。在这里需要给开发者点个👍

结语

为方便大家比较                         ，我总结出以上各个ui对vue的支持情况如下：

# 移动端UI 是否支持Vue2.x 是否支持Vue3.x 1 Ionic √ 2 Vant √ √ 3 cube-ui √ 4 TDesign beta 5 Mint-UI √ 6 VUX √