vuejs モバイル端末で利用可能な Ui フレームワーク: 1. iView; 2. Vux; 3. Element; 4. Mint UI; 5. Bootstrap-VUE; 6. Ant Design Vue; 7. AT-UI; 8 、Vant; 9、cube-ui; 10、Muse-UI など。

このチュートリアルの動作環(huán)境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vue は、軽量で高性能なコンポーネント可能な MVVM ライブラリであり、すぐに使い始めることができるシンプルで明確な API を備えています。 Vue は発売以來、多くの Web 開発者に認(rèn)知されてきました。同社のWebフロントエンドプロジェクト開発では、VueベースのUIコンポーネントフレームワークを利用して複數(shù)のプロジェクトを開発し、正式利用している。開発チームが Vue.js フレームワークと UI コンポーネント ライブラリを使用した後、開発効率が大幅に向上し、記述するコードが減り、多くのインターフェイス効果コンポーネントがカプセル化されました。

Vue UI コンポーネント ライブラリを選択する過程で、星の數(shù)、ドキュメントの豊富さ、更新頻度、GitHub のメンテナンスなどの要素に基づいて、いくつかの優(yōu)れた Vue UI コンポーネント ライブラリを収集し、分類しました。 。

1. iView UI コンポーネント ライブラリ

iView は、Vue.js に基づくオープン ソース UI コンポーネント ライブラリのセットであり、主にミッドエンド製品とバックエンド製品を提供します。 PCインターフェース用。 iView のコンポーネントは比較的完成度が高く、更新も早く、ドキュメントも非常に詳細(xì)です。會社チームによって保守されている、比較的信頼性の高い Vue UI コンポーネント フレームワーク

。 iView エコシステムも非常にうまく機(jī)能しており、バックエンド作業(yè)に非常に便利なオープンソースの iView Admin もあります。公式ウェブサイトによると、iView は TalkingData、Alibaba、Baidu、Tencent、Toutiao、JD.com、Didi Chuxing、Meituan、Sina、Lenovo などの大企業(yè)の製品で使用されています。

iView 公式 Web サイト: https://www.iviewui.com/.

2. Vux UI コンポーネント ライブラリ

Vux は WeUI に基づいていますおよび Vue2 .x によって開発されたモバイル UI コンポーネント ライブラリで、主に WeChat ページを提供します。 Vux の位置づけは非常に明確で、1 つは Vue モバイル UI コンポーネント ライブラリ、もう 1 つは WeUI の基本スタイル ライブラリです。 Vux コンポーネントはすべての WeUI コンテンツをカバーし、一般的に使用されるいくつかのコンポーネントも拡張します。例: スティッキー、タイムライン、V チャート、XCircle。

Vux は個人によって保守されています。しかし、GitHub 上のスターは依然として非常に高く、13,000 に達(dá)しています。 GitHub 上で問題がすぐにクローズされたのを確認(rèn)しました。 Vux ドキュメントの基本的なコンポーネントの使用法と効果について説明します。

vux の公式 Web サイトには、多くの Vux の使用例も掲載されています。 WeChatページの開発においては、基本的にバグは少なく、比較的スムーズに開発が進(jìn)められています。

Vux 公式 Web サイト: https://vux.li/.

3. Element UI コンポーネント ライブラリ

Element、開発者向けセット、デザイナーやプロダクト マネージャーが作成した Vue 2.0 ベースのデスクトップ コンポーネント ライブラリ。

Element は Ele.me のフロントエンドオープンソースで保守されている Vue UI コンポーネントライブラリですが、現(xiàn)在でも更新頻度は非常に高く、基本的に毎週～半月ごとに新しいバージョンがリリースされます。コンポーネントは完全であり、基本的にバックエンドに必要なすべてのコンポーネントをカバーしています。ドキュメントで詳細(xì)に説明されており、多くの例があります。私は実際に使ったことはありませんが、インターネット上には Element のチュートリアルや記事がたくさんあります。

Element は、比較的高品質(zhì)の Vue UI コンポーネント ライブラリである必要があります。

Element 公式 Web サイト: http://element.eleme.io/#/zh-CN.

4. Mint UI コンポーネント ライブラリ

Mint UI は、同じく Ele.me フロントエンド プロジェクトの Vue.js モバイル コンポーネント ライブラリに基づいています。 Mint UI はまさにオンデマンドでコンポーネントをロードすることを目的としています。宣言されたコンポーネントとそのスタイル ファイルのみをロードできます。 Mint UIはCSS3を使用してさまざまなアニメーションを処理し、ブラウザの不要な再描畫やリフローを回避し、スムーズでスムーズなエクスペリエンスを?qū)g現(xiàn)します。

インターネット上のビデオ チュートリアルの多くは Mint UI に基づいており、モバイル Web プロジェクトの開発に非常に便利で、ドキュメントも非常に簡潔かつ明確です。多くのページ Mint UI コンポーネントはカプセル化されており、基本的にサンプルに従って記述し、簡単な調(diào)整で実裝できます。

ただし、GitHub に最後にコードが投稿されたのは 2018 年 1 月 16 日で、これまでに半年が経過しています。プロジェクトが比較的安定していて更新されていないのか、それともプロジェクトが放棄される可能性があるのか??はわかりません。今後もMint UIの動向に注目していきたい。

Mint UI 公式 Web サイト: http://mint-ui.github.io/.

5. Bootstrap-Vue UI コンポーネント ライブラリ

Bootstrap -VUE は、Bootstrap V4 コンポーネントと vue2 に基づくグリッド システムの実裝を提供し、広範(fàn)囲かつ自動化された WAI ARA アクセシビリティ マークアップを完成させます。 uiv は、Vue2 に基づいた Bootstrap 3 実裝です。 Bootstrap 4 は最新バージョンで、Bootstrap 3 と比較して、より具體的なクラスがあり、一部の関連部分が関連コンポーネントに変わります。同時に、Bootstrap.min.css のサイズは 40% 以上削減されました。

Bootstrap4 は IE8 と iOS 6 のサポートを放棄し、IE9 以降と iOS 7 以降のブラウザのみをサポートするようになりました。レスポンシブ Web サイトが普及し始めた當(dāng)時、Bootstrap はモバイルファースト Web サイトを構(gòu)築するためのフレームワークとして世界で最も人気があり、世界中で人気があったと言えます。

現(xiàn)在でも、多くの企業(yè) Web サイトは Bootstrap を使用してレスポンシブ対応になっています。 Bootstrap-Vue を使用すると、Vue でブートストラップ効果を?qū)g現(xiàn)できます。

Bootstrap-Vue 公式 Web サイト: https://bootstrap-vue.js.org/
uiv 公式 Web サイト: https://uiv.wxsm.space/.

6. Ant Design Vue UI コンポーネント ライブラリ

Ant Design Vue は、Ant Design 3.X の Vue 実裝であり、エンタープライズ レベルのバックエンド製品を開発および提供します。いくつかの Ant Design Vue コンポーネントが GitHub にあります。しかし、比較すると、Ant Design Vue の方が優(yōu)れています。

Ant Design Vue は、Ant Design of React デザイン ツール システムを共有し、すべての Ant Design of React コンポーネントを?qū)g裝し、最新のブラウザーと IE9 以降 (ポリフィルが必要) をサポートします。これにより、Ant Design に精通したユーザーは、Vue の使用を簡単に開始できます。

Ant Design Vue 公式 Web サイト: https://vuecomponent.github.

7. AT-UI UI コンポーネント ライブラリ

AT - UI は、Vue.js 2.0 に基づくフロントエンド UI コンポーネント ライブラリです。主に PC ウェブサイトのミドルエンドおよびバックエンド製品を迅速に開発するために使用されます。最新のブラウザーと IE9 以降をサポートしています。 AT-UI はより合理化されており、よく使用されるコンポーネントをバックグラウンドで実裝します。

AT_UI 公式 Web サイト: https://at-ui.github.io/.

8. Vant UI コンポーネント ライブラリ

