admin dashboard starter

ギャラクシーで最も簡単な管理ダッシュボードキット！

私たちの目的は、スパ開発を簡素化することです - 管理ダッシュボードを今日出荷してください。焦点は、美学ではなく、スタック/アーキテクチャ/デザインパターンにあります。これをシンプルに保ち、独自のデザインを簡単に実装できるようにするために、デザインは最小限に抑えられます。

デザインの部分もカバーしています - 主要な管理者フレームワークを管理ダッシュボードスターターテックに移植しています。完全なリストは次のとおりです（星が多いほど、作業が増えます）：

• テーパー
• adminlte
• 管理者
• マテリアルダッシュボード

SvelteとSapperで構築されています。ロールアップはプロジェクトを構築します。 Firebaseホスティングで展開します。現在、サーバーに直接サーバーに向かってください。

全体として、今日のライブ管理ダッシュボードを展開することができます。

特徴

• 使いやすいコンポーネントシステム。コンポーネントは、プレーンHTML、CSS、JSです。
• フォルダーベースのルーティング。
• 堅牢な認証システム。 Firebase、passport.js、またはauth0を簡単にプラグインします。
• コンポーネントベースのテストと開発。単一のコンポーネントをレンダリング - 作業し、より速く反復します。堅牢な単位テスト/コンポーネントテストシステムのセットアップ。
• データソース。データベース、ファイル、またはリモートサーバーから、独自のデータを簡単に接続できます。
• サイプレスとの統合テスト。
• コマンドラインから開発環境と製品の環境を切り替えます。
• コマンドラインから人気のあるサービスに展開します。

プロジェクトを実行します

コードを取得しても、依存関係をインストールして、プロジェクトを開発モードで実行できます。

 cd admin-dashboard-starter
npm install # or yarn
npm run dev

LocalHost：3000を開き、クリックを開始します。

Sapper.svelte.devに相談してください。

構造

Sapperは、プロジェクトのルートに2つのディレクトリ、 srcとstatic見つけることを期待しています。

SRC

SRCディレクトリには、アプリのエントリポイント（ client.js 、 server.js 、および（オプションで） service-worker.js - template.htmlファイルとroutesディレクトリが含まれています。

SRC/ルート

これはあなたのサッパーアプリの中心です。ページとサーバールートの2種類のルートがあります。

ページは、 .svelteファイルに記載されているSvelteコンポーネントです。ユーザーが最初にアプリケーションにアクセスすると、問題のルートのサーバーレンダリングバージョンに加えて、ページを「潤い」し、クライアント側のルーターを初期化するJavaScriptが提供されます。その時点から、他のページへのナビゲートは、高速でアプリのような感触のために完全にクライアントで処理されます。 （Sapperは、これらの後続のページのコードをプリロードしてキャッシュするため、ナビゲーションは瞬時になります。）

サーバールートは、 .jsファイルで記述されたモジュールであり、HTTPメソッドに対応する機能をエクスポートします。各関数は、引数としての式requestとresponseオブジェクトを受信し、さらにnext関数を受け取ります。これは、たとえばJSON APIの作成に役立ちます。

ルートを定義するファイルを命名するための3つの簡単なルールがあります。

• src/routes/about.svelteというファイルは、 /aboutルートに対応しています。 src/routes/blog params.slug src/routes/blog/[slug].svelteと呼ばれるファイルは/blog/:slugルートに対応しています。
• ファイルsrc/routes/index.svelte （またはsrc/routes/index.js ）は、アプリのルートに対応しています。 src/routes/about/index.svelte src/routes/about.svelteと同じ扱われます。
• 主要なアンダースコアを持つファイルとディレクトリは、ルートを作成しません。これにより、ヘルパーモジュールとそれらに依存するルートを使用してヘルパーモジュールとコンポーネントをコロケートすることができます。たとえば、 src/routes/_helpers/datetime.jsというファイルを持つことができ、a /_helpers/datetimeルートは作成されません。

静的

静的ディレクトリには、利用可能な静的資産が含まれています。これらはSIRVを使用して提供されます。

service-worker.jsファイルで、これらを生成されたマニフェストからfilesとしてインポートできます...

 import { files } from '@sapper/service-worker' ;

...キャッシュできるように（たとえば、非常に大きなファイルをキャッシュしたくない場合は、選択できませんが）。

バンドラー構成

Sapperは、ロールアップまたはWebpackを使用して、コードスプリッティと動的なインポートを提供し、Svelteコンポーネントをコンパイルします。 Webpackを使用すると、ホットモジュールのリロードも提供します。何もしない限り、構成ファイルを編集して、必要なプラグインを追加できます。

生産モードと展開

アプリの生産バージョンを起動するには、 npm run build && npm start実行します。これにより、ライブリロードが無効になり、適切なバンドラープラグインがアクティブになります。

ノード8以降をサポートする任意の環境にアプリケーションを展開できます。例として、今まで展開するには、これらのコマンドを実行します。

npm install -g now
now

外部コンポーネントを使用します

@Sveltejs/Svelte-Virtual-ListなどのNPMからインストールされたSvelteコンポーネントを使用する場合、Svelteは元のコンポーネントソースを必要とします（コンポーネントに搭載された事前にコンパイルされたJavaScriptではなく）。これにより、コンポーネントをサーバー側にレンダリングすることができ、クライアント側のアプリを小さくします。

そのため、バンドラーがパッケージを外部依存関係として扱わないことが不可欠です。 rollup.config.jsのserverの下のexternalオプションを変更するか、webpack.config.jsのexternalsオプションを変更するか、 dependenciesではなくdevDependenciesにパッケージをインストールすることができます。あなたのアプリ：

npm install -D @sveltejs/svelte-virtual-list

バグとフィードバック

DBH Issue Trackerでボーカルしてください。