在多页现有.NET MVC应用程序中用VueJS 2替换jQuery时的最佳方法

I am very new in VueJS

我是VueJS的新手

I have multi-page ASP.NET MVC app where I want to use VueJS (components, 2-way binding, validation, CRUD operations)

我有多页ASP.NET MVC应用程序，我想使用VueJS（组件，双向绑定，验证，CRUD操作）

Currently using jQuery for DOM manipulation, Ajax requests etc

目前使用jQuery进行DOM操作，Ajax请求等

How should I approach this? I am getting way too much variations in thoughts from different posts (online)

我该怎么办呢？我从不同的帖子（在线）得到了太多的想法变化

Could anyone please guide me and give me some pointers to get started?

有谁可以指导我，并给我一些指导，以便开始？

Some step by step doc will be great that shows how to do this with a hello world page (MVC View) with vuejs single file component and bundling

一些一步一步的文档将是伟大的，显示如何使用vuejs单文件组件和捆绑的hello world页面（MVC View）执行此操作

The bundling seems complicated process. But I would love to use LESS in my code

捆绑似乎很复杂。但我希望在我的代码中使用LESS

Thanks for reading

谢谢阅读

3 个解决方案

#1

Extremely Basic

非常基本

The most basic way to get started I know of with Vue in ASP.NET is just to include the Vue script in your project. You can use the vue.js Nuget package, which will add the Vue scripts to your Scripts directory and just include either the development or minified version in your MVC view.

最基本的入门方式我在ASP.NET中使用Vue知道只是在项目中包含Vue脚本。您可以使用vue.js Nuget包，它将Vue脚本添加到您的Scripts目录中，并在MVC视图中包含开发或缩小版本。

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

Then in your view cshtml, just add a script block.

然后在你的视图cshtml中，只需添加一个脚本块。

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

where #app refers to an element on your view. If you want to use a component, just add it to your script block.

其中#app引用视图中的元素。如果要使用组件，只需将其添加到脚本块即可。

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

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

and modify your Vue template.

并修改您的Vue模板。

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

If you find yourself building a lot of components (which you likely will), extract them into a vue.components.js file or something similar, define all your components there, and include that on your views in addition to the vue script.

如果您发现自己构建了很多组件（您可能会这样做），请将它们提取到vue.components.js文件或类似文件中，在那里定义所有组件，并在vue脚本之外的视图中包含它们。

Using Single File Components

使用单个文件组件

In order to use single file components, you need to integrate the node.js build process for single file components into your ASP.NET MVC build process.

为了使用单个文件组件，您需要将单个文件组件的node.js构建过程集成到ASP.NET MVC构建过程中。

Install node.js. After node.js is installed, install webpack globally.

安装node.js.安装node.js后，全局安装webpack。

npm install webpack -g

Add a package.json to your project. Here is what I use.

将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"
  }
}

I typically create a folder in my project to hold my Vue scripts and .vue files called Vue. Add a file to serve as the entry point for your Vue build process. We can call this index.js (or anything you want).

我通常在项目中创建一个文件夹来保存名为Vue的Vue脚本和.vue文件。添加文件以用作Vue构建过程的入口点。我们可以调用这个index.js（或任何你想要的）。

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

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

Create App.vue.

创建App.vue。

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

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

Add a webpack.config.js to your project. Here is what I use.

将webpack.config.js添加到项目中。这是我使用的。

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

This config specifies index.js as the entry point for webpack to figure out what to include in a bundle.js file, which will be compiled and put in the Vue folder.

此配置指定index.js作为webpack的入口点，以确定要包含在bundle.js文件中的内容，该文件将被编译并放入Vue文件夹中。

In order to compile the bundle.js file whenever the project builds, I modify the project file to include the following.

为了在项目构建时编译bundle.js文件，我修改项目文件以包含以下内容。

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

This will install the necessary npm packages and then run webpack to build the bundle.js. This is necessary if you are building your project on a build server.

这将安装必要的npm包，然后运行webpack来构建bundle.js。如果要在构建服务器上构建项目，则必须执行此操作。

Now you just need to include the bundle.js file on a view that has an element with #app on it. You do not need to include vue.js or vue.min.js. That will be in the bundle.

现在你只需要在一个包含#app元素的视图中包含bundle.js文件。您不需要包含vue.js或vue.min.js.这将是捆绑。

Compile Individual Single File Components

编译单个单个文件组件

We found there were times we wanted to use a single file component, but did not want to bundle it all into a single script. To do this, you mainly need only modify the webpack.config.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' },
        ],
    }
}

This webpack configuration will build a script file for every individual single file component. Then you can just include that script on a page where you are using the "Extremely Basic" technique above and use the component in your Vue by either exposing it globally or as part of the Vue. For example, if I have a Modal.vue, I would include Modal.js on the ASP.NET MVC view and then expose it to Vue by

