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

Question

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

尝试使用以下方法。

<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集成到.NET MVC中，您需要模块捆绑器（webpack，gulp），可以选择以下选项之一，其中流行的是webpack：

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

2：（Webpack），您可以使用它进行很多有趣的操作，即热重装。 通过使用webpack 检查此仓库，您将其配置为仅处理js文件，它也将处理js文件进行构建，在构建时，每个条目都将复制到Scripts / bundle内，此外，您还需要一些加载程序，例如ss（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开发服务器”的每个请求都将被代理到您的“ asp.mvc服务器”。 因此，如果我们在http：// localhost：5001上运行我们的MVC应用程序，并在端口8086上运行npm run dev，您应该会看到与我们的MVC应用程序相同的输出。

答案：1：是的，您必须设置Webpack或Gulp。 2.通过使用webpack，您可以检查想要的文件结构的所有内容

-app
--libs
---- utils的
- - 组件
---------公地
---------.......
-----页
---------.....

检查这篇文章
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/danijelh/aspnetcore-vue-typescript-template

您可以创建要使用Vue增强的页面模块，然后导入该捆绑包。