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>

问题：

是否需要任何其他软件包-webpack或gulp，我们已经有了MVC的捆绑包配置？

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

分隔服务调用（从客户端调用Web api）
分离出模板文件。
使用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），您可以使用它进行很多有趣的操作，即热重装。 check this repo 通过使用webpack，您可以将其配置为仅处理js文件，并且也将处理js文件进行构建，在构建时，每个条目都将复制到Scripts / bundle中，并且还需要一些加载程序，例如s（vue，scss，css和js）用于webpack。 check this

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增强的页面模块并导入该捆绑包。

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

2 个答案: