web-dev-qa-db-ja.com

ASP.NET Core + Vue.jsをセットアップするにはどうすればよいですか？

Vue.jsをいくつかのASP.NET Core MVCビューと統合する必要があります。他の選択肢よりもVue.jsを選んだのは、よりシンプルに思えたからです-「ただ<script>タグを介して追加するだけです」と彼らは言いました。 Gulp/Grunt/Webpack/Browserify /などを学ぶ必要はありません。

それは間違っていることが判明した。日付を処理する最初の試みで、この公式から取得した vue-moment および vue-datetime-picker などの拡張機能を試しました Vue.jsに関連する素晴らしいもののキュレーションリスト =しかし、ここで壁にぶつかった。最初のものはrequire() JS構文（CommonJS？）を使用することを義務付けていませんが、2番目のものはそれなしでは機能しません。他の拡張機能は'use babel'およびimports/exportsに発生します。これはコンパイルする必要があるECMAScript 6です。それで、ほとんどのVue.jsライブラリとツールには、実際にコンパイラ、およびrequire()構文、およびNodeの世界のものが必要ですか？

Vueプラグイン（require(stuff)を使用できる）を使用して多くの小さなVueアプリを開発できるように、ASP.NET Core MVC + Vue.jsで動作するようにプロジェクトを設定する方法）？

javascriptasp.net-coreasp.net-core-mvcvue.js
49
Gerardo Grignoli

上記の質問をしたとき、私は完全に失われました。数日を費やしましたが、まだ全体像がわかりません。私が確信しているのは、 2016年はJavaScriptを学ぶのが難しい年です です。

Vue.jsを使用したかったのは、他の方法よりもシンプルだからです。式典、定型文、コードが少なくなります。 プログレッシブフレームワークとしてブランド化されています...そうです！しかし、ポイントにのみ。 Vue.jsは、ビルドシステムに関するJavaScriptエコシステムの断片化の問題を解決しません。

だから、あなたは側を選ぶ必要があります：JavaScriptモジュールとビルドシステムが必要ですか？

オプション1：シンプルにする：JSモジュールを避けてシステムを構築します

この道に従う理由：

  • 学ぶべき日はあまりない A LOT ofのもの。 （バンドラー、npm + package依存関係の地獄、ES6のものを設定します。）
  • 最先端の単一ページアプリケーションを作成する必要はありません。 Vue.jsをいくつかのHTMLページに埋め込むだけで十分だと思われます。
  • HTTP/2が主流になりつつあるため、WebpackやBrowserifyのようなバンドラーは、少なくともパフォーマンスに関してはあまり利点を提供しません。
  • 最終的に ES6モジュールはブラウザで直接サポートされるため、latestJavaScriptが含まれているものをビルドする必要はありませんブラウザ互換JavaScript。

おそらく数年後には時代遅れになるものを学ぶことに時間を費やさないことで、何日も節約できます。

