web-dev-qa-db-ja.com

複数ページの既存の.NET MVCアプリケーションでjQueryをVueJS 2に置き換える場合の最適なアプローチ

私はVueJSが初めてです

VueJS（コンポーネント、双方向バインディング、検証、CRUD操作）を使用するマルチページASP.NET MVCアプリがあります

現在、DOM操作、AjaxリクエストなどにjQueryを使用しています

これにどのようにアプローチすればよいですか？異なる投稿（オンライン）からの考え方のバリエーションが多すぎます

誰も私を案内して、開始するためのいくつかの指針を教えてもらえますか？

いくつかのステップバイステップドキュメントは、vuejs単一ファイルコンポーネントとバンドリングを使用してhello worldページ（MVCビュー）でこれを行う方法を示す素晴らしいものになります。

バンドルは複雑なプロセスのようです。しかし、私は私のコードでLESSを使用したいです

読んでくれてありがとう

asp.net-mvcvuejs2vue-componentvue.js
26
kheya

非常に基本的な

ASP.NETでVueを使用して開始する最も基本的な方法は、プロジェクトにVueスクリプトを含めることです。 vue.js Nugetパッケージを使用すると、VueスクリプトをScriptsディレクトリに追加し、MVCビューに開発バージョンまたは縮小バージョンを含めることができます。

<script src="~/Scripts/vue.min.js"></script>

次に、cshtmlビューで、スクリプトブロックを追加します。

<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello from Vue"
        }
    })
</script>

ここで、#appはビューの要素を指します。コンポーネントを使用する場合は、スクリプトブロックに追加するだけです。

<script>
    Vue.component("child", {
        template:"<h1>I'm a child component!</h1>"
    })

    new Vue({
        el: "#app",
        data: {
            message: "Hello from Vue"
        }
    })
</script>

Vueテンプレートを変更します。

<div id="app">
    {{message}}
    <child></child>
</div>

多くのコンポーネントを作成する場合（おそらくそうするでしょう）、それらをvue.components.jsファイルなどに抽出し、そこにすべてのコンポーネントを定義し、vueスクリプト。

単一ファイルコンポーネントの使用

単一ファイルコンポーネントを使用するには、単一ファイルコンポーネントのnode.jsビルドプロセスをASP.NET MVCビルドプロセスに統合する必要があります。

node.js をインストールします。 node.jsをインストールしたら、webpackをグローバルにインストールします。

npm install webpack -g

Package.jsonをプロジェクトに追加します。これが私が使用するものです。

{
  "version": "1.0.0",
  "name": "vue-example",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-env": "^1.1.8",
    "css-loader": "^0.26.1",
    "style-loader": "^0.13.1",
    "vue-loader": "^11.1.0",
    "vue-template-compiler": "^2.1.10",
    "webpack": "^2.2.0"
  },
  "dependencies": {
    "vue": "^2.2.1"
  }
}

通常、プロジェクトにフォルダーを作成して、VueスクリプトとVueという.vueファイルを保持します。 Vueビルドプロセスのエントリポイントとして機能するファイルを追加します。このindex.js（または必要なもの）を呼び出すことができます。

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    render: h => h(App)
})

App.vueを作成します。

<template>
    <div id="app">
        {{msg}}
    </div>
</template>

<script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
</script>

Webpack.config.jsをプロジェクトに追加します。これが私が使用するものです。

module.exports = {
    entry: "./Vue/index.js",
    output: {
        path: __dirname,
        filename: "./Vue/bundle.js",
    },
    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue-loader' },
        ],
    }
}

この構成では、webpackのエントリポイントとしてindex.jsを指定して、bundle.jsファイルに含めるものを見つけます。このファイルは、コンパイルされてVueフォルダーに配置されます。

プロジェクトがビルドされるたびにbundle.jsファイルをコンパイルするために、プロジェクトファイルを変更して以下を含めます。

<Target Name="RunWebpack">
  <Exec Command="npm install" />
  <Exec Command="webpack" />
</Target>
<Target Name="BeforeBuild" DependsOnTargets="RunWebpack"></Target>

これにより、必要なnpmパッケージがインストールされ、webpackが実行されてbundle.jsがビルドされます。これは、ビルドサーバーでプロジェクトをビルドする場合に必要です。

次に、#appを含む要素を持つビューにbundle.jsファイルを含めるだけです。あなたはnotvue.jsまたはvue.min.jsを含める必要はありません。それはバンドルになります。

個々の単一ファイルコンポーネントをコンパイル

単一のファイルコンポーネントを使用したいこともありましたが、すべてを単一のスクリプトにバンドルしたくありませんでした。これを行うには、主にwebpack.config.jsを変更するだけです。

