研究する価値のある 20 の Vue オープンソース プロジェクト

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/templates/sing-app-vue-dashboard

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/vuestorefront/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/hoppscotch/hoppscotch

GitHub Stars:

10.5k

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

Vue Virtual Scroller

クイック スクロール

URL:

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

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

GitHub スター: 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://github.com/ flatlogic/light-blue-vue-admin

テンプレートは を使用していますVue CLI

と

Bootstrap 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.1k

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

Vue コンテンツ ローダー

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

Web サイト: http://danilowoz.com/create-v...
GitHub: https://github.com/egoist/vue-content-loader

GitHub スター: 2k

Web サイトやアプリを開発する際、コンテンツが多すぎて読み込み速度が遅いと、ユーザーがページを開いたときに空白ページが大量に発生します。 ## はまさにこの問題の解決策です。ユーザー エクスペリエンスを向上させるために、コンテンツをロードする前に dom テンプレートを生成するコンポーネントです。 Vue2.0 を使用した Echarts

データ視覚化

Web サイト:

https://simonzhangiter.github.io/DataVisualization/#/dashboard GitHub:
https://github.com/SimonZhangITer/DataVisualizationGitHub スター:
1.3k

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

履歴書に書けるプロジェクトがないと皆さんがおっしゃっていたので、私があなたのためにプロジェクトを見つけ、【構築チュートリアル】も含めました。

Vue.js Modal

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

Web サイト:

http://vue-js-modal.yev.io /GitHub:
https://github.com/euvl/vue-js-modalGitHub スター:
2.9k

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

Vuesax

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

Web サイト:

https://lusaxweb.github.io/vuesax/GitHub:
https://github.com/lusaxweb/vuesaxGitHub Stars:
3.7k

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

Vuesax

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

vue2.0

—animate.css

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

https://the-allstars.com/vue2-animate/GitHub:
https://github.com/asika32764/vue2-animateGitHub スター:
1.1k

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

rotate

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

Vuetensils

Vue.js ツールセット

Web サイト:

https://vuetensils.stegosource.com/ GitHub:
https://github.com/AustinGil/VuetensilsGitHub スター:
111

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

このブログに間違いやご提案がございましたら、タレントの方はメッセージをお待ちしております。最後に、ご覧いただきありがとうございます。

---

編集時のバグをリアルタイムで知ることは不可能なので、後からバグを解決するためにログのデバッグに多くの時間を費やしました。便利なものをみんなにお勧めするバグ監視ツールFundebug。