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

Question

我们如何将 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>

问题:

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

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

1. 分离服务调用(从客户端调用Web api)

2. 分离出模板文件。

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

任何带有 VueJS 的 MVC 示例 - Controller 、 View 、服务、vue JS 文件都很棒..

非常感谢!

Answer 1

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

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

您需要在计算机上安装 Nodejs 才能使用 NPM 和 ES6 功能。要将 Vue.js 集成到 .NET MVC 中，您需要模块 bundler (webpack、gulp)，可以选择以下选项之一，流行的是 webpack:

1:(Gulp, Browserify)，它有一些限制，例如仅支持需要语法处理的资源。而且设置有点复杂。

2:(Webpack)，你可以用它做很多很酷的事情，热重载。 check this repo通过使用 webpack，您将其配置为仅处理 js 文件，并且它也会处理用于构建的 js 文件，构建后每个条目将被复制到 Scripts/bundle 中，您还需要一些加载器，例如 ss(vue、scss、css 和 js)对于网页包。 check this

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

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

},

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

答案:1:是的，你必须设置 Webpack 或 Gulp。2.通过使用webpack，你可以得到你想要的文件结构检查这棵树

-app
--libs
----utils
----components
---------commons
---------.......
-----pages
---------.....

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