本篇文章給大家談?wù)勑〕绦蜷_發(fā)使用什么ui框架，以及小程序ui設(shè)計(jì)和appUI設(shè)計(jì)的區(qū)別對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

vue的ui框架有哪些

elementUI

2.iview

這個(gè)UI框架是對(duì)標(biāo)elementUI而生的，最大優(yōu)點(diǎn)是官方有桌面版配置工具，只需使用鼠標(biāo)就可以構(gòu)建一個(gè)基于iview+vue的應(yīng)用，免去手巧命令的煩惱。最新的版本為3.x。建議對(duì)elementUI框架審美疲勞的同學(xué)可以嘗試這個(gè)呦。官方網(wǎng)站的文檔和例子基本上你是小白也能學(xué)明白。

3.zanUI

由有贊團(tuán)隊(duì)開源的移動(dòng)端UI框架，對(duì)于移動(dòng)電商應(yīng)用的開發(fā)來說，有很多寫好的頁(yè)面組件，可以直接拿來使用。當(dāng)然zanUI的樣式也是很好看的。當(dāng)然也有PC端組件，和小程序端。zanUI一共分三個(gè)版本，針對(duì)移動(dòng)端的為vantUI，PC端為zentUI，小程序端為Vant Weapp。

4.onsenUI

onsenUI的組件樣式

這個(gè)UI框架是國(guó)外開發(fā)，所以UI設(shè)計(jì)，很多都是迎合國(guó)外用戶，對(duì)于國(guó)內(nèi)用戶，可能不是很好看，但是做為主打海外市場(chǎng)的應(yīng)用，這個(gè)UI框架還是值得去使用的。

5.mintUI

這個(gè)是一個(gè)中規(guī)中矩的移動(dòng)端UI框架，適合移動(dòng)端的絕大部分場(chǎng)景。

6.museUI

這個(gè)框架還是比較有特色的，不管怎么說，這類不隨波逐流的UI框架已經(jīng)很少見了，但是還是建議使用在主打海外市場(chǎng)的應(yīng)用上。

前端ui框架排名

在前端項(xiàng)目開發(fā)過程中，現(xiàn)在很少有人會(huì)使用原生的CSS來搭建頁(yè)面，總歸都會(huì)引入一些前端UI框架以減少代碼的書寫。一般為了方便自己的使用，很多大公司都有自己的一套UI框架，同時(shí)也會(huì)把其開源出來。下面就是最近經(jīng)常使用并且很流行的一些前端UI框架，總有一款適合你：

Mint UI

Mint UI

Mint UI是餓了么團(tuán)隊(duì)開發(fā)的基于Vue .js的移動(dòng)端UI框架，它包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動(dòng)端開發(fā)需要。

WeUI

WeUI是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、toast、article、icon等各式元素。

Cube-ui

Cube-ui

Cube-ui 是滴滴團(tuán)隊(duì)開發(fā)的基于 Vue.js 實(shí)現(xiàn)的精致移動(dòng)端組件庫(kù)。支持按需引入和后編譯，輕量靈活；擴(kuò)展性強(qiáng)，可以方便地基于現(xiàn)有組件實(shí)現(xiàn)二次開發(fā)。

iView UI

iView UI

iView UI是一個(gè)強(qiáng)大的UI庫(kù)，基于vue，有很多實(shí)用的基礎(chǔ)組件比elementui的組件更豐富，主要服務(wù)于 PC 界面的中后臺(tái)產(chǎn)品。使用單文件的 Vue 組件化開發(fā)模式 基于 npm + webpack + babel 開發(fā)，支持 ES2015 高質(zhì)量、功能豐富 友好的 API ，自由靈活地使用空間。

LayUI

LayUI

LayUI是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡(jiǎn)，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細(xì)節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)。

ElementUI

ElementUI

Element是餓了么前端開源維護(hù)的Vue UI組件庫(kù),組件齊全，基本涵蓋后臺(tái)所需的所有組件，文檔講解詳細(xì)，例子也很豐富。 主要用于開發(fā)PC端的頁(yè)面，是一個(gè)質(zhì)量比較高的Vue UI組件庫(kù)。

at-ui

at-ui

at-ui 是一款阿里團(tuán)隊(duì)創(chuàng)建的基于 Vue 2.x 的前端 UI 組件庫(kù)，主要用于快速開發(fā) PC 網(wǎng)站產(chǎn)品。 它提供了一套 npm + webpack + babel 前端開發(fā)工作流程，CSS 樣式獨(dú)立，即使采用不同的框架實(shí)現(xiàn)都能保持統(tǒng)一的 UI 風(fēng)格。

amaze UI

amaze UI

