ASP.NET Coreで最新のフロントエンド開発ワークフローを設定するにはどうすればよいですか？

Question

最新のフロントエンド開発ワークフローを使用してASP.NET CoreでVueをセットアップするにはどうすればよいですか？私はES6、WebPack、Babel、Vueを使いたいと思っていますが、ASP.NET Coreが提供している機能の恩恵を受けています。

Answer 1

私はこれらの疑問をますます多く抱いてきました。 .NET開発者はReact、Angular 2、VueのようなJavaScriptフレームワークを使用し、プロセスで最新のフロントエンド開発ワークフローを利用することは確かです。

1. Visual Studio 2017 RC
2. Node JS
3. WebPack Task Runner
4. ：

   ステップガイドによって、完全なステップは、要するにthis blog post.

   で利用可能で、私は最終的に以下のの前提条件を使用してそれを達成することができOpen Command Line for Visual Studio

私は具体的にはVueのフレームワークを使用してみましょうが、手順の次のリストは、容易に反応するようになってたり角度することができます。

1. のVisual Studio 2017

2. インストールCLI VUE-コマンドラインとNPM（パッケージマネージャ）

   npm install -g vue-cli 
   

を使用した場合の基本的なセットアップして新しいASP.NETコアプロジェクト（.NETコア）を作成します。

3. で新しいVueのプロジェクトを作成しますVUE-CLIサイトフォルダのコンテキストでコマンドラインで

   vue init webpack-simple 
   

4. NPMフロントエンドパッケージをインストール

   npm install 
   

5. はあなたのコードを書く

6. をwwwrootの/ jsの下のsrcフォルダを移動しwebpack.config.jsのエントリと出力パスフィールドを更新

   。 Vueのを使用して、基本的なHello Worldアプリケーションは次のようになります。

   HTML：

   <div id="app" class="row"> 
       <h1>{{ title }}</h1> 
   </div> 
   

   はJavaScript：

   <script src="~/js/dist/build.js"></script> 
   

：

import Vue from 'vue'; 

new Vue({ 
    el: '#app', 
    data: { 
    title: 'Hello World!' 
    } 
}); 

レイアウトでのWebPACKによって生成されたJavaScriptファイルへの参照を追加します。

7. タスクランナーエクスプローラーでWebPackのWatch - Developmentタスクを実行します。 o変更を監視し、最終的なJavaScriptファイルを構築する。 Visual Studioでソリューションを実行します（Ctrl + F5またはF5）。