vue にはどのようなフレームワークが使用できますか?

vue で使用できるフレームワーク: 1. Ant Design Vue は非常に成熟したフレームワークで、ユーザー インターフェイスの作成に使用するのは非常に簡単です; 2. BalmUI は優れたインタラクティブなエクスペリエンスを備えた UI コンポーネント ライブラリです。 3. Wave UIは、応答性が高く、アクセスしやすくタッチフレンドリーなUIコンポーネントフレームワークです; 4. Vuesticは、独自の機能と広範な構成機能を備えた50以上のコンポーネントを提供します; 5. Elementは、デスクトップコンポーネントライブラリです; 6. Quasarはパフォーマンスです-中心のフレームワーク。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

Vue は、軽量で高性能なコンポーネント可能な MVVM ライブラリであり、すぐに使い始めることができるシンプルで明確な API を備えています。 Vue は発売以来、多くの Web 開発者に認知されてきました。

同社の Web フロントエンド プロジェクト開発では、Vue ベースの UI コンポーネント フレームワークを使用して複数のプロジェクトが開発され、正式に使用されています。

開発チームが Vue.js フレームワークと UI コンポーネント ライブラリを使用した後、開発効率が大幅に向上し、記述するコードが減り、多くのインターフェイス効果コンポーネントがカプセル化されました。

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

vue が使用できるフレームワーク

1. iView

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/

2. Vux

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/

3. Element

Element、開発者、デザイナー、製品 A 向けのセット管理者が用意したVue 2.0ベースのデスクトップコンポーネントライブラリ。 Element は Ele.me のフロントエンドオープンソースで保守されている Vue UI コンポーネントライブラリですが、現在でも更新頻度は非常に高く、基本的に毎週～半月ごとに新しいバージョンがリリースされます。コンポーネントは完全であり、基本的にバックエンドに必要なすべてのコンポーネントをカバーしています。ドキュメントで詳細に説明されており、多くの例があります。私は実際に使ったことはありませんが、インターネット上には Element のチュートリアルや記事がたくさんあります。要素は、比較的高品質の Vue UI コンポーネント ライブラリである必要があります。

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

Element は Vue2 で有名になり、多くの目立たない機能を Vue3 にもたらしました。 、非常に複雑なアプリケーションを作成するために必要なもののほとんどはすでに作成されており、すぐに使用できます。 Element は、成熟した日付と時刻のピッカー、ツリー、タイムライン、およびカレンダーのコンポーネントを提供します。

Element は、単純なアニメーションから i18n とのペアで使用できるフレームワーク全体の国際化システムに至るまで、開発者が UI インターフェイスを構築するときに必要となる可能性のある最も小さなウィジェットも提供します。カスタム翻訳を作成したり、非組み込み言語を追加したりできます。

Element は GitHub 上で 11.1k のスターを獲得しており、優れた問題管理、タイムリーな更新、プラグイン可能なコンポーネント、SCSS 変数による高度なカスタマイズを備え、Github 上で最も人気のある Vue3 UI フレームワークの 1 つになりつつあり、パフォーマンスは開発者の期待に応えます。

4. Mint

Mint UI は、同じく Ele.me フロントエンド プロジェクトの Vue.js に基づくモバイル コンポーネント ライブラリです。 Mint UI はまさにオンデマンドでコンポーネントをロードすることを目的としています。宣言されたコンポーネントとそのスタイル ファイルのみをロードできます。 Mint UIはCSS3を使用してさまざまなアニメーションを処理し、ブラウザの不要な再描画やリフローを回避し、スムーズでスムーズなエクスペリエンスを実現します。インターネット上の多くのビデオ チュートリアルは Mint UI に基づいており、モバイル Web プロジェクトの開発に非常に便利で、ドキュメントも非常に簡潔かつ明確です。多くのページ Mint UI コンポーネントはカプセル化されており、基本的にサンプルに従って記述し、簡単な調整で実装できます。ただし、GitHub に最後にコードが送信されたのは 2018 年 1 月 16 日でした。プロジェクトが比較的安定していて更新されていないのか、それともプロジェクトが放棄される可能性があるのか​​はわかりません。

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