const fs = require("fs");
const path = require("path");

// build an object that looks like 
// {
//      "filename": "./filename.vue"
// }
// to list the entry points for webpack to compile.
function buildEntry() {
    const reducer = (entry, file) => { entry[file.split(".").shift()] = `./Vue/${file}`; return entry; };

    return fs.readdirSync(path.join(__dirname, "Vue"))
        .filter(file => file.endsWith(".vue"))
        .reduce(reducer, {});
}

module.exports = {
    entry: buildEntry(),
    output: {
        path: path.join(__dirname, "Vue"),
        filename: "[name].js",
        library: "[name]"
    },
    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue-loader' },
        ],
    }
}

このwebpack構成は、個々の単一ファイルコンポーネントごとにスクリプトファイルを作成します。次に、上記の「Extremely Basic」テクニックを使用しているページにそのスクリプトを含めるだけで、Vueのコンポーネントをグローバルに公開するか、Vueの一部として使用できます。たとえば、Modal.vueがある場合、ASP.NET MVCビューにModal.jsを含め、それをVueに公開します

Vue.component("Modal", Modal);

または

new Vue({
    ...
    components:{
        "Modal": Modal
    }
})

Webpackは非常に構成可能なので、異なるアプローチを採用して、ページごとに1つのバンドルを構築することができます。

最後に、開発および実行中にコマンドラインを開くことができます

webpack --watch

プロジェクト内で直接保存し、保存するたびにバンドルまたは個々のコンポーネントが構築されます。

68
Bert

@Bertが上記で公開した投稿に従って、ASP.NET MVC 5（.NET 4.5、Core！ではない）でVueを設定しようとしましたが、多くの問題に遭遇したので見つけました別の方法：

（警告：独自のコンポーネントでvue.jsを使用する場合は、node.jsをインストールする必要があります-npm、webpack-バンドルの構築およびvue-loader-* .vueファイルの解析用）

  1. インストール node.js
  2. Node.jsコマンドプロンプトを実行し、Visual Studioプロジェクトフォルダーに移動します（*。csprojファイルが配置されます）
  3. タイプ：npm init -yおよびEnterキーを押します-依存関係と基本設定を含むpackages.jsonファイルを生成する必要があります
  4. Vueに必要なローダーを追加します（これらがないと、*。vueファイルをバンドルのjavascriptに解析できません）：npm install --save-dev vue-loader vue-template-compiler

  5. Webpackを（グローバルに）追加し、それをpackage.jsonファイルに保存します。

    a）npm install -g webpack

    b）npm install –-save-dev webpack

  6. 最後に、プロジェクトにVue.jsを追加します：npm install --save vue

今のところ、私のpackage.jsonは次のようになっています。

{
  "name": "VueExample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue-loader": "^14.2.1",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.2.0"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}
  1. 次のステップは、構成webpack-Visual Studioに戻ってプロジェクトwebpack.config.jsファイルに追加し、次のコードを貼り付けます。
module.exports = {
    entry: './Vue/index.js',
    output: {
        path: __dirname,
        filename: './Vue/dist/bundle.js'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            }
        ]
    }
};
  1. Vueフォルダーをプロジェクトに追加し、その中に2つのファイルを配置します-index.jsおよびApp。 vue：

index.js：

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    render: h => h(App)
});

App.vue：

<template>
    <div id="app">
        {{msg}}
    </div>
</template>

<script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
</script>
  1. サンプルindex.cshtmlファイル：
@{
    ViewBag.Title = "Home Page";
}

<div id="app">

</div>

@section scripts{
    <script src="~/Vue/dist/bundle.js"></script>
}
  1. Node.jsコマンドプロンプト2）で開いた状態に戻り、webpackと入力してwebpackを実行します。 Enterキーを押して、ビルドを待つbundle.jsこれは〜/ Vue/dist/bundle.jsにあります
  2. Visual Studioでプロジェクトをビルドして実行します。
5
1_bug

ASP.NET MVC 4.5プロジェクトで、@ 1_bugが提供する多くの回答を使用して、Vue Webpackに単一ファイルコンポーネントバンドルを設定しました。

ただし、webpackコマンドを使用してバンドルを構築しようとすると、次のエラーが表示されました。

"vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config."

これを調べると、vue-loaderの最新の更新（v15）では、webpack.config.jsファイルを少し変更する必要があることがわかりました。

Vue-loader Webサイト（ https://vue-loader.vuejs.org/migrating.html ）から、webpack.config.jsファイルでvue-loaderプラグインを参照する必要があります。以下：

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}
2
Marek