Vant は、 light 大規(guī)模で信頼性の高いモバイル Vue コンポーネント ライブラリ。 Vant は Youzan チームによってオープンソース化されており、主に Youzan チームによって保守されています。 Vant Weapp は、Youzan のモバイル コンポーネント ライブラリである Vant のミニ プログラム バージョンです。どちらも同じビジュアル仕様に基づいており、開発者がミニ プログラム アプリケーションを迅速に構(gòu)築できるように一貫した API インターフェイスを提供します。これまでのところ、Vant は Youzan のオンライン ビジネスでテストされた 50 個のコンポーネントをオープンソース化しました。

例: AddressEdit の住所編集、AddressList の住所リスト、地域の州と都市の選択、カード カード、連絡(luò)先の連絡(luò)先、クーポン クーポン、GoodsAction 製品ページのアクション ポイント、SubmitBar の送信注文列、Sku 製品仕様ポップアップ レイヤー。ショッピング モールを構(gòu)築していて、インターフェイスやビジネス ロジックの実裝にあまり関心がない場合は、Vant コンポーネント ライブラリを使用して迅速に開発できます。

Vant 公式 Web サイト: https://youzan.github.io/.

9. cube-ui UI コンポーネント ライブラリ

cube-uiはい Vue.js をベースにした精巧なモバイル コンポーネント ライブラリです。 Didi の內(nèi)部コンポーネント ライブラリから合理化および改良され、1 年以上にわたるビジネス テストを経て、各コンポーネントにはその後の統(tǒng)合を保証する十分な単體テストが行??われています。究極のインタラクティブ體験を追求します。統(tǒng)一された設(shè)計インタラクション標(biāo)準(zhǔn)に従って、設(shè)計効果を高度に復(fù)元します。インターフェイスが標(biāo)準(zhǔn)化され、使用方法が統(tǒng)一および標(biāo)準(zhǔn)化されるため、開発がよりシンプルかつ効率的になります。オンデマンドの導(dǎo)入とポストコンパイルをサポートし、軽量かつ柔軟で、強(qiáng)力な拡張性を備え、既存のコンポーネントに基づいた二次開発を簡単に実裝できます。

cube-ui 公式ウェブサイト: https://didi.github.io/.

10. Muse-UI UI コンポーネント ライブラリ

Muse - UI は、Vue 2.0 のエレガントなマテリアル デザイン UI コンポーネント ライブラリに基づいています。 Muse UI には、さまざまなビジネス環(huán)境に適応する 40 を超える UI コンポーネントがあります。 Muse UI では、テーマ スタイルの置換を完了するために必要なコードはわずかです。 Muse UI は、複雑なシングルページ アプリケーションの開発に使用できます

Muse-UI 公式 Web サイト: https://muse-ui.org/#/zh-CN.

11 , N3- コンポーネント UI コンポーネント ライブラリ

N3 コンポーネント ライブラリは Vue.js に基づいて構(gòu)築されており、フロントエンド エンジニアやフルスタック エンジニアがページやアプリケーションを迅速に構(gòu)築できるようになります。 N3 コンポーネントには 60 を超えるコンポーネント、コンポーネント リスト、カスタム スタイルがあり、マルチ モデリング パラダイム (UMD) をサポートし、ES6 を使用して開発されています。

N3 公式 Web サイト: https://n3-components.github.

12. Mand Mobile

Mand Mobile は金融向けの Vue モバイルです。シナリオ ターミナル UI コンポーネント ライブラリは豊富で柔軟かつ実用的で、高品質(zhì)の金融商品を迅速に構(gòu)築し、複雑な金融シナリオをシンプルにすることができます。 Mand Mobile には、財務(wù)シナリオをカバーする 30 個の基本コンポーネントが豊富に含まれています。非常に使いやすいコンポーネントには、詳細(xì)なドキュメントと事例デモが含まれています。最先端のテクノロジーを活用し、コンポーネント化と軽量化を?qū)g現(xiàn)し、安定性を考慮しています。品質(zhì)と品質(zhì)を追求し、経済的な成功を目指して努力する現(xiàn)場を完全網(wǎng)羅。