5、Bootstrap-Vue

Bootstrap-VUE は、vue2 に基づいた Bootstrap V4 コンポーネントとグリッド システムの実装を提供し、広範で自動化された WAI ARA アクセシビリティ マーキングを完了します。 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/

6. Ant Design Vue

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.io/ant-design-vue/docs/vue/introduce-cn/

Ant Design Vue は非常に成熟したフレームワークです、Ant Design Vue を使用してユーザー インターフェイスを作成するのは非常に簡単で、コンポーネントはさまざまなアイコン スタイル、フォント、黒のテーマに適合させることができます。 Ant Design Vue は 60 を超えるコンポーネントの改善を続けており、基本的にプロジェクトのニーズのほとんどをカバーし、コンポーネントを改善してアクセスしやすくしています。

7. AT-UI

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

AT_UI 公式ウェブサイト: https://at-ui.github.io/at-ui/#/zh

8、Vant

Vant 軽量で信頼性の高いモバイル Vue コンポーネント ライブラリです。 Vant は Youzan チームによってオープンソース化されており、主に Youzan チームによって保守されています。 Vant Weapp は、Youzan のモバイル コンポーネント ライブラリである Vant のミニ プログラム バージョンです。どちらも同じビジュアル仕様に基づいており、開発者がミニ プログラム アプリケーションを迅速に構築できるように一貫した API インターフェイスを提供します。これまでのところ、Vant は Youzan のオンライン ビジネスでテストされた 50 個のコンポーネントをオープンソース化しました。例: AddressEdit の住所編集、AddressList の住所リスト、地域の州と都市の選択、カード カード、連絡先担当者、クーポン クーポン、GoodsAction 製品ページのアクション ポイント、SubmitBar の提出注文列、Sku 製品仕様ポップアップ レイヤー。ショッピング モールを構築していて、インターフェイスやビジネス ロジックの実装にあまり関心がない場合は、Vant コンポーネント ライブラリを使用して迅速に開発できます。

Vant 公式ウェブサイト: https://youzan.github.io/vant/#/zh-CN/intro

9、cube-ui

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

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

10、Muse-UI

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

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

11、 N3 コンポーネント

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

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

12、Mand Mobile

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

Mand Mobile公式ウェブサイト: https://didi.github.io/mand-mobile/#/zh-CN/home

13、we-vue

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

we-vue 公式 Web サイト: https://wevue.org/

14、veui

veui は Baidu EFE チームによって開発された Vue ですエンタープライズレベルの UI コンポーネント ライブラリ。現在ドキュメントはなく、デモのみです。

GitHub は、これは進行中の作業であると述べています。それでは気長に待ちましょう。

veui 公式ウェブサイト: https://ecomfe.github.io/veui/components/#/

15、Semantic-UI-Vue

Semantic-UI-Vue は、Vue.js に基づく Semantic-UI フレームワークの実装です。

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

Semantic-UI-Vue 公式 Web サイト: https://semantic-ui-vue.github.io/#/

フレームワークを選択するときは、実際の Web 開発に基づいて選択する必要があります状況とチームのニーズ 精通度に基づいて選択してください。優れた UI コンポーネント ライブラリは Web プロジェクトにとって非常に重要です

16.Vue.js マテリアル コンポーネント フレームワーク — Vuetify.js

https://vuetifyjs. com/ zh-Hans

Vuetify は完全にマテリアル デザイン仕様に従って開発されています。すべてのコンポーネントは手作りされており、最高の UI ツールを次の優れたアプリにもたらします。開発は Google 仕様の中核コンポーネントにとどまりません。コミュニティ メンバーやスポンサーのサポートを通じて、より多くのコンポーネントが設計され、誰もが楽しめるようになります。

