aspdotnet vuejs
v3.0.0
Dotnet Core 3.0 + VueJこのプロジェクトの主なアイデアは、サーバー側で .Net Core WebAPI を使用し、クライアント側で VueJ を使用して新しいプロジェクトを開始する簡単な方法を提供することです。この目標のために、ホット リロードとしていくつかのユーティリティを使用し、Element-UI および FontAwesome としていくつかのフロントエンド ライブラリを使用して、この統合を有効にするメイン構成をセットアップします。
私たちの目標は、依存関係とパフォーマンスの問題を最小限に抑えたシンプルな SPA を提供することです。 VueJ は Vuex と Vue Router で構成されていますが、要件を満たしていないと思われる場合は削除できます。コンポーネントライブラリについても同様です。このテンプレートでは、主な機能の例も提供します。
このテンプレートは、Mark Pieszak のプロジェクトと Nodes のプロジェクトからインスピレーションを得て改変されたものです。
* 作業中です。将来のリリースで利用可能になります。
テンプレートをダウンロードしてインストールするには、次のように入力します。
> dotnet new -i aspdotnet-vuejs
dotnet new -lコマンドを使用すると、インストールされているテンプレートのリストを表示できます。
次に、プロジェクトを作成するには、ディレクトリで以下のコマンドを使用するだけです。
> dotnet new vueこれにより、 dotnet restoreが自動的に実行されます。ただし、テンプレート設定で変更できます。前のコマンドを使用する前に、 dotnet new vue -h参照してください。
ソリューションとプロジェクト名はディレクトリの名前になります。
インストールを更新するには、インストール プロセスを繰り返すだけです。バージョン番号が等しくない限り、予期しない動作は発生しません。
シェルから次のコマンドを入力します。
> dotnet new -u aspdotnet-vuejsアプリケーションの開発を開始するには、.Net CLI コマンドを使用するだけです。
> dotnet run YourAplication.csprojプロジェクト ディレクトリに
dotnet runと入力するか、IDE を実行するように構成することができます。この最後のケースでは、ASPNETCORE_ENVIRONMENT=Development環境変数を渡すことを忘れないでください。
これにより、 npm iなどのすべてのノードの依存関係も実行されます。
アプリケーションは
https://localhost:5001およびhttp://localhost:5000でホット リロードが有効になった開発モードで起動されます。
プロセスを開始する前に、wwwrootが空であることを確認する必要があります。
.Net Core CLI を使用した通常の公開方法を使用するだけです。
> dotnet publish YourProject.csproj -c release -o ./publish/dotnet cli から他のすべてのパラメーターを追加することもできます。詳細については、MSDN サイトにアクセスしてください。
これにより、プロジェクトの再構築が行われ、その後、特別なターゲットを使用してクライアント (vuejs) が実稼働モードで再構築されます。
NginX サーバーの背後で公開している場合は、追加の構成が必要になる場合があります。
基本サイトhttp://www.example.comがあり、NginX 構成でhttp://www.example.com/myApp内にドットネット アプリを置きたいとします。このようなシナリオでは、index.html のベース URI を設定する必要があります。開発と運用の間でこれを手動で行う代わりに、オーバーライドの可能性を含むファイル./build/base.prod.config.jsを用意します。
次のようにオーバーライドを設定するだけです。
module . exports = {
baseUriPath : '/myApp/'
}次回公開するときに、そのパスが考慮され、ベース URI パスが自動的に設定されます。
プロジェクトには、Docker Hub を通じて利用できるいくつかの Docker コンテナがすでに追加されています。必要に応じて画像を取得できます。サンプルをローカルで利用できるようになります。この画像は Alpine バージョンを使用しているため、使用するフットプリントはわずかです。
docker のコンテナーは非常に人気があるため、 Dockerfileもテンプレートのルート フォルダー内に含まれています。公開前に不要なファイルがコピーされるのを避けるために、一部のファイルが無視されている.dockerignoreを忘れないでください。
Docker がインストールされていることを確認してください。
このコードには、HTTP での Gzip 圧縮が組み込まれています。特に Kestrel を使用する場合は、そのコードを使用することをお勧めします。それ以外の場合、IIS を使用している場合は、 Startup.csにある特定のコードを削除してください。通常、IIS は、よりパフォーマンスの高い独自の圧縮モジュールを提供します。
./ClientApp/components/**/*内で利用可能なComponentsに関する自動化がいくつかあります。キーワード「 baseで始まるすべてのファイルはグローバルとして宣言され、どこでも使用されるコンポーネントの名前はbaseキーワードなしでスネークケースで定義されます。
例: baseHelloWorld hello-worldとして登録され、Vue テンプレートで使用できるようになります。
< template >
< div >
< hello-world /> works!
</ div >
</ template >プロジェクト内には、各ページのカード コンポーネントの実際の例があります。コンポーネントの名前は、
baseCard.vueです。
開発モードでは CSS は生成されません。これらはdotnet publishコマンドを使用する場合にのみ作成されます。または、代わりにnpm run build -- --prodと入力することもできます。これにより、ファイルの縮小と抽出を伴う運用ビルドが起動されます。
重要:現在、webpack は .Net プロジェクト内の wwwroot フォルダー全体をクリーンアップします。したがって、静的ファイルがある場合は、それらを./ClientApp/static/フォルダー内に移動します。
開発を迅速化するために、コンポーネント ライブラリ Element-UI のインストールが提供されています。このライブラリのドキュメントは彼のサイトにあります。
必要がなければ、
main.jsで通常どおり削除できます。
