前端ui框架列举与比较

前端ui框架列举与比较

pc端

• iViewUI：一套基于 Vue.js 的高质量UI 组件库，有很多实用的基础组件比elementui的组件更丰富，主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发，支持 ES2015 高质量、功能丰富 友好的 API ，自由灵活地使用空间。
• ElementUI：element ui框架的按钮组件，由饿了么前端开源的UI框架。vue开发者大都选用此框架。
• Lay UI：layui是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
• At UI：at-ui 是一款阿里团队创建的基于 Vue 2.x 的前端 UI 组件库，主要用于快速开发 PC 网站产品。 它提供了一套 npm + webpack + babel 前端开发工作流程，CSS 样式独立，即使采用不同的框架实现都能保持统一的 UI 风格。
• At-Design UI：antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

移动端

• Mint UI ： 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库，包含丰富的CSS和JS组件，能满足日常的移动端开发需求。
• vant UI：Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。（偏向于电商、餐饮、外卖平台、票务预订等购物类小程序，有封装类似组件）
• iView Weapp：与微信自带组件库兼容性较高，使用方式类似。
• easy UI：任何一个组件都可以单独调用，不依赖任何组件，可根据业务需求添加真正使用的组件（可酌情学习）。使用方法同。
• WeUI：一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
• Taro UI：适用多端开发，通过Taro编译工具，将源代码编译在不同端运行的代码。弊端对开发者要求较高，开发过程需要协调，否则后期编译会有较大问题需要调整。
• Flutter：Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。
• Cube UI：cube-ui 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。
• ionic：既是一个CSS框架也是一个Javascript UI库,Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。

拓展 原生小程序开发规范

命名规范](https://juejin.cn/post/6844903672162304013)，采用BEM命名规范，B-块(block)，E-元素(element)，M-修饰符(modifier)。

• 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。

__ 双下划线：双下划线用来连接块和块的子元素。
_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态。

目录规范

• em-mi-ni-app 沉淀性工程

  1. componen 沉淀性封装组件
  2. 沉淀性封装外部sdk

     eg.qqmap文件夹，根据业务需求封装腾讯sdk api方法。

  3. utils：包含file.js：调用问价服务方法封装；request.js :微信request方法封装；util.js：业务工具函数抽取；
• config

  包含api.config.js：调用接口方法封装；const.config.js：工程常量提取；global.config.js：工程全局配置；

• components

  工程抽取组件，与沉淀性工程文件component不重合；

• image

  工程使用的静态图片，多为图标文件，其余图片请酌情考虑线上资源，以免编译受限。

• pages

  miniapp页面文件，一个页面通常包含.js：页面逻辑；.wxml：页面结构；.json：页面配置；.wxss：页面样式表；（注意要求四个文件必须具有相同的路径与文件名，即只是文件后缀不相同）。

• service

  包含多个.js文件，业务逻辑抽取；

• utils

  包含多个js文件，存放封装的工具类函数，与沉淀性工程文件utils不重合；

• app.js

  minipp入口文件及逻辑文件，用于定义全局数据和函数，指定minipp的生命周期函数。初始化方法多在此miniapp周期函数中执行。

• app.json

  miniapp公共配置，对5个功能进行配置，配置页面路径，配置窗口表现，配置标签导航，配置网络超时，配置debug模式；

• app.wxss

  小程序公共样式表，写在此文件的样式，默认全局使用，无层级关系。

• package-lock.json

  简单说明，用于锁定安装时包的版本号，需要上传至git，以保证npm install时开发者依赖能一致。在npm install时生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。

• package.json

  定义了项目的配置信息以及所需要的各种模块，npm install后自动下载所需模块。package.json只能锁定大版本，即版本第一位，即每次安装会默认安装大版本下最新版本，易不稳定；package-lock.json用于解决此不稳定问题，使得包锁定不升级。

• project.config.json

  项目配置文件，包含开发时一些个性化配置。

• sitemap.json：页面索引配置文件，用于配置小程序及其页面是否允许微信索引；若不配置此文件，则默认所有页面都允许都被索引。

微信自带ui组件库WeUI使用 利弊

统一开发风格，暂未遇到兼容性问题；

组件数量受限，需要自封装一些组件；使用原生组价改写方法较难，navBar大都设计原生不支持，须另外封装。eg.slider组件；

考虑使用的组件库