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

Question

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

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

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

Answer 1

我们做了一些类似于乍得在上面描述的事情。

我们有一个 vue 项目，而不是每页都有独立的项目。 使用 vue-cli，我们配置了多个入口点，这些入口点中的每一个都用于自己的剃刀页面。 此外，为了包含每个页面的脚本，我们设置了一个使用 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。 下面是 Feature1 的快照。

@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/@hyounoosung/integrating-vue-js-2-0-to-net-mvc5-project-f97eb5a5b3ad 。

Answer 2

我们是如何做到的，是在 Vue 中将每个剃刀页面变成自己的迷你前端项目。 例如页面 X 成为一个名为 PageX 的新 Vue 项目。 然后我们将 PageX 项目创建为一个独立的 Vue 项目。 准备好后，每个 Vue 项目都由 Vue Cli 使用标准工具构建。 构建过程的输出被添加到每个页面的子文件夹中的脚本文件夹中的解决方案中，然后我们将 razor 页面更改为使用构建的 Vue 脚本，如下所示

<div id="app"></div>
<script src="~/Scripts/VueProd/PageX/js/chunk-vendors.f32059da.js"></script>
<script src="~/Scripts/VueProd/PageX/js/app.f58ae4b7.js"></script>

剃刀页面的其余部分基本上是空的。 我们还设置了构建过程以将 css 捆绑到 .js 文件中，以方便我们使用。 通过这样做，我们也可以一次只更改一页。

我们在这方面取得了一些巨大的成功。 如果需要，它允许我们完全分离前端。 我们还可以在零停机时间的情况下快速轻松地重新发布 fount 端，我们只需将更改发布到 js 文件并更改并发布 razor 上的引用更改，这一切都在零服务器停机的情况下完成。 现在管理我们的前端维护也容易得多，因为我们还利用私有 npm 存储库来保存共享的 js 类和 vue 组件库。

Answer 3

谢谢您的意见！ 你的回答解决了我的问题。

我在我的项目结构之外创建了一个 View Project 并将其捆绑到一个 webpack 中。

查看webpack-vuetify-sample中的 build 文件夹以捆绑 vuetify。 这个 repo 对我进入 webpack 捆绑提供了很多帮助。

之后，我按照 Chad 的建议将我的 webpack 嵌入到我项目的页面中。

<div id="app"></div>
<script src="~/Scripts/VueProd/PageX/js/chunk-vendors.f32059da.js"></script>
<script src="~/Scripts/VueProd/PageX/js/app.f58ae4b7.js"></script>

Answer 4

我创建了一个模板来展示 .NET Core 的这一点，但同样适用于 .NET 5。

Github： https : //github.com/danijelh/aspnetcore-vue-typescript-template

媒体： https : //medium.com/@danijelhdev/multi-page-net-core-with-vue-js-typescript-vuex-vue-router-bulma-sass-and-webpack-4-efc7de83fea4