この道に従う場合、いくつかの推奨事項：

  • <script>タグを使用してJSライブラリを追加するだけです。
  • ブラウザ対応のJavaScriptライブラリのみを使用してください。 require()またはUMDプレフィックス(function (root, factory) {を使用するコードでは、モジュールをセットアップする必要があります（したがって、CommonJSをセットアップしない限り、ブラウザーに対応していません）。 import/exportステートメントを含むJSファイルはES6で記述されているため、それらも避けてください。
  • Bowerを使用して、ブラウザ対応ライブラリをダウンロードします。 NPMを回避します（モジュールシステムを適切に配置することを意味します）。

警告： 単一ファイルコンポーネント やVueルーターなどの高度なVue.js機能を使用することはできませんが、それでも問題ありません。いくつかのことを手動で行う必要があります。

オプション2：JavaScriptモジュールの学習+システムの構築

コードではなく学習するために数日準備します。 Webpackがどのように機能したかを簡単に説明します。 Browserifyも機能しますが、試したことはありません。

JavaScriptモジュールとは について学習することをお勧めします。次に、それらをビルドしてパックする方法を学びます。Webpackを使用しました。そのドキュメントは素晴らしいものではないので、私のために働いたのは tutorial ステップバイステップに従うことでした。

この時点で、Webpackには「ホットモジュールリロード」機能を備えたWebサーバーが組み込まれていることを聞いたことがあるかもしれません。これは、開発専用の静的ファイル用のWebサーバーです。その利点は、JSモジュールを編集するたびに、ブラウザーが更新せずに自動的に変更を適用することです。これは非常に便利ですが、オプションの機能です。問題：この組み込みWebサーバーは、Webサーバー（Kestrel）と競合します。したがって、開発中にこの機能を試してみたい場合は、Microsoftの JavaScriptServicesリポジトリ で提供されている Webpack ASP.NET Coreミドルウェア を使用してください。そこに、現在使用している WebApplicationBasicテンプレート があります。私はそれを解剖し、その部品のほとんどを取り外し、それを使用しようとすることで、各部品が元々何であるかをゆっくりと理解しました。

Webpackを使用する場合、主に3つのワークフローを使用します。

  • ビルトイン開発モード：デバッグしやすい巨大なファイルを作成します。これを「監視モード」と併用すると、ファイルを変更するたびに新しいWebpackビルドがトリガーされます。
  • 組み込みのプロダクションモード：小さな縮小ファイルを作成します。 「ドットネットパブリッシュ」に便利です。
  • Webpack ASP.NET CoreミドルウェアでWebpackのWebサーバーとホットモジュールのリロードを使用すると、アプリがWebpackをバックグラウンドで実行し、ソースファイルを変更してビルドを監視します。コンパイル出力はディスクに書き込まれず、メモリに保持され、HTTP経由でのみ提供されます。 JavaScriptServicesミドルウェアは、KestrelからのリクエストをWebpackのWebサーバーに転送して、これを機能させます。

どのWebpack構成を使用する場合でも、Webpack構成に「vue-loader」を含める必要があります。 Vueのwebpack-simpleテンプレート に触発されているかもしれません。

望んでいたことをすべてカバーしていませんが、このトピックは広範すぎるため、コーディングに戻る必要があります。フィードバックをお寄せください。

69
Gerardo Grignoli

私はパーティーに遅れていますが、単一のコマンドでビルドできる.NET Core用のテンプレートが利用可能になりました。 .NET CoreがインストールされたWindowsボックスでは、空のフォルダーを作成し、そのフォルダーで次のコマンドを実行して、使用可能なテンプレートのリストを表示します。

dotnet new

すべてのテンプレートがない場合は、これを実行してSPAテンプレートをインストールするだけです。

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

そして、これは新しいVueアプリを作成します：

dotnet new vue

数ミリ秒で、完全な新しいVue.js単一ページWebアプリが、コントローラー、ビューなどの機能する.NET Coreバックエンドで構築されます。これは素晴らしいです。 VSまたはVS Codeでプロジェクトを開くだけです。

Aurelia、Angular、Knockout、Reactのテンプレートもあります！それらをすべて構築し、それぞれが同じ問題を解決する方法を比較できます。 Angularの1つは、サーバー側で事前にレンダリングすることさえできます！

.NET Coreには方法がありますが、日ごとにますます素晴らしいものになってきています！

17
Norbert Norbertson

最初に、免責事項：私は本当に必要なものに合うものを見つけることができなかったので、ゼロから解決策をまとめました。最後をご覧ください。

<script>タグ（この場合はCDNビルド）を介してVueを含めることについて尋ねます。ただし、BabelとES6モジュール機能の使用についても言及しています。その場合、ES6をBabelでコンパイルし、モジュールとコンポーネントを使用できるようにし、テンプレートを使用できるようにするクライアント側アプリにWebpackを使用することをお勧めします！また、ホットモジュールのリロード（ソースを編集し、リアルタイムでクライアントアプリの変更を確認してください！）を取得すると、Webpackは静的なHTML5アプリにSPAをバンドルします。

公式のVue.jsドキュメントは 独自のWebpackテンプレート を指しています。

そのため、Webpack devサーバーとASP.NET Coreアプリを個別に実行できます（必要に応じて）。ただし、開発をさらに合理化する優れたソリューションがあります。

Microsoftのオープンソース JavaScriptServices を使用すると、ASP.NET CoreからNode.jsを実行できます。また、デバッグビルド中にWebpack devサーバーをアプリに統合するWebpackミドルウェアがあります。

Angular 2の公式テンプレートとVue.jsというラベルのテンプレートも提供しますが、Vueテンプレートは.NETと統合されていない公式のWebpackテンプレートです。これは、スタンドアロンサーバーと同じです。

Vue.jsでこれを行うテンプレートが見つからなかったため、Webpack devミドルウェアとVue.js WebpackアプリをロードするサンプルASP.NET Coreアプリケーションを作成しました。 .NET Coreサーバーが開発モードで実行されている場合、Vueソースを編集でき、アプリケーション全体を再構築する必要なく、変更がクイック増分パッチで反映されます。リリースモードでは、.NET Coreはビルド済みのWebpack出力を使用します。 GitHubで見つけることができます。

https://github.com/0xFireball/YetAnotherShrinker

上記のリンクされたリポジトリには、NancyFx、axios、Vue.js、およびVue Materialを使用する完全なアプリケーションデモがあり、簡単なURL短縮サービスです。既存のアプリに簡単に追加できる最小限のセットアップ手順が必要な場合は、 このブログ投稿 をご覧ください。

義務的な開示：私はそのブログ記事を書きました。

9
n3n7

誰かがこの情報が役立つと思うかもしれません。

プロジェクトのクイックセットアップに使用できるスターターテンプレートを次に示します。

1つ目は、事前定義されたアーキテクチャを備えたマルチプロジェクトソリューションです。このテンプレートは、ここで既に説明したJavaScriptServicesソリューションよりも、実際のプロジェクトにより密接に一致します。ドメイン層、リポジトリ層などを提供します。これはYeomanジェネレーターであり、TypeScriptを使用することに注意してください。 https://github.com/vue-typed/generator-vue-net-core

2番目はGitHubの単なるプロジェクトであり、使用する場合は複製する必要があります。 Yeomanジェネレーターではなく、これは残念だと思いますが、このテンプレートの構造は最初のテンプレートよりも優れていることがわかりました。また、いくつかの例外フィルターのような素敵な小さなものがたくさんあります。そして、あなたが初心者なら、このテンプレートはただの天の恵みになります。このテンプレートは、awesome-vueページで推奨されています。リンクは次のとおりです。 https://github.com/mrellipse/toucan

4
Stanislav

このシンプルな guide から、以下の手順を試すことができます。

  1. Npm構成ファイル（package.json）をセットアップします

以下は、使用するnpmパッケージです。

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3",
    "vuex": "^2.1.1"
  }
}
  1. Npmパッケージをインストールする