Amaze UI 是一個(gè)移動(dòng)優(yōu)先的跨屏前端框架。提供基礎(chǔ)樣式，網(wǎng)格，表格、表單、按鈕及常用組件樣式。是一個(gè)輕量級(jí)（所有 CSS 和 JS gzip 后 100 kB 左右）、?Mobile first?的前端框架

Vant UI

Vant UI

Vant UI是有贊前端團(tuán)隊(duì)基于有贊統(tǒng)一的規(guī)范實(shí)現(xiàn)的 Vue 組件庫(kù)，提供了一整套 UI 基礎(chǔ)組件和業(yè)務(wù)組件。通過 Vant，可以快速搭建出風(fēng)格統(tǒng)一的頁(yè)面，提升開發(fā)效率。

Flutter

Flutter

Flutter 是谷歌的移動(dòng)端 UI 框架，可在極短的時(shí)間內(nèi)構(gòu)建 Android 和 iOS 上高質(zhì)量的原生級(jí)應(yīng)用。 Flutter 可與現(xiàn)有代碼一起工作, 它被世界各地的開發(fā)者和組織使用, 并且 Flutter 是免費(fèi)和開源的.

ionic

Ionic既是一個(gè)CSS框架也是一個(gè)Javascript UI庫(kù),Ionic 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開發(fā)框架。通過 SASS 構(gòu)建應(yīng)用程序，它 提供了很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。 它使用 JavaScript MVVM 框架和 AngularJS 來增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動(dòng)開發(fā)者的共同選擇。

Taro 3.3 alpha 發(fā)布：用 ant-design 開發(fā)小程序？

小程序的設(shè)計(jì)并沒有完全遵循 Web 規(guī)范，導(dǎo)致小程序生態(tài)和傳統(tǒng) Web 開發(fā)生態(tài)之間的割裂，海量?jī)?yōu)秀的 Web 物料并不能直接用于小程序開發(fā)。因而 Taro 在相當(dāng)一段時(shí)間內(nèi)生態(tài)都相對(duì)薄弱，UI 框架選擇不多的問題更是深深困擾著開發(fā)者。

另一方面，業(yè)界有著存量的 H5 應(yīng)用，中短期內(nèi) H5 應(yīng)用適配到小程序端的需要還會(huì)存在。我們希望能減少 H5 應(yīng)用遷移到小程序端的成本，甚至能夠直接運(yùn)行在小程序端。

Taro 團(tuán)隊(duì)一直在思考如何最大限度地在小程序環(huán)境中復(fù)用 Web 生態(tài)，直到 Taro 3.0 誕生后，這種想法有了落地的可能。下文將介紹基于 Taro 3.0 實(shí)現(xiàn) H5 同構(gòu)的思路與問題，以及我們嘗試適配了三大移動(dòng)端 UI 框架 WEUI 、 Ant Design Mobile 、 VantUI 的實(shí)驗(yàn)結(jié)果。

Taro 3.0 是一款重運(yùn)行時(shí)的跨端框架，它通過模擬實(shí)現(xiàn)瀏覽器的 BOM 和 DOM API 實(shí)現(xiàn)了對(duì) React、Vue 等 Web 開發(fā)框架的兼容。

既然已經(jīng)有了瀏覽器環(huán)境的 BOM 和 DOM API，Taro 應(yīng)用和 Web 應(yīng)用之間的鴻溝在于小程序組件和 HTML 標(biāo)簽之間的差異。

Taro3 的渲染數(shù)據(jù)流如下：

前端框架 - Taro DOM - 小程序 data

HTML 標(biāo)簽和小程序組件的標(biāo)簽名、屬性、事件是有差異的，而前端框架無需感知這些差異。

因此前端框架適配層、Taro DOM 層不需要改動(dòng)，只要在 Taro DOM 序列化為小程序 data 這一步作映射即可。

HTML 標(biāo)簽相對(duì)小程序組件封裝程度更低、功能更簡(jiǎn)單，可以看作是小程序組件的子集。因此可以按一定的規(guī)則，把 HTML 標(biāo)簽映射為小程序組件，如：

完整的標(biāo)簽名映射規(guī)則請(qǐng)看： RFC 附錄一

如果 HTML 標(biāo)簽的屬性能在對(duì)應(yīng)小程序組件的屬性上找到對(duì)應(yīng)，則進(jìn)行映射，如：

完整的屬性名映射規(guī)則請(qǐng)看： RFC 附錄二

把 HTML 特有的事件在小程序端找到相似的事件進(jìn)行映射，如：

完整的事件映射規(guī)則請(qǐng)看： RFC 附錄三