これは主に海外で人気のある vue ui コンポーネントです。さまざまな機能があり、中国語に翻訳されていますが、一部は英語であり、翻訳はあまり良くありません。

PS: 国内 UI ほとんどのコンポーネントは一部しか備えておらず、一般的に使用されるヘッダー ナビゲーション、ボトム ナビゲーション、リストビュー、グリッド テーブルの多くは利用できません。

17. BalmUI

BalmUI は、Balm.js (Vue CLI に似たフロントエンド ワークフロー ツール) チームによって作成されたフロントエンド UI コンポーネント ライブラリです。最新の Built with Vue 3 をベースにしており、すぐに使用でき、高度にカスタマイズ可能で、デザイン スタイルは Google のマテリアル デザイン設計仕様に完全に準拠しており、優れたインタラクティブなエクスペリエンスを備えた UI コンポーネント ライブラリです。

BalmUI は、Vue3 をサポートするバージョン 9.0 をリリースしました。 Balm は Google のマテリアル デザインに基づいているため、見慣れたものに見えます。 Balm には、Vue プラグインとディレクティブに加え、単純なものから複雑なものまで、高度にカスタマイズ可能なコンポーネントが付属しています。

BalmUI 公式 Web サイト: https://next-material.balmjs.com/#/

BalmUI は非常に急速に開発されています。マテリアル デザイン スタイルを使用したい場合は、複雑な組み込みを使用してください命令 (デバウンスや UI リップルなど) はカスタム コンポーネントを作成するときに便利で、Vue3 プロジェクトに非常に適しています。

18、Wave UI

Wave UI は、応答性が高く、カスタマイズ可能で、アクセスしやすく、タッチ フレンドリーな UI コンポーネント フレームワークであり、40 を超える UI コンポーネントが付属しており、以下と互換性があります。 Vue 3 と Vue 2。

WaveUI は、Vue3 のリリース後、適切な位置にあります。WaveUI の開発は、Vue3 がまだアルファ段階にあったときに開始されました。目標は、API が安定したらすぐにサポートし、最初の API の 1 つにすることです。 Vue3のバッチ UIフレームワークの一つ。

公式 Web サイト: https://antoniandre.github.io/wave-ui/

WaveUI には 40 を超える美しく応答性の高いコンポーネントがあり、その範囲は多岐にわたります。スピナーからカレンダー、そしてその間のものまで。 WaveUI は、ユーティリティ、カスタマイズ性、洗練された統合フォーム検証機能も提供します。

WaveUI が提供するコンポーネントは非常に美しく、アニメーション効果も非常に優れており、そのスタイルはフレームワーク全体で一貫しています。エンタープライズ グレードの応答性の高い Vue3 アプリケーションに最適です。

19, Vuestic

Vuestic は、Vue 用の最も美しいオープン ソース管理パネルの 1 つで、保守可能な Vue コードの作成と、柔軟なコンポーネントとインターフェイスの作成に優れています。

公式 Web サイト: https://vuestic.dev/

チームは最近、Vuestic の Vue3 バージョンをリリースしました。これには、人気のある Vuestic Admin UI とさらに多くのコンポーネント。 Vuestic は、キーボード ナビゲーションのすぐに使えるサポートを強調しています。これは、提供されるユーザー エクスペリエンスによりフロントエンド コミュニティの間で人気のある機能です。

Vuestic は、独自の機能と広範な構成機能を備えた 50 を超えるコンポーネントを提供し、ほぼすべての画面解像度で動作するように設計されています。 Vuestic は、フレームワーク全体でシームレスな翻訳サポートとキーボード アクセシビリティを提供します。

Vuestic は、その美しいコンポーネント カタログにより、最も美しい Vue3 UI フレームワークの 1 つとしての地位を確立しています。彼らは現在、日付ピッカーやデータ テーブルなど、現在の製品と同じくらい創造的な、より複雑なコンポーネントの作成に取り組んでいます。