コマンドプロンプトを開き、アプリケーションのルートフォルダーに移動し、「npm install」コマンドを引用符なしで使用して、package.jsonファイルからnpmパッケージセットをインストールします。

  1. Gulpをセットアップする

Npmパッケージがインストールされると、Gulpファイルをセットアップできます。 Gulp構成ファイル（gulpfile.js）を追加する必要があります。後でVue JSを作成し、以下のコードでvueApp.jsを呼び出します。最初の引数はパブリック出力ディレクトリで、もう1つはソースディレクトリです。 Webpackの詳細については、 here をクリックしてください。

var elixir = require('laravel-elixir');



require('laravel-elixir-vue-2');

elixir(function (mix) {
    mix.webpack('vueApp.js', 'wwwroot/js/dist', 'wwwroot/js');
});
  1. Vue JSファイルを作成します

ASP.NET Core Webアプリプロジェクトソリューションエクスプローラーで、エクスプローラーでwwwrootに移動し、「js」フォルダーを追加します。存在しない場合は、「dist」という名前の新しいフォルダーを再度追加します。フォルダーのセットアップが完了したら、「vueApp.js」という名前の「js」フォルダーに新しいJavaScriptファイルを追加します。

  1. Vue JSファイルでコーディングを開始します

これでコーディングを開始できます。以下の例では、Vue.jsが実行されていることを示すアラートを表示します。

import Vue from 'vue'

new Vue(
    {
        el: '#app',
        data() {
            message:'hello world using Vue.js on ASP.NET Core MVC.'
        },
        mounted() {
            console.log(this.message);
        }
    });
  1. Vue JSをRazorビューまたはHTMLに適用します

レイアウトページを開き、bodyタグのコンテンツをdivと「app」のIDでラップします。これは、ステップ5のサンプルコードで使用したidタグであるため、「app」を使用します。「app」という名前は必須ではなく、目的の名前に変更できます。最後に、Vue JSファイルへの参照を追加します。エラーを防ぐため、スクリプトが参照する「アプリ」divの外に移動してください。

<body>

<div id="app">

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Project.Payrole</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
                @await Html.PartialAsync("_LoginPartial")
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2017 - Project.Payrole</p>
        </footer>
    </div>

</div>

<environment names="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>

<environment names="Staging,Production">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
    </script>
    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

<script src="~/js/dist/vueApp.js" asp-append-version="true"></script>



    @RenderSection("Scripts", required: false)
</body>
  1. Gulpを実行

