12
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ASP.NET Core アプリでVueJsを使います

Last updated at Posted at 2017-05-26

既存コンポーネント

1. Visual Studio
2. .Net Core SDK
3. vue-cli

ASP.NET Core ウェブアプリのプロジェクト作成

Visual studioを開いて、新規Asp.Net Coreウェブアプリプロジェクト作成

asp.core.png

次はwebpackを使いますので、bowerのコポーネントを削除

.bowerrc
bower.json
bundleconfig.json

Vueインストール

とりあえず、vue-cliをインストールしておきます。

nodejsnpmをインストールしていない方は先にインストールのが必要となります。

$ npm install vue-cli --global

では、vuejsの基本パッケージを作成しましょう。

cd [Aps.net Core project folder]
vue init webpack

インストール内でデフォルトの設定をします。
アプリを起動してみましょう。

npm install
npm run dev

vueapp

VueとAsp.Net インテグレート

両方の設定を更新するのが必要となります。

Vueの設定

はじめに、aspnet-webpackのnpmパッケージをインストールする。こちらは、VueとAsp.netのコミュニケーションが必要なものである

npm install aspnet-webpack --save

インストールが終わったら、config/index.jsの中身を更新する。assetsRootの設定はwwwrootになります

...
module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../wwwroot/index.html'), // Set the location of index.html to wwwroot
    assetsRoot: path.resolve(__dirname, '../wwwroot'), // Set the location for compiled static files to wwwroot
...

最後は、Asp.Netプロジェクトのrootにwebpack.config.jsを作成する

"use strict";

var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var devConfig = require("./build/webpack.dev.conf");
var prodConfig = require("./build/webpack.prod.conf");

module.exports = isDevBuild ? devConfig : prodConfig;

Asp.Netの設定

aspnet-webpackaps.net corenugetパッケージMicrosoft.AspNetCore.SpaServicesとなります。
Microsoft.AspNetCore.SpaServicesnugetでインストールしましょう。

Install-Package Microsoft.AspNetCore.SpaServices

最後、設定してみる

startup.cs
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory oggerFactory)
{
  ...

  if (env.IsDevelopment())
  {
    ...

    // Setup WebpackDevMidleware for "Hot module replacement" while debugging
    var options = new WebpackDevMiddlewareOptions() { HotModuleReplacement = true };
    app.UseWebpackDevMiddleware(options);
  }
  else

  ...

  app.UseMvc(routes =>
  {
    routes.MapRoute(
      name: "default",
      template: "{controller=Home}/{action=Index}/{id?}");

    // Setup additional routing for SPA
    routes.MapSpaFallbackRoute(
      name: "spa-fallback",
      defaults: new { controller = "Home", action = "Index" });
  });

では、debugしてマジックを見て見ましょう。

以上の設定がうるさいくてならない方は ⬇︎

npm install -g yo generator-aspnetcore-spa
npm install -g webpack
mkdir web
cd web
yo aspnetcore-spa
# default setting with (vue)
dotnet run

tadaできますね〜〜〜


参考:https://blog.kloud.com.au/2017/02/14/running-vuejs-on-aspnet-core-apps/

外国人で日本語はそんなに正しくないですね。〜_〜 誰か直してくれば嬉しです。(;´∀`)

12
13
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?