logo标签列表

在现有的.NET MVC应用程序中，将jQuery替换为VueJS 2的最佳方法是什么？

asp.net-mvcvuejs2vue-componentvue.js
33

我对VueJS非常陌生。

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

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

我应该如何处理这个问题？我从不同的帖子（在线）中得到了过多的思路变化。

请问是否有人可以指导我，给我一些入门指南？

最好提供一份逐步文档，显示如何使用MVC视图中的VueJS单文件组件和打包工具实现hello world页面。

打包似乎是一个复杂的过程。但我愿意在我的代码中使用LESS。

谢谢阅读。

1
我理解单文件 Vue 组件，但打包过程似乎有些过度。我能否有一些工具并指向我拥有 *.vue 组件的文件夹，并编译所有文件。然后将输出文件部署到我的应用程序中正确的文件夹？或者我在这里想得太老套了吗？ - kheya
你需要单文件组件吗？Vue 被吹捧为渐进式框架，你不必使用它们。 - Bert
当我们开始时，对于组件，我们所做的只是创建一个包含常用组件的单个文件，使用字符串模板来引用这些组件，并在页面中包含该脚本。然后在页面中，只需创建一个新的Vue()实例即可开始工作。编辑字符串模板可能有点麻烦，但要入门并不比这更难。 - Bert
我已经两种方式都尝试过。我们有一些.vue文件，现在使用webpack进行编译（虽然我们没有使用样式部分，而是将样式添加到我们的主题中），我也使用了一个纯JavaScript文件或包含脚本部分。.vue文件很棒，但您必须将节点构建过程与msbuild过程集成。 - Bert
发布包括两种方法步骤和示例的答案是否可行？“你好，世界”即可。谢谢。 - kheya
显示剩余2条评论
3个回答
78

极其基础

我所知道的在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 script 外。

使用单文件组件

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

安装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' },
        ],
    }
}

这个配置指定 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>
这将安装必要的npm包，然后运行webpack来构建bundle.js。如果您正在构建项目，则这是必需的步骤。现在您只需要在具有元素#app的视图中包含bundle.js文件即可。您不需要包含vue.js或vue.min.js，因为它们已经包含在bundle中。我们发现，在某些情况下，我们想要使用单个文件组件，但不想将其全部打包到一个脚本中。为了做到这一点，您主要只需要修改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 配置将为每个单独的单文件组件构建一个脚本文件。然后，您可以在使用上述“极其基础”技术的页面上包含该脚本，并通过全局或作为 Vue 的一部分来使用组件。例如，如果我有一个 Modal.vue，我会在 ASP.NET MVC 视图中包含 Modal.js，然后通过以下方式将其公开给 Vue：

Vue.component("Modal", Modal);
或者
new Vue({
    ...
    components:{
        "Modal": Modal
    }
})

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

最后，在开发过程中，您可以打开命令行并运行

webpack --watch

在你的项目中直接进行，每次保存时将构建你的捆绑包(bundle)或单独的组件。

1
非常好的，详尽的回答！ - Peter
太棒了！我感激不尽。我会告诉你结果的。 - kheya
我不需要一个单页面应用程序。我需要将VueJS作为脚本挂载到我的页面上，并利用组件、数据绑定、验证、响应式、过渡等功能。 - kheya
2
我建议您查看 Laravel（PHP）社区。Laravel 是 PHP 的 MVC，从一开始就基本上采用了 Vue。他们有很多指南和教程，包括具有和不具有 webpack 配置的项目设置。我建议您从仅使用脚本开始，然后在熟悉它后，如果需要，再进行 webpack 配置。 - Cristi Jora
太棒了，@Bert！感谢你的帮助 :) - Terje Nygård
显示剩余9条评论
7
我试图按照@Bert发布的文章设置Vue与ASP.NET MVC 5 (.NET 4.5，而不是Core!)，但是遇到了很多问题，所以我找到了另一种方法：
(警告：如果你想使用自己的组件来使用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文件夹添加到您的项目中，并在其中放置两个文件 - 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. 回到在步骤2中打开的Node.js命令提示符，输入webpack并按下回车键，等待构建你的bundle.js，你可以在~/Vue/dist/bundle.js找到它。
  2. 在Visual Studio中构建你的项目并运行它。
简单的代码格式化不起作用 :( 所以我决定将代码示例放入片段中。如果有人能帮忙格式化，请告诉我。 - 1_bug
3
我使用了 @1_bug 提供的很多答案，在我的ASP.NET MVC 4.5项目中设置了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网站（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()
  ]
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接