20、Ionic

公式 Web サイト: https://ionicframework.com/docs/vue/overview

Ionic は、Vue3 サポートを提供する最初の UI フレームワークの 1 つです。Ionic はモバイル UI に傾いているため、チームは優れた UI フレームワークに対応し、維持する方法を知っています。

Ionic Vue は、素晴らしいコミュニティ、大量の StackOverflow の質問、エンタープライズ サポート、コア メンバーによる大規模な Slack チャネルを備えた非常に成熟したフレームワークです。サポートを受けるのが簡単です。助けが必要なとき。

Ionic Vue フレームワークには Github 上に 45,000 個のスターがあり、エアバスやエレクトロニック アーツを含む多くの大企業で使用されており、Ionic チームは UI フレームワークのメンテナンスが得意であることで知られています。現在も将来も素晴らしい選択です。

21. Naive UI

公式 Web サイト: https://www.naiveui.com/zh-CN/os-theme

Naive UI Twitter に投稿され、Vue の作成者によってリツイートされたことで、初期のコンポーネント ライブラリに大量のトラフィックが流入しました。現在、Naive UI は 3 か月足らずで GitHub で 5.1k スターを獲得しました。

ほぼすべてのタイプの Vue3 アプリケーションにシームレスに統合できる、70 を超えるよくできたコンポーネントが提供されます。 Naive のコンポーネントは優れたパフォーマンスを備え、高度にカスタマイズ可能で、TypeScript をサポートしているため、優れた開発エクスペリエンスを提供します。

ドキュメント サイトはナビゲートしやすく、開発者がコンポーネントが独自のテーマでどのように表示されるかをプレビューするのに役立つ完全なカスタマイズ入力を備えています。これらのオプションを使用して、カラー パターンとフォントを使用して完全な独自のテーマを作成できます。このカスタム テーマはダウンロードしてアプリケーションに簡単に追加して、デフォルトをオーバーライドできます。

22、Quasar

公式 Web サイト: https://next.quasar.dev/

Quasar は、完全なパフォーマンス中心の A フレームワークです。 Vue ユーザー インターフェイス (SPA、PWA、SSR、モバイル、デスクトップ) の構築を支援するために、Quasar には、Vue、Node、Webpack に加えて、Cordova、Capacitor、Electron も含まれており、個別に学習することなくデスクトップとモバイルのエクスペリエンスを構築するのに役立ちます。 。

#Quasar フレームワークはマテリアル デザインに基づいているようですが、一度開始すると、すべてが独自のデザイン システムに合わせて非常にカスタマイズ可能です。

Vue3 のサポートも間もなく開始され、Quasar はほぼすべての v1 コンポーネント、プラグイン、ディレクティブをリリースしました。さらに、開発者が Quasar API をより深く理解できるように、コンポーザブル コンポーネントをリリースしました。

23、PrimeVUE

公式ウェブサイト: https://primefaces.org/primevue/showcase/#/setup

PrimeVUE も最も初期のものですsupport Vue3 の最高のフレームワークの 1 つであり、期待を裏切りません。 PrimeVUE は 80 を超えるコンポーネントを備えており、このリストで最も幅広いコンポーネントを備えたフレームワークの 1 つであることがわかります。

コンポーネントには、ゲージ、スライダー、ツリー、グラフ、分割ボタン、ノブ、チャートなどを備えたパスワード フォームが含まれます。 PrimeVUE は、フォーム検証ライブラリである Vuelidate とも統合します。事前に作成されたテーマが付属しており、開発者が独自のテーマをカスタマイズできるようにする成熟したビジュアル エディターを提供します。

[推奨関連ビデオ チュートリアル: vuejs エントリ チュートリアル、Web フロントエンド エントリ]

以上がvue にはどのようなフレームワークが使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。