.NETコア集積VUE

VUE、角度、反応するあなたはそれでよりよく知っていますか?これは、VUEの下部にあります。

gitの:https://github.com/WalkerLu/DotnetCoreWithVue.git

 

請求

 

お使いのコンピュータにはインストールされている必要があります

 

•.NETコア2.0以降

•ノード、WebPACKの、VUE-CLI、VUE(デフォルトのバージョンにインストールNPM)

•Visual Studioの2017 /コード対

 

初期.NETコアプロジェクト

 

1.まず、17対開いて新しいasp.netコアプロジェクトを作成する(コード対もOKです)DotnetCoreWithVueを

640?wx_fmt = PNG

 

2.ドッキングウィンドウドッキングウィンドウは、次を確認することができます有効にサポートを統合したい場合は、テンプレートのAPIを選択します。ドッキングウィンドウの詳細については別の記事の転載記事を参照することができますTFS楽しいドッカー自動展開を使用しました

640?wx_fmt = PNG

 

使用初期VUE VUE-CLIプロジェクト

 

•インストールノードた場合は、ダウンロードリンクをクリックしてください:

https://nodejs.org/dist/v8.11.4/node-v8.11.4-x64.msi、インストールしてダブルクリックします。

•-g VUEをインストールNPMをインストールしていない場合はVUEは、コマンドラインを入力します。

VUE-cliのNPMが-g VUE-CLIをインストール•インストールします。NPM遅い、あなたはcnpm(淘宝網NPMミラーリング)または糸を使用することができます。

 

1.コマンドラインツールは、ここで直接ターミナルプラグをvscode。

640?wx_fmt = PNG

 

2. WebPACKの初期化VUE

vue init webpack

ここで私は、他の2つのテストモジュールがnより小さいである満たされVUEルーティング、ESLint構文仕様を使用することを選択し、VUE WebPACKのテンプレートの使用に導入され、ドキュメントを参照してください。

https://vuejs-templates.github.io/webpack/

パラメータ説明

?プロジェクト名は、プロジェクト名を入力します。
?プロジェクトの説明は、プロジェクトの説明を入力
?著者著者
?Vueのビルド梱包、輸送などを
N入力を使用せずに、VUE-ルータを使用するようにVUE-ルータ?セレクトYをインストールしますか?
あなたのコードをlintの?使用ESLint ?コード規範

?カルマ+モカでセットアップユニットテスト ? 単体テスト
?ナイトウォッチ?E2EテストとセットアップE2Eテスト

640?wx_fmt = PNG

 

3.インストールが異なり

CD DotnetCoreWithVueは
インストールNPM

640?wx_fmt = PNG

 

プロジェクトが正常に初期化されているかどうかを確認してください4。

RUNのDEVのNPMは、ブラウザでhttpを開く:// localhostを:8080、以下のページを参照してくださいすることはVUEプロジェクト成功の初期化を表しています。

640?wx_fmt = PNG

 

同期の構成(フロントエンド+リア)

 

プロジェクトファイルを編集して、プロジェクトファイルは、最初の実行NPMコマンドの前にコンパイル。

 

1. 2017年の対中.csprojファイルを変更する権利を選択します。

640?wx_fmt = PNG

 

2.次のコード.csprojファイルを追加し、すなわち構築する前に、最初に実行表しインストールNPMNPM RUNビルド

<ターゲット名= "PrecompileScript" BeforeTargets = "BeforeBuild"> 
  <Execコマンド= "インストールNPM" />
  <Execコマンド= "NPM実行ビルド" />
</ターゲット>

 

3.コンパイルは、コンソールでログ出力を表示することができ、その結果を参照してください。

640?wx_fmt = PNG

ビューのビルドディレクトリ

640?wx_fmt = PNG

 

生成経路のWebPACKを変更

 

asp.netのコアプロジェクトでは、wwwrootディレクトリに静的ファイルを使用し、そして今、私たちは唯一のWebPACKの下の設定ファイルを変更する必要があります。

 

1.変更のconfig / index.jsファイル。

640?wx_fmt = PNG

 

2.再コンパイルは、生成されたファイルのパスを表示します。

640?wx_fmt = PNG

640?wx_fmt = PNG

 

フロントおよびリア側との対話

 

1.コントローラ、最初の読み出し戻りデータの方法の第1変形例:VUEとDOTNETコア。

640?wx_fmt = PNG

CD DotnetCoreWithVueが
インストールNPM
// GETのAPI /値
[HTTPGET]
公共のActionResult <IEnumerableを<文字列>>のGet()
 {
  新しい文字列を返す[] { "VUEとDOTNETコア"、 "値2"};
  }
  

 

2.変更HelloWorld.vueは、リアのAPIを要求し、次のコードを追加して、プロジェクトをコンパイルします。ここrequst axiosの小さなシリーズをパッケージ化するために使用される、誰も興味はgithubのビューに直接行くことができるコード 

https://github.com/WalkerLu/DotnetCoreWithVue/blob/master/DotnetCoreWithVue/src/utils/request.js

640?wx_fmt = PNG

 搭載(){ 
 要求({  
   URL: 'API /値'、
   方法: '得る'
   })。次に、(応答=> {
  にconsole.log(応答)
  this.msg = response.data [0]
    })
     }

 

プロジェクトをリビルド3

リクエストのhttp:// localhostを:アプリケーションのポート番号に応じて、40051 /#/認証コードは、変更に構成されなければなりません。

640?wx_fmt = PNG

 

概要

 

したがって、.NETコア集積VUEの基本的な動作はどの使用される技術(.NETコア、VUE、ルータ、完成したのWebPACK、ES6 ...) 用語のシリーズを発売し、もちろん、いくつかのオンラインドキュメントがありますすることができます。そこで、この記事の焦点は、VUEとDOTNETコアを開始する方法でありますか?技術的な詳細や深さについては、読者はVUEのフロントエンド側面のネットコアのトピックを取得したりしている場合の質問は一緒に私たちが学習を探る、コメントを残すことが歓迎されています。もちろん若干、フロント再建の端部または、イェフロントを分離し、後端が最も適し実用的な独自のプログラムを選択する必要がありますあなただけ同時にフロントとリアの両方を記述する必要がある、とVUEの家族のバケットを使用すると、希望は、コードのコンパイルに鍵となることができますしたい場合は、おそらくあなたはこの方法を試すことができます。

転送します。https://blog.csdn.net/sD7O95O/article/details/82323129

オリジナル住所ます。https://devopshub.cn/2018/08/30/dotnetcore-vue/

公開された259元の記事 ウォンの賞賛2 ビュー10000 +

おすすめ

転載: blog.csdn.net/hofmann/article/details/103986738