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 など。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
Vue は、軽量で高性能なコンポーネント可能な MVVM ライブラリであり、すぐに使い始めることができるシンプルで明確な API を備えています。 Vue は発売以来、多くの Web 開発者に認知されてきました。同社のWebフロントエンドプロジェクト開発では、VueベースのUIコンポーネントフレームワークを利用して複数のプロジェクトを開発し、正式利用している。開発チームが Vue.js フレームワークと UI コンポーネント ライブラリを使用した後、開発効率が大幅に向上し、記述するコードが減り、多くのインターフェイス効果コンポーネントがカプセル化されました。
Vue UI コンポーネント ライブラリを選択する過程で、星の数、ドキュメントの豊富さ、更新頻度、GitHub のメンテナンスなどの要素に基づいて、いくつかの優れた Vue UI コンポーネント ライブラリを収集し、分類しました。 。
iView は、Vue.js に基づくオープン ソース UI コンポーネント ライブラリのセットであり、主にミッドエンド製品とバックエンド製品を提供します。 PCインターフェース用。 iView のコンポーネントは比較的完成度が高く、更新も早く、ドキュメントも非常に詳細です。会社チームによって保守されている、比較的信頼性の高い Vue UI コンポーネント フレームワーク
。 iView エコシステムも非常にうまく機能しており、バックエンド作業に非常に便利なオープンソースの iView Admin もあります。公式ウェブサイトによると、iView は TalkingData、Alibaba、Baidu、Tencent、Toutiao、JD.com、Didi Chuxing、Meituan、Sina、Lenovo などの大企業の製品で使用されています。
iView 公式 Web サイト: https://www.iviewui.com/.
Vux は WeUI に基づいていますおよび Vue2 .x によって開発されたモバイル UI コンポーネント ライブラリで、主に WeChat ページを提供します。 Vux の位置づけは非常に明確で、1 つは Vue モバイル UI コンポーネント ライブラリ、もう 1 つは WeUI の基本スタイル ライブラリです。 Vux コンポーネントはすべての WeUI コンテンツをカバーし、一般的に使用されるいくつかのコンポーネントも拡張します。例: スティッキー、タイムライン、V チャート、XCircle。
Vux は個人によって保守されています。しかし、GitHub 上のスターは依然として非常に高く、13,000 に達しています。 GitHub 上で問題がすぐにクローズされたのを確認しました。 Vux ドキュメントの基本的なコンポーネントの使用法と効果について説明します。
vux の公式 Web サイトには、多くの Vux の使用例も掲載されています。 WeChatページの開発においては、基本的にバグは少なく、比較的スムーズに開発が進められています。
Vux 公式 Web サイト: https://vux.li/.
Element、開発者向けセット、デザイナーやプロダクト マネージャーが作成した Vue 2.0 ベースのデスクトップ コンポーネント ライブラリ。
Element は Ele.me のフロントエンドオープンソースで保守されている Vue UI コンポーネントライブラリですが、現在でも更新頻度は非常に高く、基本的に毎週～半月ごとに新しいバージョンがリリースされます。コンポーネントは完全であり、基本的にバックエンドに必要なすべてのコンポーネントをカバーしています。ドキュメントで詳細に説明されており、多くの例があります。私は実際に使ったことはありませんが、インターネット上には Element のチュートリアルや記事がたくさんあります。
Element は、比較的高品質の Vue UI コンポーネント ライブラリである必要があります。
Element 公式 Web サイト: http://element.eleme.io/#/zh-CN.
Mint UI は、同じく Ele.me フロントエンド プロジェクトの Vue.js モバイル コンポーネント ライブラリに基づいています。 Mint UI はまさにオンデマンドでコンポーネントをロードすることを目的としています。宣言されたコンポーネントとそのスタイル ファイルのみをロードできます。 Mint UIはCSS3を使用してさまざまなアニメーションを処理し、ブラウザの不要な再描画やリフローを回避し、スムーズでスムーズなエクスペリエンスを実現します。
インターネット上のビデオ チュートリアルの多くは Mint UI に基づいており、モバイル Web プロジェクトの開発に非常に便利で、ドキュメントも非常に簡潔かつ明確です。多くのページ Mint UI コンポーネントはカプセル化されており、基本的にサンプルに従って記述し、簡単な調整で実装できます。
ただし、GitHub に最後にコードが投稿されたのは 2018 年 1 月 16 日で、これまでに半年が経過しています。プロジェクトが比較的安定していて更新されていないのか、それともプロジェクトが放棄される可能性があるのかはわかりません。今後もMint UIの動向に注目していきたい。
Mint UI 公式 Web サイト: http://mint-ui.github.io/.
Bootstrap -VUE は、Bootstrap V4 コンポーネントと vue2 に基づくグリッド システムの実装を提供し、広範囲かつ自動化された WAI ARA アクセシビリティ マークアップを完成させます。 uiv は、Vue2 に基づいた Bootstrap 3 実装です。 Bootstrap 4 は最新バージョンで、Bootstrap 3 と比較して、より具体的なクラスがあり、一部の関連部分が関連コンポーネントに変わります。同時に、Bootstrap.min.css のサイズは 40% 以上削減されました。
Bootstrap4 は IE8 と iOS 6 のサポートを放棄し、IE9 以降と iOS 7 以降のブラウザのみをサポートするようになりました。レスポンシブ Web サイトが普及し始めた当時、Bootstrap はモバイルファースト Web サイトを構築するためのフレームワークとして世界で最も人気があり、世界中で人気があったと言えます。
現在でも、多くの企業 Web サイトは Bootstrap を使用してレスポンシブ対応になっています。 Bootstrap-Vue を使用すると、Vue でブートストラップ効果を実現できます。
Bootstrap-Vue 公式 Web サイト: https://bootstrap-vue.js.org/
uiv 公式 Web サイト: https://uiv.wxsm.space/.
Ant Design Vue は、Ant Design 3.X の Vue 実装であり、エンタープライズ レベルのバックエンド製品を開発および提供します。いくつかの Ant Design Vue コンポーネントが GitHub にあります。しかし、比較すると、Ant Design Vue の方が優れています。
Ant Design Vue は、Ant Design of React デザイン ツール システムを共有し、すべての Ant Design of React コンポーネントを実装し、最新のブラウザーと IE9 以降 (ポリフィルが必要) をサポートします。これにより、Ant Design に精通したユーザーは、Vue の使用を簡単に開始できます。
Ant Design Vue 公式 Web サイト: https://vuecomponent.github.
AT - UI は、Vue.js 2.0 に基づくフロントエンド UI コンポーネント ライブラリです。主に PC ウェブサイトのミドルエンドおよびバックエンド製品を迅速に開発するために使用されます。最新のブラウザーと IE9 以降をサポートしています。 AT-UI はより合理化されており、よく使用されるコンポーネントをバックグラウンドで実装します。
AT_UI 公式 Web サイト: https://at-ui.github.io/.
Vant は、 light 大規模で信頼性の高いモバイル Vue コンポーネント ライブラリ。 Vant は Youzan チームによってオープンソース化されており、主に Youzan チームによって保守されています。 Vant Weapp は、Youzan のモバイル コンポーネント ライブラリである Vant のミニ プログラム バージョンです。どちらも同じビジュアル仕様に基づいており、開発者がミニ プログラム アプリケーションを迅速に構築できるように一貫した API インターフェイスを提供します。これまでのところ、Vant は Youzan のオンライン ビジネスでテストされた 50 個のコンポーネントをオープンソース化しました。
例: AddressEdit の住所編集、AddressList の住所リスト、地域の州と都市の選択、カード カード、連絡先の連絡先、クーポン クーポン、GoodsAction 製品ページのアクション ポイント、SubmitBar の送信注文列、Sku 製品仕様ポップアップ レイヤー。ショッピング モールを構築していて、インターフェイスやビジネス ロジックの実装にあまり関心がない場合は、Vant コンポーネント ライブラリを使用して迅速に開発できます。
Vant 公式 Web サイト: https://youzan.github.io/.
cube-uiはい Vue.js をベースにした精巧なモバイル コンポーネント ライブラリです。 Didi の内部コンポーネント ライブラリから合理化および改良され、1 年以上にわたるビジネス テストを経て、各コンポーネントにはその後の統合を保証する十分な単体テストが行われています。究極のインタラクティブ体験を追求します。統一された設計インタラクション標準に従って、設計効果を高度に復元します。インターフェイスが標準化され、使用方法が統一および標準化されるため、開発がよりシンプルかつ効率的になります。オンデマンドの導入とポストコンパイルをサポートし、軽量かつ柔軟で、強力な拡張性を備え、既存のコンポーネントに基づいた二次開発を簡単に実装できます。
cube-ui 公式ウェブサイト: https://didi.github.io/.
Muse - UI は、Vue 2.0 のエレガントなマテリアル デザイン UI コンポーネント ライブラリに基づいています。 Muse UI には、さまざまなビジネス環境に適応する 40 を超える UI コンポーネントがあります。 Muse UI では、テーマ スタイルの置換を完了するために必要なコードはわずかです。 Muse UI は、複雑なシングルページ アプリケーションの開発に使用できます
Muse-UI 公式 Web サイト: https://muse-ui.org/#/zh-CN.
N3 コンポーネント ライブラリは Vue.js に基づいて構築されており、フロントエンド エンジニアやフルスタック エンジニアがページやアプリケーションを迅速に構築できるようになります。 N3 コンポーネントには 60 を超えるコンポーネント、コンポーネント リスト、カスタム スタイルがあり、マルチ モデリング パラダイム (UMD) をサポートし、ES6 を使用して開発されています。
N3 公式 Web サイト: https://n3-components.github.
Mand Mobile は金融向けの Vue モバイルです。シナリオ ターミナル UI コンポーネント ライブラリは豊富で柔軟かつ実用的で、高品質の金融商品を迅速に構築し、複雑な金融シナリオをシンプルにすることができます。 Mand Mobile には、財務シナリオをカバーする 30 個の基本コンポーネントが豊富に含まれています。非常に使いやすいコンポーネントには、詳細なドキュメントと事例デモが含まれています。最先端のテクノロジーを活用し、コンポーネント化と軽量化を実現し、安定性を考慮しています。品質と品質を追求し、経済的な成功を目指して努力する現場を完全網羅。
Mand Mobile 公式 Web サイト: https://didi.github.io/.
we- vue Vue.js をベースにしたモバイル関連コンポーネント ライブラリのセットで、weui.css スタイル ライブラリと組み合わせることで、一連のコンポーネントをカプセル化し、WeChat パブリック アカウントなどのモバイル端末開発に非常に適しています。 we-vue には 98% 以上の単体テスト カバレッジを備えた 35 のコンポーネントが含まれており、babel-plugin-import、完全なオンライン ドキュメント、および詳細なオンライン サンプルをサポートしています。
we-vue 公式ウェブサイト: https://wevue.org/.
veui は開発されたソフトウェアですBaidu EFE チームによって開発された Vue エンタープライズ レベルの UI コンポーネント ライブラリ。現在ドキュメントはなく、デモのみです。 GitHub によると、これは進行中の作業です。それでは気長に待ちましょう。
veui 公式 Web サイト: https://ecomfe.github.io/.
Semantic - UI-Vue は、Vue.js に基づく Semantic-UI フレームワークの実装です。 Semantic は、開発者が人間に優しい HTML 言語を使用してエレガントな応答性の高いレイアウトを構築するのに役立つ開発フレームワークです。 Semantic-UI-Vue は、Semantic-UI に似た API とカスタマイズ可能なテーマのセットを提供します。
Semantic-UI-Vue 公式ウェブサイト: https://semantic-ui-vue.github.
vue - Beauty は、vue.js および ant-design スタイルに基づく PC 側 UI コンポーネント ライブラリであり、開発者が製品エクスペリエンスと開発効率を向上させ、メンテナンス コストを削減できるように設計されています。 vue-beauty には、vue コンポーネント開発、データ駆動型ビュー、複雑さのカプセル化、シンプルで使いやすい API の提供、および ant 設計スタイルの最適化に基づいた一般的なシナリオをカバーする豊富なコンポーネントが含まれています。
vue-beauty 公式ウェブサイト: https://fe-driver.github.io/.
NutUI は JD スタイルですモバイル Vue コンポーネント ライブラリは、モバイル Web インターフェイス用のエンタープライズ レベルのフロント、ミドル、バックエンド製品を開発および提供します。 NutUI コンポーネント ライブラリはクロスプラットフォームをサポートし、WeChat アプレット コンポーネントに自動的に変換されます (後でリリースされる予定ですので、しばらくお待ちください)。30 の JD モバイル ターミナル プロジェクトで使用されています。JD APP 7.0 のビジュアル仕様に基づいており、オンデマンドの読み込みをサポートしています。 、詳細なドキュメントとサンプル、カスタマイズされたテーマのサポート、多言語 (国際化) のサポート、TypeScript のサポート、サーバー側レンダリング (Vue SSR) のサポート、単体テストのサポート、Webpack ベースの構築ツールが装備されており、迅速に作成できます。このコンポーネント ライブラリが組み込まれた Vue プロジェクト。
NutUI 公式 Web サイト: https://nutui.jd.com/#/index.
フレームワークを選択するときは、実際の Web 開発の状況と慣れ親しんだ内容に基づいて選択する必要があります。チーム。優れた UI コンポーネント ライブラリは、Web プロジェクトにとって非常に重要です。優れた UI コンポーネント ライブラリは、半分の労力で 2 倍の結果を達成できます。
関連する推奨事項: 「vue.js チュートリアル 」
以上がvuejs モバイル端末にはどのような UI フレームワークが使用されていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
