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

我是VueJS的新手

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

目前正在使用jQuery进行DOM操作、Ajax请求等

我应该如何处理这个问题？ 我从不同的帖子（在线）中得到了太多不同的想法

有人能给我指点一下吗

一些循序渐进的文档将很好地展示如何使用带有vuejs单文件组件和捆绑的hello world页面（MVC视图）来实现这一点

捆绑似乎是一个复杂的过程。但是我希望在我的代码中使用更少的代码

---

感谢您的阅读

极其基础

据我所知，在ASP.NET中使用Vue的最基本方法就是在项目中包含Vue脚本。您可以使用vue.js Nuget包，该包将vue脚本添加到脚本目录中，并且只在MVC视图中包含开发版本或缩小版本

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

并修改您的Vue模板

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

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

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

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

创建App.vue

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

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

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

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

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

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

Vue.component("Modal", Modal);

或

Webpack是非常可配置的，所以您可能希望采用不同的方法，为每个页面构建一个包

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

webpack --watch

---

在您的项目中，您的捆绑包或单个组件将在每次保存时生成。

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

（警告：如果要将vue.js与自己的组件一起使用，则需要安装node.js（用于npm）、webpack（用于构建捆绑包）和vue loader（用于解析*.vue文件）

安装

运行Node.js命令提示符并导航到Visual Studio项目文件夹（其中放置了*.csproj文件）

键入：

npm init-y

并点击回车键-它应该生成带有依赖项和基本设置的packages.json文件

为Vue添加必要的加载程序（没有这些，*.Vue文件无法解析为捆绑包中的javascript）：

npm安装--保存dev-Vue加载程序Vue模板编译器

添加网页包（全局）并将其保存在我们的package.json文件中：

a）

npm安装-g网页包

b）

npm安装–保存开发人员网页包

最后，将Vue.js添加到项目：

npm安装——保存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"
  }
}

下一步是配置webpack-返回Visual Studio并添加到projectwebpack.config.js文件，并将以下代码粘贴到其中：

module.exports={
条目：'./Vue/index.js'，
输出：{
路径：_dirname，
文件名：'./Vue/dist/bundle.js'
},
devtool:'源映射'，
模块：{
规则：[
{
测试：/\.vue$/,，
排除：/node_模块/，
加载程序：“vue加载程序”
}
]
}
};在我的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网站（），您需要在webpack.config.js文件中引用vue loader插件，如下所示：

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

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

我了解单文件vue组件，但捆绑过程似乎过于繁琐。我可以使用一些工具并指向我有*.vue组件的文件夹并编译所有文件吗。然后将输出文件部署到我的应用程序中的正确文件夹？还是我在想老办法？？你需要单文件组件吗？Vue被吹捧为一个进步的框架；你不必使用它们。我完全赞成简单。我想要一种易于理解和维护的最简单方法。当我们开始使用组件时，我们所做的只是创建一个文件，其中包含常用组件、用于这些组件的字符串模板，并在页面上包含该脚本。然后在页面中，执行一个新的Vue（），您就可以开始比赛了。编辑字符串模板可能是一件痛苦的事情，但要开始它并不比这更难。伯特，您还没有为组件创建.vue文件，然后使用预编译器为组件生成js\css文件或.js文件吗？还有这个项目或应用程序有多大？真的很好，彻底的回答！令人惊叹的！我对你感激不尽。我会让你知道它的进展。我不是在追求一个单一的页面应用程序。我需要将VueJ作为脚本挂接到我的页面上，并利用组件、数据绑定、验证、反应性、转换等优点@k
Vue.component("Modal", Modal);

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

webpack --watch

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

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

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

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