5 つの素晴らしい Vue.js プロジェクトテンプレート-jsチュートリアル-php.cn

5 つの素晴らしい Vue.js プロジェクトテンプレート

青灯夜游

リリース： 2020-08-27 10:16:07

転載

2789 人が閲覧しました

5 つの素晴らしい Vue.js プロジェクトテンプレート

主要な Vue プロジェクトを開始しようとしていますか? 確実に強固な基盤から開始するために、テンプレート (ボイラープレート、スケルトン、スターター、または足場とも呼ばれます) を使用できます。、npm init または vue init から開始する代わりに。

多くの経験豊富な開発者が、高品質の Vue アプリケーションの構築に関する経験をオープンソーステンプレートの形式で収集しています。これらのテンプレートには、最適な構成とプロジェクト構造、最適なサードパーティツール、およびその他の開発のベストプラクティスが含まれています。

柔軟性のために最適化された Vue CLI 3 とは異なり、テンプレートはカスタマイズ可能です。したがって、開発理念に適合し、すぐに必要な機能とほぼ同じ機能を備えたものを選択することが重要です。

Vue テンプレートを選択する際の考慮事項は次のとおりです。

Webpack
PWA
認証付きのフルスタック
##優れたドキュメント
GraphQL
テスト
＃＃＃＃＃＃＃＃＃等。

1. Webpack に最適

信頼性の高い Webpack セットアップが必要な場合は、Vue 以外に探す必要はありません。 CLI 2 に含まれる Webpack テンプレートで十分です。 GitHub 上に約 7000 のスターがあり、Vue チームメンバーによって開発および保守されているこのテンプレートは、高度に最適化された Webpack を利用した SPA を作成する場合に最適です。

このテンプレートは、ホットリロード、CSS 抽出、 lint 、そしてもちろん単一ファイルコンポーネントの読み込み。また、開発、実稼働、さらにはテスト用に最適化された個別の構成も含まれています。

Vue CLI 2 の一部として、これは私たちが提供する最も意見の少ないテンプレートの 1 つであるため、必要な追加機能はあまり含まれていません。サーバー側のレンダリング。

1 (2).jpg #Webpack テンプレートが少しやりすぎだと思う場合は、弟の Webpack Simple テンプレートを試してみてください。

#リンク: https://github.com/vuejs-templates/webpack

##注: ベータ版を終了する Vue CLI バージョン 3 は、プラグインを優先してテンプレートアーキテクチャを放棄したため、このテンプレートは技術的に人気がありませんが、Vue CLI 3 から引き続き使用できます。従来の設定で使用されます。詳細については、「Vue CLI 3: フロントエンド開発のゲームチェンジャー」の記事をご覧ください。

2. 最適な PWA

高度なアプリケーションが必要です高度なユーザーエクスペリエンス? Vue Starter は、サーバーレンダリング PWA 用の SPA テンプレートです。これには、すぐにサーバーサイドレンダリング (SSR) を使用するように構成された Vuex と Vue Router が含まれています。

このプロジェクトでは、複数の言語での国際化やライトハウスのサポートなど、デプロイするプロジェクトが最初から優れた UX を備えていることを確認するために多大な努力を払ってきました。 SSR と Service Worker のキャッシュのおかげで、スコアは 90 になりました。

5 つの素晴らしい Vue.js プロジェクトテンプレートさらに、vue-meta を使用して SEO 用のドキュメントヘッダータグを管理し、SSR により JavaScript コンテンツをサポートする検索エンジンによってページのインデックスが確実に作成されます。

リンク: https://github.com/devCrossNet/vue-starter

デモ: https://vue-starter.herokuapp.com

PWA を構築している場合、もう 1 つの良いオプションは VuePack、そしてもちろん Vue CLI 2 PWA テンプレートです。

3. 認証に最適

ユーザー認証が必要な場合は、Vue Express Mongo サンプルファイルを確認してください。このプロジェクトは、Google、Facebook、Twitter、GitHub のユーザー登録とソーシャルログインを含む、すぐに使える認証を備えたフルスタックの「MEVN」Web アプリケーションのボイラープレートを提供します。

5 つの素晴らしい Vue.js プロジェクトテンプレートこのテンプレートは、セキュリティのベストプラクティスに従い、OAuth 2、ヘルメット (安全な HTTP ヘッダーの追加)、および入力サニタイズ用の Express Validator を使用します。また、複数のリモートロギングサービスのサポートも提供します。

データベースとしては、Mongoose を使用した MongoDB が提供されます。リポジトリには Docker 構成も含まれているため、インスタンスを簡単に起動できます。

#リンク: https://github.com/icebob/vue-express-mongo-boilerplate

デモ: http://vemapp.moleculer.services/

ヒント: 認証済み Vue アプリケーションのバックエンドとして Laravel を使用したい場合は、同様の機能が多数含まれている Laravel Vue ボイラープレートを使用してみてください。

#4. ドキュメントに最適

多くのテンプレートが失敗する理由は、ドキュメントが不足していることにあります。 Vue Enterprise 定型文そうではありません。このプロジェクトは、Vue ドキュメントのほとんどを書いた Chris Fritz によって作成および保守されているため、よく整理され、Vue のベストプラクティスに沿ったものになっています。このテンプレートのドキュメントの優れた点は、何が含まれているかだけでなく、多くの場合、何が含まれていないのか、およびその理由も説明していることです。たとえば、Chris は、TypeScript、Babel ポリフィル、Pug などの一般的なテンプレートがない理由を説明しました。

このアプリのシンプルなデフォルトページに騙されないでください。このアプリには多くの機能もあります。私のお気に入りには、テスト用のモック API や、コンポーネント、ビュー、レイアウトを設定するための単体テストを自動的に追加できるジェネレーターが含まれています。

5 つの素晴らしい Vue.js プロジェクトテンプレート Vue Enterprise Boilerplate は Vue CLI 3 もサポートしているため、プロジェクトを他の Vue CLI 3 プラグインで簡単に拡張できます。

リンク: https://github.com/chrisvfritz/vue-enterprise-boilerplate

5. GraphQL に最適

GraphQL は現在大流行しており、多くの開発者が新しい Vue プロジェクトでそれを使用しようとしています。 Vue テンプレートはそれほど多くありませんが、GraphQL が必要な場合は、Vuexpresso を必ずチェックしてください。

このプロジェクトでは、GraphQL、Apollo、および IDE 内で GraphQL を学習するためのブラウザーである GraphiQL UI を使用します。さらに、適切に構成された Webpack セットアップ、Vuex、および Vue Router も利用できます。また、UI コンポーネントのインタラクティブな開発、テスト、共有を可能にする Storybook も入手できます。 5 つの素晴らしい Vue.js プロジェクトテンプレート Vuexpresso の唯一の欠点は、まだかなり新しいため、Vuexpresso を使用して構築するアプリケーションは必ず時間をかけて徹底的にテストしてください。