将 Vue.js 集成到现有 ASP.NET MVC5 项目的最佳方式

Question

我们有一个现有的 ASP.NET MVC5 Projekt (razor)。我们想要重建一切（使用 Vue.js 作为前端），但由于客户要求，我们首先必须将一个新的 Vue 组件放入现有的 Projekt 中（最好在 div 中运行）。

我们也希望在新应用程序中重用 Vue 组件，因此我们决定将 Vue 组件放入自己的项目中。将 Vue 组件集成到现有项目中的最佳且最直接的方法是什么？我听说过几个选项：IFrame 或将组件构建到 npm 包中。

我很想听听一些想法。谢谢您最好的问候

Answer 1

我们做了与乍得上述描述类似的事情。

我们没有每页有独立的项目，而是有一个 vue 项目。使用 vue-cli，我们配置了多个入口点，每个入口点都在其自身的 razor 页面中使用。此外，为了包含每个页面的脚本，我们使用 razor cshtml 作为模板设置了一个流程。

对于例如。我们所有的 Vue 功能都位于名为 VueFeatures 的文件夹中。VueFeatures 有Feature1、Feature2

vue.config.js

foreach (folder in VueFeatures) {
 entry: folder + '/main.js',
 template: './VueAppLayout.cshtml',
 filename: './' + folder + '/VueAppLayout.cshtml'
}

上面的作用是为Feature1和Feature2创建一个入口点，并在dist文件夹中的Feature1/VueAppLayout.cshtml和Feature2/VueAppLayout.cshtml中生成脚本。

模板 VueAppLayout.cshtml 看起来像这样

@section Head{
    @RenderSection("Head", false)
    <% for (var chunk in htmlWebpackPlugin.files.css) { %>
    @RenderStyles("<%= htmlWebpackPlugin.files.css[chunk] %>")
    <% } %>
}

@section Scripts{
    @RenderSection("Scripts", false)
    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
    @RenderScripts("<%= htmlWebpackPlugin.files.chunks[chunk].entry %>")
    <% } %>

}

npm build 的输出将为每个功能生成以下格式的 cshtml。下面是功能 1 的快照。

@inherits System.Web.Mvc.WebViewPage

@{
    Layout = GetViewLayout(HttpContext.Current);
}

@section Head{
    @RenderSection("Head", false)
    @RenderScripts("~/dist/Feature1.css")
}

@section Scripts{
    @RenderSection("Scripts", false)
    @Helper.RenderScripts("~/dist/Feature1.js")
}
<div>
    @RenderBody()
</div>

现在为了包含这些脚本，我们利用 MVC 布局。每个功能都有自己的 cshtml 页面。所以对于Feature1，会有Feature1.cshtml，在Feature1.cshtml中，我们只需要把为该feature生成的VueAppLayout.cshtml设置为Layout即可。以下是Feature1.cshtml的代码

@{
    Layout = "~/dist/Feature1/VueAppLayout.cshtml";
}
<div id="app"></div>

这样，我们添加的任何新功能，我们需要做的就是

1. 在 VueFeatures 下添加该功能
2. 将功能 cshtml 的布局设置为 dist 中相应的布局。

这可以防止开发人员手动包含脚本并在每次进行更改时更改时间戳。

当我将 vue cli 集成到现有的 mvc 项目时，我提到了这个https://medium.com/@hyunoosung/integrating-vue-js-2-0-to-net-mvc5-project-f97eb5a5b3ad 。