此Webpack配置将为每个单个文件组件构建一个脚本文件。然后，您可以在您使用上述“极端基本”技术的页面上包含该脚本，并通过全局或作为Vue的一部分公开它来使用Vue中的组件。例如，如果我有一个Modal.vue，我会在ASP.NET MVC视图中包含Modal.js，然后将其公开给Vue

Vue.component("Modal", Modal);

or

要么

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

Webpack is very configurable, so you may want to take a different approach and build a single bundle for each page.

Webpack非常易于配置，因此您可能希望采用不同的方法并为每个页面构建一个捆绑包。

Finally, you can open a command line while you are developing and run

最后，您可以在开发和运行时打开命令行

webpack --watch

in your project directly and your bundle(s) or individual components will be built every time you save them.

直接在您的项目中，每次保存时都会构建您的软件包或单个组件。

#2

I was trying to set up Vue with ASP.NET MVC 5 (.NET 4.5, not Core!) by following a post published above by @Bert, but I have encountered many problems so I found another way:

我试图通过@Bert上面发布的帖子来设置Vue与ASP.NET MVC 5（.NET 4.5，而不是Core！），但是我遇到了很多问题所以我找到了另一种方法：

(WARNING: if you want use vue.js with own components you need install node.js - for npm, webpack - for building bundles and vue-loader - for parsing *.vue files)

（警告：如果你想使用带有自己组件的vue.js，你需要安装node.js - 用于npm，webpack - 用于构建bundle和vue-loader - 用于解析* .vue文件）

1. Install node.js
2. 安装node.js
3. Run Node.js command prompt and navigate to your Visual Studio project folder (where is placed the *.csproj file)
4. 运行Node.js命令提示符并导航到Visual Studio项目文件夹（放置* .csproj文件的位置）
5. Type: npm init -y and hit enter - it should generate packages.json file with dependencies and basic settings
6. 键入：npm init -y并按Enter键 - 它应生成包含依赖项和基本设置的packages.json文件
7. Add necessary loaders for Vue (without these, *.vue files can't be parsed to javascript in bundle): npm install --save-dev vue-loader vue-template-compiler
8. 为Vue添加必要的加载器（没有这些，* .vue文件无法解析为包中的javascript）：npm install --save-dev vue-loader vue-template-compiler

9. Add webpack (globally) and save it in our package.json file:

   添加webpack（全局）并将其保存在package.json文件中：

   a) npm install -g webpack

   a）npm install -g webpack

   b) npm install –-save-dev webpack

   b）npm install --save-dev webpack

10. Finally, add Vue.js to project: npm install --save vue

    最后，将Vue.js添加到项目：npm install --save vue

For now, my package.json looks like:

现在，我的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"
  }
}

7. The next step is configuring webpack - go back to Visual Studio and add to project webpack.config.js file, and paste the following code to it:
8. 下一步是配置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'
            }
        ]
    }
};

8. Add Vue folder to your project and place two files in it - index.js and App.vue:
9. 将Vue文件夹添加到项目中并在其中放置两个文件 - index.js和App.vue：

index.js:

index.js：

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

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

App.vue:

App.vue：

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

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

9. Sample index.cshtml file:
10. 示例index.cshtml文件：

@{
    ViewBag.Title = "Home Page";
}

<div id="app">

</div>

@section scripts{
    <script src="~/Vue/dist/bundle.js"></script>
}

10. Go back to Node.js command prompt opened in 2) and run webpack by typing: webpack, hit enter and wait for build your bundle.js which you can find in ~/Vue/dist/bundle.js
11. 回到2）中打开的Node.js命令提示符并输入webpack，输入：webpack，按回车并等待构建你的bundle.js，你可以在〜/ Vue / dist / bundle.js中找到
12. Build your project in Visual Studio and run it.
13. 在Visual Studio中构建项目并运行它。

#3

I used a lot of the answer as provided by @1_bug to set up Vue Single File Component bundling with webpack in my ASP.NET MVC 4.5 project.

我使用了@ 1_bug提供的大量答案来在我的ASP.NET MVC 4.5项目中使用webpack设置Vue单文件组件。

However, when trying to build the bundle, using the webpack command, I received the following error :

但是，在尝试使用webpack命令构建捆绑包时，我收到以下错误：

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

Looking into this, I found that the latest update of vue-loader (v15), requires a slight change to the webpack.config.js file.

看看这个，我发现vue-loader（v15）的最新更新需要对webpack.config.js文件稍作修改。

From the vue-loader website (https://vue-loader.vuejs.org/migrating.html), you need to reference the vue-loader plugin in the webpack.config.js file, as below:

从vue-loader网站（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()
  ]
}