Vue.js構成をセットアップし、それをRazorビューに適用したので、Gulpを実行して、gulpfileで設定した内容を実行する必要があります。手順2のように、ルートフォルダーに移動してコマンドプロンプトを開き、「npm run dev」コマンドを再度引用符なしで実行します。

  1. 走る

最後のステップとして、ASP.NET Core MVCアプリを実行し、Webブラウザーのコンソールを確認します。これで、ステップ5で設定したメッセージが表示されるはずです。

（ガイドを必要に応じて参照できるように、ブログ投稿に書きました：D）

3
SlowNinja

。NET MVCとVue.jsを組み合わせたこのテンプレートを作成しました。 Vueエコシステム全体を使用できますが、どのページでも使用したくない場合は、オプトアウトできます。

GitHub： https://github.com/danijelh/aspnetcore-vue-TypeScript-template

中： https://medium.com/@danijelhdev/multi-page-net-core-with-vue-js-TypeScript-vuex-vue-router-bulma-sass-and-webpack-4-efc7de83fea4

これを例または開始点として使用できます。

2
Danijel

Vue.jsとASP.NET Coreを統合するための最良のステップバイステップチュートリアルは、次のとおりです。

https://ourtechroom.com/tech/integrating-vuejs-in-aspnetcore-application/

GitHubサンプルプロジェクトをここに投稿しました。

https://github.com/Diwas777/integrating-vue-with-asp.net-core-project

2
Diwas Poudel

私もこのパーティーに遅れていますが、去年以下で大きな変化があったと思います。 ES6モジュール仕様（および動的モジュール）が比較的幅広いブラウザーをサポートするようになったことを考えると（ CanIUse を参照）、Vue.jsをASP.NET MVC Razorビューに統合するためのオプションがはるかに優れています。 Vue.jsについて学んだことの1つは、jQueryの意味で「プラグイン」についての先入観を捨てることが最善だということです。私のようにjQueryの世界から来た場合（AngularまたはReactの経験なし）、あなたはmust座ってVueのコンポーネントモデルを学習します（SFCであっても、この場合は必要ありませんが、全体像を定義するのに役立ちます）。これには、ES6を適切に把握する必要があります（ECMAScript 2015）。

反復的かつ漸進的なアプローチは、Vueの最大の資産の1つ（CDDの容易さ-コンポーネント駆動型開発）の学習と活用を開始する場合、「フル」ビルドを追加するだけです（ guide を参照）スクリプトタグ。 ES6モジュール構文（インポート/エクスポート）を使用すると、必要な場所にプラグインするコンポーネントの独自のライブラリを構築できます。 Webpackやトランスパイルは必要ありません。これは、WebpackとBabelを.NETプロジェクトに追加する最初の（面倒な）学習曲線を踏むことなく、コンポーネント化のベストプラクティスを使用してVue.jsに手を出すことができるため、本当に素晴らしい開発です。また、追加のボーナスとして、後で最新のツールとワークフロー（NPM、Webpack、テスト、HMR、VSコードなど）を使用してゲームをアップする必要がある場合、多くのコンポーネントをテストして準備ができています。

基本的に、ルートVueインスタンス（別名Vueコンポーネント）を構築し、DOMの要素にアタッチします。すべてがコンポーネントであることを理解したら、vue-momentやvue-datetime-pickerなどのオープンソースパッケージを掘り下げ、モジュール構文を介してそれらをインポートするか、それらから学習して独自のカスタムコンポーネントに組み込むことに自信がつきます。

1
Mark Dalsaso

この質問は少し古いですが….

GitHub に、ASP.NETとVue.jsを使用する小さなサンプルプロジェクトがあります。 Yarn（またはnpm）をパッケージマネージャーおよびWebpackとして使用します。

.NET Coreではありませんが、使用方法は同じです。始めるのに役立つかもしれません。

奇妙なファイル構造は、Sitecore CMSシステムで実行されるためです。

それが役に立てば幸い。

0
CodeHacker

BrowserifyとBabelの使用方法を学ぶのに長い時間を費やし、独自のES6環境をセットアップできるようにしました。ただし、Vueの使用に関しては、 Vue-CLI をインストールすることでアクセスするのが最適なデフォルトのテンプレートを使用することに非常に満足しています。 BrowserifyとWebpackのいずれかを選択できます。また、ランタイムのみのバージョンを使用して、単純なセットアップまたはリンティング、単体テスト、単一ファイルコンポーネントのいずれかを選択できます。

それはただ動作します。

0
blues_driven