我们如何将 Vue JS 与 ASP.NET MVC 和 nuget 包集成

Question

我们如何将 Vue JS 与现有的并与 Nuget Package 一起使用的 MVC 项目集成。

尝试过以下方法。

<h3>VueJS 2 in ASP.NET MVC 5</h3>
<div id="aboutPage">
    { { message }}
</div>
<script>
    var aboutPage = new Vue({
        el: '#aboutPage',
        data: {
            message: 'Hello Vue! in About Page'
        }
    });
</script>

问题：

1. 是否需要任何额外的包，例如 - webpack 或 gulp，我们已经有了 MVC 的捆绑配置？

2. 我们如何为每个视图创建单独的文件或设计，例如：

1. 分离服务调用（从客户端调用Web api）

2. 分离出模板文件。

3. 用JS编写的方法或逻辑。

任何带有 VueJS 的 MVC 示例 - 控制器、视图、服务、vue JS 文件都很棒..

非常感谢！

Answer 1

您可以使用 vuejs 购买并将其添加到您的布局中。

 @Scripts.Render("~/node_modules/vue/dist/vue.min.js")

您需要在计算机上安装 Nodejs 才能使用 NPM 和 ES6 功能。

要将 Vue.js 集成到 ASP.NET MVC 中，您需要模块捆绑器（webpack、gulp），可以选择以下选项之一，流行的是 webpack：

1. （Gulp、Browserify），它有一些限制，例如仅支持需要语法处理的资产。而且设置有点复杂。

2. （Webpack），你可以用它做很多很酷的事情，Hot Reload。 使用 webpack 检查此 repo，您将其配置为仅处理 js 文件，并且它也会处理构建的 js 文件，构建时每个条目将被复制到 Scripts/bundle 中，还需要一些加载器，例如 s (vue、scss 、css 和 js）用于 webpack。 检查这个

Webpack 使用 webpack-dev-server 进行开发，它基本上是一个基于 Node.js 的服务器，它提供我们的浏览器可以解释的资产（javascript、css 等）。通常这些资产包括一些开发友好的功能，例如热重载。这些资产没有被缩小，并且与为生产而构建时生成的资产有很大不同。

devServer: {
proxy: {
    '*': {
        target: 'http://localhost:5001',
        changeOrigin: true
    }
}
},

webpack-dev-server 有一项功能可以将请求从一个 url 代理到另一个。在这种情况下，来自“webpack dev server”的每个请求都将被代理到您的“ASP.NET MVC 服务器”。因此，如果我们在 http://localhost:5001 上运行 MVC 应用程序并在端口 8086 上运行 npm run dev ，您应该会看到与 ASP.NET MVC 应用程序相同的输出。

答案：

1. 是的，你必须设置 Webpack 或 Gulp。

2. 通过使用 webpack 你可以得到你想要的文件结构 检查这棵树

   -应用程序 --库 ----实用程序 - - 成分 ---------公共空间 ---------...... -----页数 ---------.....

查看这些文章：

• https://medium.com/corebuild-software/vue-js-and-net-mvc-b5cede228626
• http://www.lambdatwist.com/dot-net-vuejs/

Answer 2

如果您想保留 .cshtml 文件并将 MVC 用作多页面应用程序，您可以查看此模板作为示例或起点。 https://github.com/danijeh/aspnetcore-vue-typescript-template

您可以创建要使用 Vue 增强的页面模块并导入该包。