前端 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 积淀性工程
- componen 积淀性封装组件
- 积淀性封装内部 sdk
eg.qqmap 文件夹,依据业务需要封装腾讯 sdk api 办法。
- 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 组件;