Vue で注目に値する 21 のオープンソース プロジェクト (推奨)

React に対する Vue の利点の 1 つは、理解しやすく学習しやすいことであり、中国では Vue が大多数を占めています。 Vue を使用すると、あらゆる Web アプリケーションを作成できます。したがって、新しくて使いやすい Vue オープンソース プロジェクトを常に把握しておくことが重要です。これは、開発をより効率的に行うのに役立つ一方で、その本質を学ぶこともできます。モデル。

次に、いくつかの有用な新しいオープンソース プロジェクトを見てみましょう。

uiGradients

ウェブサイト: http://uigradients.com/

GitHub: https://github.com /ghosh/uiGradients

GitHub Stars: 4.6k

## カラフルな配列と優れた UX がハイライトこのプロジェクトでは、グラデーションは Web デザインにおいて依然として成長傾向にあります。必要な色を選択し、可能なすべてのグラデーションを取得し、対応する CSS コードを取得します。今すぐ収集してください。

CSSFX

CSS トランジション効果のコレクション

Web サイト: https://cssfx.dev

GitHub : https://github.com/jolaleye/cssfx

GitHub スター: 3.5k

CSSFX 中には多くの CSS フィルタリング効果があります。ニーズに応じて特定のアニメーションを選択できます。対応する効果をクリックすると、生成された CSS コードが表示されます。始めましょう。

Sing App Vue ダッシュボード

管理テンプレート

Web サイト: https:// flatlogic.com/templat...

GitHub: https://github.com/ flatlogic/sing-app-vue-dashboard

GitHub スター: 254

例:https:// flatlogic.com/templates/sing-app-vue-dashboard/demo

ドキュメント:https://demo . flatlogic.com/sing-app/documentation/

これは、最新の Vue と Bootstrap に基づいた無料のオープンソース管理テンプレートです。実際、これは次のようなものです。ほとんど国内の vue-admin-template です。使う必要はありませんが、ソースコードを勉強して勉強することで、多くの実践的なスキルを学ぶことができると思います。

Vue ストアフロント

ウェブサイト: https://www.vuestorefront.io

GitHub: https://github .com/DivanteLtd/vue-storefront

GitHub スター: 5.8k

これは PWA です、任意のバックエンド (またはほぼすべてのバックエンド) に接続できます。このプロジェクトの主な利点は、ヘッドレス アーキテクチャの使用です。これは、多くの可能性を提供してくれる包括的なソリューションです (着実に成長するコミュニティからの多大なサポート、Web SEO を向上させるサーバーサイド レンダリング、モバイル ファーストのアプローチ、オフライン モードなど)。

ファビエーター

アイコン生成ライブラリ

Webサイト: https://www.faviator.xyz

GitHub: https://www.faviator. xyz/playground

GitHub Stars: 94

アイコンを作成する必要がある場合は、Experience を追加します。任意の Google フォントと任意の色を使用できます。好みの設定を渡して、PNG、SVG、または JPG 形式を選択するだけです。

iView

Vue UI コンポーネント ライブラリ

ウェブサイト: https://iviewui.com/

GitHub: https://github.com/iview/iview

GitHub スター: 22.8k

継続的な反復更新により、この UI コンポーネントのセットは、あらゆるスキル レベルの開発者にとって優れた追加機能になります。 ##iView を使用するには、単一ファイル コンポーネントをしっかりと理解する必要があります。また、このプロジェクトには使いやすい API と広範なドキュメントが用意されています。

Postwomen

API Request Builder

ウェブサイト:

https://postwomen.io/

GitHub:

https://github.com/liyasthomas/postwomen

GitHub Stars:

10.5k

これは Postman に似ています。無料で、多くの貢献者がおり、マルチプラットフォームとマルチプラットフォームを備えています。 -デバイスのサポート。このツールは非常に高速で、大量のアップデートがあります。このツールの作成者は、近い将来さらに多くの機能が追加される予定だと主張しています。