Mand Mobile 公式 Web サイト: https://didi.github.io/.

13. we-vue UI コンポーネント ライブラリ

we- vue Vue.js をベースにしたモバイル関連コンポーネント ライブラリのセットで、weui.css スタイル ライブラリと組み合わせることで、一連のコンポーネントをカプセル化し、WeChat パブリック アカウントなどのモバイル端末開発に非常に適しています。 we-vue には 98% 以上の単體テスト カバレッジを備えた 35 のコンポーネントが含まれており、babel-plugin-import、完全なオンライン ドキュメント、および詳細(xì)なオンライン サンプルをサポートしています。

we-vue 公式ウェブサイト: https://wevue.org/.

14. veui UI コンポーネント ライブラリ

veui は開発されたソフトウェアですBaidu EFE チームによって開発された Vue エンタープライズ レベルの UI コンポーネント ライブラリ。現(xiàn)在ドキュメントはなく、デモのみです。 GitHub によると、これは進(jìn)行中の作業(yè)です。それでは気長に待ちましょう。

veui 公式 Web サイト: https://ecomfe.github.io/.

15. Semantic-UI-Vue UI コンポーネント ライブラリ

Semantic - UI-Vue は、Vue.js に基づく Semantic-UI フレームワークの実裝です。 Semantic は、開発者が人間に優(yōu)しい HTML 言語を使用してエレガントな応答性の高いレイアウトを構(gòu)築するのに役立つ開発フレームワークです。 Semantic-UI-Vue は、Semantic-UI に似た API とカスタマイズ可能なテーマのセットを提供します。

Semantic-UI-Vue 公式ウェブサイト: https://semantic-ui-vue.github.

16、vue-beauty

vue - Beauty は、vue.js および ant-design スタイルに基づく PC 側(cè) UI コンポーネント ライブラリであり、開発者が製品エクスペリエンスと開発効率を向上させ、メンテナンス コストを削減できるように設(shè)計されています。 vue-beauty には、vue コンポーネント開発、データ駆動型ビュー、複雑さのカプセル化、シンプルで使いやすい API の提供、および ant 設(shè)計スタイルの最適化に基づいた一般的なシナリオをカバーする豊富なコンポーネントが含まれています。

vue-beauty 公式ウェブサイト: https://fe-driver.github.io/.

17. NutUI コンポーネント ライブラリ

NutUI は JD スタイルですモバイル Vue コンポーネント ライブラリは、モバイル Web インターフェイス用のエンタープライズ レベルのフロント、ミドル、バックエンド製品を開発および提供します。 NutUI コンポーネント ライブラリはクロスプラットフォームをサポートし、WeChat アプレット コンポーネントに自動的に変換されます (後でリリースされる予定ですので、しばらくお待ちください)。30 の JD モバイル ターミナル プロジェクトで使用されています。JD APP 7.0 のビジュアル仕様に基づいており、オンデマンドの読み込みをサポートしています。 、詳細(xì)なドキュメントとサンプル、カスタマイズされたテーマのサポート、多言語 (國際化) のサポート、TypeScript のサポート、サーバー側(cè)レンダリング (Vue SSR) のサポート、単體テストのサポート、Webpack ベースの構(gòu)築ツールが裝備されており、迅速に作成できます。このコンポーネント ライブラリが組み込まれた Vue プロジェクト。

NutUI 公式 Web サイト: https://nutui.jd.com/#/index.

フレームワークを選択するときは、実際の Web 開発の狀況と慣れ親しんだ內(nèi)容に基づいて選択する必要があります。チーム。優(yōu)れた UI コンポーネント ライブラリは、Web プロジェクトにとって非常に重要です。優(yōu)れた UI コンポーネント ライブラリは、半分の労力で 2 倍の結(jié)果を達(dá)成できます。

関連する推奨事項(xiàng): 「vue.js チュートリアル 」

以上がvuejs モバイル端末にはどのような UI フレームワークが使用されていますか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。