关于前端:前端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 组件；

思考应用的组件库