Vue Virtual Scroller

Quick Scroll

URL:

https://akryom.github.io/vue-virtual-scroller/#/

GitHub:

https://github .com/Akryom/vue-virtual-scroller

GitHub Stars: 3.4k

##Vue Virtual Scroller には 4 つの主要コンポーネントがあります。 RecycleScrollerリスト内の表示アイテムをレンダリングできます。特定のデータ量がわからない場合は、DynamicScroller を使用するのが最善です。 DynamicScrollerItemすべてを DynamicScroller でラップします (サイズ変更を処理するため)。 IdState ローカル状態管理 (RecycleScroller 内) を簡素化します。

Mint UI

モバイル UI ライブラリ

Web サイト: http://mint-ui.github.io/#!/en

GitHub: https://github.com/ElemeFE/mint-ui

GitHub スター: 15.2k

既製の CSS および JS コンポーネントを使用して、モバイル アプリをより迅速に構築します。このツールを使用すると、オンデマンドでロードできるため、ファイル サイズが大きくなりすぎる危険を冒す必要がありません。アニメーションはパフォーマンスを向上させるために CSS3 によって処理されます。

V Calendar

カレンダーを構築するための依存関係のないプラグイン

ウェブサイト: https://vcalendar.io

GitHub: https://github.com/nathanreyes/v-calendar

GitHub スター: 1.6k

#さまざまな視覚的インジケーターを選択してカレンダーを装飾できます。

V Calendar

には 3 つの日付選択モードもあります:

単一選択

• 複数選択
• 日付範囲
Vue デザイン システム

UI ツールのセット

Web サイト:

https://vueds.com/

GitHub ：

https://github.com/viljamis/vue-design-system

GitHub スター:

1.7k

##これは、Web 開発チームにとってわかりやすい名前が付けられた、よく整理されたツールです。大きな利点の 1 つは、Git にコミットする前にコードを自動的に配置する、よりきれいなコード フォーマッタを使用できることです。

Proppy

UI コンポーネントの関数プロップの組み合わせ

Web サイト:

https://proppyjs.com

GitHub ：

https://github.com/fahad19/proppy

GitHub スター:

856

##ProppyJS は、小道具を組み合わせるための小さなライブラリであり、人気のあるレンダリング ライブラリを自由に使用できるようにするさまざまな統合パッケージが付属しています。

アイデアは、まずコンポーネントの動作を props として表現し、次に Proppy の同じ API を使用してコンポーネント (React、Vue.js、または Preact) に接続することです。

API を使用すると、コンポーネント ツリーのどこにいても便利なように、他のアプリケーション全体の依存関係 (Redux を使用するストアなど) にアクセスすることもできます。

ライトブルー Vue 管理者

vue 背景表示テンプレート

Web サイト:

https:// flatlogic.com/templates/light-blue-vue- lite

GitHub: https://github.com/ flatlogic/light-blue-vue-admin

GitHub スター:

79

例:

https://demo. flatlogic.com/light-blue-vue-admin/#/app/dashboard

ドキュメント: https://demo. flatlogic.com/light-blue/documentation/

テンプレートは

Vue CLI と # を使用して作成されます# #ブートストラップ 4ビルドされました。デモからわかるように、このテンプレートには、タイポグラフィ、地図、グラフ、チャット インターフェイスなどの非常に基本的なページ セットが含まれています。拡張テンプレートが必要な場合は、Light Blue Vue Full を参照してください。これには 60 を超えるコンポーネントがあり、jquery はなく、2 色のテーマが含まれています。

Vue API クエリREST API のリクエストの構築

GitHub:

https://github.com/robsontenorio/vue-api-query

GitHub Stars:

1.1k

このプロジェクトについて言うことはあまりありません。これは説明行に書かれていることを正確に実行し、REST API へのリクエストを構築するのに役立ちます。

Vue グリッド レイアウト

Vue のグリッド レイアウト

Web サイト:

https://jbaysolutions.github.io/vue-grid-layout/examples/ 01-basic.html

GitHub:

https://github.com/jbaysolutions/vue-grid-layout

GitHub スター:

3.1 k

グリッド関連の問題すべてに対するシンプルな解決策。静的、サイズ変更可能、ドラッグ可能なウィジェットがあります。または、応答とレイアウトを復元してシリアル化することもできます。さらにウィジェットを追加する必要がある場合、グリッド全体を再構築する必要はありません。

Vue コンテンツ ローダー

プレースホルダー ローダーの作成

Web サイト: http://danilowoz.com/create-vue-content-loader

GitHub: https://github.com/egoist/vue-content-loader

GitHub スター: 2k

#Web サイトやアプリを開発する際、コンテンツが多すぎて読み込み速度が遅いと、ユーザーがページを開いたときに空白ページが大量に発生します。 content-loader

は正しいです この問題を解決するコンポーネントであり、コンテンツをロードする前に dom テンプレートを生成して、ユーザー エクスペリエンスを向上させます。 Vue2.0 を使用した Echarts

データ視覚化

Web サイト:

https://simonzhangiter.github.io/DataVisualization/#/dashboard

GitHub:

https://github.com/SimonZhangITer/DataVisualization

GitHub スター:

1.3k

写真では、非常に美しいチャートが見られます。このプロジェクトにより、あらゆるデータが読みやすくなり、理解と解釈が容易になります。これにより、あらゆるデータセットの傾向やパターンを簡単に検出できるようになります。

Vue.js Modal

高度にカスタマイズ可能なモーダル ボックス

Web サイト:

http://vue-js-modal.yev.io /

GitHub:

https://github.com/euvl/vue-js-modal

GitHub スター:

2.9k

さまざまなタイプのモーダルはすべて、この Web サイトで表示できます。ボタンは 15 個あり、いずれかのボタンを押すとモーダルの例が表示されます。

Vuesax

フレームワーク コンポーネント

Web サイト:

https://lusaxweb.github.io/vuesax/

GitHub:

https://github.com/lusaxweb/vuesax

GitHub スター:

3.7k

このプロジェクトコミュニティ内で非常に人気があります。これにより、コンポーネントごとに異なるスタイルをデザインできるようになります。

Vuesax

の作成者は、Web デザインに関してはすべての Web 開発者に選択の自由があるべきだと強調しています。 Vue2 Animate

vue2.0

—animate.css

Web サイトを使用してプロジェクトをビルドし、コンポーネントを作成します:

https://the-allstars.com/vue2-animate/

GitHub:

https://github.com/asika32764/vue2-animate

GitHub Stars:

1.1k

このライブラリはクロスブラウザーであり、5 種類のアニメーションから選択できます:

rotate

、スライド、フェード、バウンス、ズーム。ウェブサイトにデモがあります。アニメーションのデフォルトの継続時間は 1 秒ですが、このパラメータはカスタマイズできます。

Vuetensils

Vue.js ツールセット

Web サイト:

https://vuetensils.stegosource.com/

GitHub:

https://github.com/stegosource/vuetensils

GitHub スター:

111

この UI ライブラリには標準機能がありますが、優れているのは、追加のスタイルがないことです。デザインを可能な限り個人的なものにして、あらゆるニーズに適用できます。必要なスタイルを記述してプロジェクトに追加し、必要な数のコンポーネントを含めるだけです。

---

元のアドレス:

https:// flatlogic.com/blog/new-and-noteworthy-vue-js-open-source-projects-part-1 /

https:// flatlogic.com/blog/new-and-noteworthy-vue-js-open-source-projects-part-2/

関連推奨事項:

2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアルの推奨事項: 最新の 5 つの vue.js 2020 ビデオ チュートリアルのセレクション

プログラミング関連の知識については、

プログラミング入門

をご覧ください。 ！

以上がVue で注目に値する 21 のオープンソース プロジェクト (推奨)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。