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

【问题标题】：How can we integrate Vue JS with ASP.NET MVC and nuget packages我们如何将 Vue JS 与 ASP.NET MVC 和 nuget 包集成
【发布时间】：2019-02-13 08:34:28
【问题描述】：

我们如何将 Vue JS 与现有的并与 Nuget 包一起使用的 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 文件都很棒..

非常感谢！

【问题讨论】：

标签： javascript asp.net-mvc asp.net-web-api vue.js vuejs2

【解决方案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)，你可以用它做很多很酷的事情，Hot Reload。 check this repo 通过使用 webpack，您将其配置为仅处理 js 文件，它也将处理用于构建的 js 文件，在构建时，每个条目都将被复制到 Scripts/bundle 中，您还需要一些加载器，例如（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 dev server”的每个请求都将被代理到您的“asp.mvc 服务器”。因此，如果我们在 http://localhost:5001 上运行我们的 MVC 应用程序并运行 npm run dev ，在端口 8086 上您应该会看到与我们的 MVC 应用程序相同的输出。

答案： 1：是的，你必须设置 Webpack 或 Gulp。 2.通过使用webpack，你可以为你想要的文件结构做所有事情检查这棵树

-应用程序
--libs
----实用工具
----组件
---------共同点
---------.......
-----页面
---------.....

查看这篇文章
https://medium.com/corebuild-software/vue-js-and-net-mvc-b5cede228626
http://www.lambdatwist.com/dot-net-vuejs/

【讨论】：

【解决方案2】：

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

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

【讨论】：