mrtska.net

ASP.NET CoreでクライアントにVue.jsを使う


Posted at:

執筆時点で最新のASP.NET Core 2.1の情報です。

必要なもの

  • Visual Studio 2017
    • インストールするワークロードにASP.NET と Web開発 と Node.js開発を入れる
  • ASP.NET Coreについての基本知識
  • Vue.jsについての基本知識
  • npmについての基本知識
  • webpackについての基本知識

手順

新しいプロジェクトでASP.NET Core Web アプリケーションを作成する。

image.png

それぞれ必要なものを選択する。ここではMVCを選んだ。

image.png

プロジェクトを右クリックしてpackage.jsonを作成する。 image.png

packge.jsonを書いていく。Ctrl+Spaceで補完も出るので直接入力するかどこからかコピペしてくる。

{
  "devDependencies": {
    "webpack": "4.23.1",
    "webpack-cli": "3.1.2"
  },
  "dependencies": {
    "vue": "2.5.17"
  }
}

TypeScriptなどを使いたい場合はwebpackでts-loaderを使えば良い。ここはASP.NET Coreはあまり関係が無いので省略。

Ctrl+Sを押すとVisual Studioが自動でnpm installしてくれる。

終わるとソリューションエクスプローラの依存関係の中にNPMが追加される。

npmのコマンドを叩くには、NPM Task Runnerを使うと非常に便利。

image.png

インストールするとタスクランナーエクスプローラーにpackage.jsonが追加される。

package.jsonのscriptsに書いたものも表示されるのでscriptsにいろいろ書いておけば非常に便利。

webpackの設定

webpack.config.js

var path = require("path");
module.exports = {
    entry: {
        index: "./Contents/index.js"
    },
    output: {
        path: `${__dirname}/wwwroot/js`,
        filename: "[name].js"
    },
    module: {
        rules: [

            // 適宜必要なものを記載
        ]
    },
    resolve: {
        extensions: [".js"],
        modules: [
            path.resolve("node_modules")
        ],
    }
}

outputのfilenameを[name].jsとすることによってentryのキーの部分+.jsという名前で出力出来る。

JavaScriptファイルを作成する。

今回はContents/index.jsにした。 この時点でindex.jsに

import Vue from "vue"

と書くとVueの補完が完璧に表示される。 image.png

package.jsonのscriptsに

webpack: "webpack --mode=developement"

を追加してタスクランナーエクスプローラーから実行する。

wwwroot/js/index.jsが作成された。

image.png

あとはASP.NET CoreのViewからやりたい放題出来る。

ここまでくればそれぞれ各自でカスタマイズして使うことが出来るのではないだろうか。

TypeScriptを使いたい場合は、package.jsonにtypescriptとts-loaderを追加してwebpack.config.jsのruleを追記する。

ここはwebpackの話なのでググればいくらでも出てくるかと。

間違いなどありましたら Twitter までご連絡いただけるとありがたいです。


Tag: ASP.NET Core, Vue.js, webpack


Comment