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

我们有一个现有的ASP.NET MVC5项目（razor）。我们希望重建一切（在前端使用Vue.js），但由于客户的要求，我们首先必须在现有项目中添加一个新的Vue组件（最好在div中运行）

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

我想听听你的想法。

---

谢谢你，向你致以最诚挚的问候，我们是如何做到的，就是在Vue中将每个razor页面变成自己的迷你前端项目。例如，PageX成为一个名为PageX的新Vue项目。然后，我们将PageX项目创建为一个独立的Vue项目。准备就绪后，每个Vue项目都由Vue Cli使用标准工具构建。构建过程的输出被添加到每个页面的子文件夹中的scripts文件夹中的解决方案中，然后我们将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 ends，现在没有停机时间，我们只需发布对js文件的更改，并在razor上发布引用的更改，所有这些都是在零服务器停机时间下完成的。现在管理前端维护也容易多了，因为我们还利用私有npm存储库来保存共享的js类和vue组件库。

我们已经做了类似于Chad上面描述的事情

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

例如，我们所有的Vue功能都在一个名为VueFeatures的文件夹中。 VueFeatures具有功能1、功能2

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 %>")
    <% } %>

}

@段头{
@渲染部分（“头部”，假）
@渲染样式（“”）
}
@节脚本{
@RenderSection（“脚本”，false）
@渲染脚本（“”）
}

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>

@继承System.Web.Mvc.WebViewPage
@{
布局=GetViewLayout（HttpContext.Current）；
}
@科长{
@渲染部分（“头部”，假）
@渲染脚本（“~/dist/Feature1.css”）
}
@节脚本{
@RenderSection（“脚本”，false）
@RenderScripts（“~/dist/Feature1.js”）
}
@RenderBody（）

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

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

@{
Layout=“~/dist/Feature1/vueaplayout.cshtml”；
}

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

在VueFeatures下添加特征

将功能cshtml的布局设置为dist中相应的布局

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

我在将vue cli集成到现有mvc项目时提到过这一点。

感谢您的支持！ 你的回答解决了我的问题

我在项目结构之外创建了一个视图项目，并将其捆绑到一个网页包中

查看捆绑包vuetify中的build文件夹。这份回购协议对我进行网页包捆绑有很大帮助

在那之后，我按照Chad的建议，将我的网页包嵌入到我项目的一个页面中

<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>

---

我为.NET核心创建了一个模板，展示了这一点，但同样适用于.NET 5

Github：

---

中等：

我会说“取决于现有代码”-vue设计为增量采用，因此，它应该很容易-但如果没有任何现有代码的线索，就很难推荐您应该如何处理它-太棒了！非常感谢。那正是我要找的！很好的答案！！！！！！非常感谢。cshtml文件作为模板是genius