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

Question

我是 VueJS 的新手

我有一个多页面 ASP.NET MVC 应用程序，我想在其中使用 VueJS(组件、双向绑定(bind)、验证、CRUD 操作)

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

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

谁能指导我并给我一些入门指南？

一些循序渐进的文档会很棒，它展示了如何使用带有 vuejs 单文件组件和捆绑的 hello world 页面(MVC View )执行此操作

捆绑似乎是一个复杂的过程。但我很乐意在我的代码中使用 LESS

感谢阅读

Answer 1

非常基础

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

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

然后在你的 View cshtml中，添加一个脚本 block 即可。

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

其中 #app 指的是您 View 中的一个元素。如果你想使用一个组件，只需将它添加到你的脚本 block 。

<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 文件或类似的文件中，在那里定义所有组件，并将其包含在 View 中以及 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' },
        ],
    }
}

此配置将 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。如果您在构建服务器上构建项目，这是必需的。

现在您只需要将 bundle.js 文件包含在一个 View 中，该 View 具有一个带有 #app 的元素。您不需要包含 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 的一部分在 Vue 中使用该组件。例如，如果我有一个 Modal.vue，我会在 ASP.NET MVC View 中包含 Modal.js，然后通过

将它暴露给 Vue

Vue.component("Modal", Modal);

或

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

Webpack 的可配置性很强，因此您可能希望采用不同的方法并为每个页面构建一个包。

最后，开发运行的时候可以打开命令行

webpack --watch

直接在您的项目中，您的包或单个组件将在您每次保存它们时构建。