前文介紹了我們會(huì)把 HTML 標(biāo)簽映射為小程序組件，但是 H5 應(yīng)用中使用到的 CSS 標(biāo)簽選擇器就會(huì)失效。

因此 Taro 使用了類名去進(jìn)行模擬：

Taro 提供兩種內(nèi)置的瀏覽器默認(rèn)樣式，可以直接引入生效：

理想很美好，但現(xiàn)實(shí)卻略顯骨感。即使 Taro 能實(shí)現(xiàn) BOM、DOM API，支持使用 HTML 標(biāo)簽等，同構(gòu)方案還是存在著一些框架層面抹平不了的差異。以下列舉出若干主要限制：

在 H5 中我們可以調(diào)用 DOM API 同步獲取元素的尺寸：

但是在小程序中，獲取元素尺寸的 API 是異步的：

因此不能兼容那些使用了同步 DOM API 去獲取元素尺寸的組件。

canvas 、 video 、 audio 等標(biāo)簽在 H5 端可以直接調(diào)用 HTMLElement 上的方法：

但是在 Taro 中，要調(diào)用組件上的原生方法，必須先創(chuàng)建對(duì)應(yīng)的 Context ：

部分樣式或 CSS 選擇器在小程序中不支持，如：

首先需要安裝 v3.3 的 CLI 工具：

然后進(jìn)入項(xiàng)目，把 package.json 文件中 taro 相關(guān)依賴的版本修改為 ^3.3.0-alpha.2 ，再重新安裝依賴（建議先把 node_modules 文件夾刪除）。

為了節(jié)省項(xiàng)目空間，同構(gòu)功能是可選的，以 Taro 插件的形式提供。

首先開發(fā)者需要安裝插件 @tarojs/plugin-html ：

然后配置使用此插件：

為了驗(yàn)證同構(gòu)功能的可用性和效果，我們對(duì) CSS 樣式庫(kù) WEUI 、React 組件庫(kù) Antd Design Mobile 、Vue2 組件庫(kù) VantUI 的所有組件進(jìn)行了測(cè)試。

測(cè)試效果比較理想，甚至稍微超出我們的預(yù)期，配合各組件庫(kù)自身的按需加載能力，能以小巧的體積使用豐富的組件，相信各位開發(fā)者會(huì)喜歡這個(gè)功能。

倉(cāng)庫(kù)地址： taro-weui

WEUI 是一個(gè) CSS 的樣式庫(kù)，與框架無關(guān)，兼容性比較高，大部分組件能直接使用。

倉(cāng)庫(kù)地址： taro-antd-mobile

能直接兼容使用的組件大概為 80%，主要問題在于：

倉(cāng)庫(kù)地址： taro-vant

VantUI 的組件十分豐富，能直接兼容使用的組件大概為 70%。部分開發(fā)者會(huì)在 Taro 中配合使用 Vant Weapp，但 Vant Weapp 只能運(yùn)行在微信小程序，因此對(duì) VantUI 的直接適配是一個(gè)很好的補(bǔ)充。

適配過程主要遇到的問題有：

同構(gòu)方案還在持續(xù)優(yōu)化中，部分實(shí)現(xiàn)還沒有最終定稿。歡迎各位開發(fā)者到我們的論壇下留言，提出您的寶貴意見～： 同構(gòu)方案 RFC 。

歡迎關(guān)注凹凸實(shí)驗(yàn)室

微信小程序ui框架有哪些

微信小程序開發(fā)，是目前火爆的開發(fā)方式，也是適應(yīng)中小企業(yè)快速解決的一個(gè)方案。選擇一個(gè)合適自己的開發(fā)UI框架，能夠讓自己開發(fā)速度提升數(shù)倍。

推薦兩個(gè)小程序UI框架：

WeUI

WeUI是由微信官方設(shè)計(jì)團(tuán)隊(duì)分別支持微信H5網(wǎng)頁(yè)和微信原生小程序的開源UI組件

ColorUI

ColorUI是開源且支持原生小程序的UI組件，由于我目前在幫朋友改一個(gè)原生的微信小程序，所以就選擇了這款開源組件。

小程序開發(fā)用什么框架

小程序的開發(fā)都是通過各自的開發(fā)工具進(jìn)行開發(fā)，有它獨(dú)有的語(yǔ)法規(guī)則。沒有什么框架，不過可以使用ui框架來改變頁(yè)面樣式 例如：Mintui Wux WeApp iView WeApp

小程序開發(fā)使用什么ui框架的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于小程序ui設(shè)計(jì)和appUI設(shè)計(jì)的區(qū)別、小程序開發(fā)使用什么ui框架的信息別忘了在本站進(jìn)行查找喔。