如何设置 ASP.NET Core + Vue.js？

Question

我需要将 Vue.js 与一些 ASP.NET Core MVC 视图集成。我选择了 Vue.js 而不是其他替代方案，因为它似乎更简单——“只需通过 <script> 标签添加它”，他们说。无需学习 Gulp/Grunt/Webpack/Browserify/等。

事实证明这是错误的。在我第一次尝试处理日期时，我尝试了一些扩展名，如vue-moment 和vue-datetime-picker，取自官方curated list of awesome things related to Vue.js，但我在这里碰壁了。虽然第一个不要求使用require() JS 语法（CommonJS？），但第二个没有它就无法工作。 'use babel' 和 imports/exports 发生了其他扩展，这是需要编译的 ECMAScript 6。所以，大多数 Vue.js 库和工具确实需要编译器，加上 require() 语法，以及来自 Node 世界的所有东西？

我应该如何设置我的项目以使用 ASP.NET Core MVC + Vue.js，以便我可以使用 Vue 插件（可以require(stuff)）开发许多小型 Vue 应用程序？

Answer 1

当我问到上述问题时，我完全迷失了。我花了几天时间，我仍然没有完整的图片。我很确定2016 is a hard year to learn JavaScript。

我想使用 Vue.js，因为它比其他选择更简单。更少的仪式，更少的样板，更少的代码。它被标记为 Progressive Framework... 对！但只是到了一定程度。 Vue.js 并没有解决构建系统的 JavaScript 生态系统碎片化问题。

因此，您将不得不选择一方：您需要 JavaScript 模块和构建系统吗？

选项 1：保持简单：避免使用 JS 模块并构建系统。

走这条路的原因：

• 您没有多少天可以学习A LOT 的东西。 （配置捆绑器、npm+package 依赖地狱、ES6 的东西。）
• 您不想制作前沿的单页应用程序。在几个 HTML 页面中嵌入 Vue.js 似乎就足够了。
• HTTP/2 正在成为主流，因此 Webpack 或 Browserify 之类的打包工具提供的好处会更少，至少在性能方面是这样。
• Eventually ES6 模块将直接在浏览器中得到支持，因此我们不需要将任何 最新 JavaScript 构建到 浏览器兼容 JavaScript 中。

不用花时间学习几年后可能会过时的东西，您将节省很多时间。

如果你遵循这条路，有几点建议：

• 只需使用 <script> 标签添加 JS 库。
• 仅使用浏览器就绪的 JavaScript 库。使用 require() 或 UMD 前缀 (function (root, factory) { 的代码需要您设置模块（因此除非您设置 CommonJS，否则它不是浏览器就绪的）。带有 import/export 语句的 JS 文件是用 ES6 编写的，所以也要避免它们。
• 使用 Bower 下载浏览器就绪的库。避免使用 NPM（这意味着要有一个模块系统）。

警告：您将无法使用高级 Vue.js 功能，例如 single-file components 或 Vue Router，但这没关系。您将不得不手动执行一些操作。

选项 2：学习 JavaScript 模块 + 构建系统。

准备几天学习而不是编码。我只会简要解释 Webpack 如何为我工作。 Browserify 也可以，但我没试过。

我建议您花一些时间了解JavaScript modules are 的内容。然后学习构建它们并打包它们：我使用了 Webpack。它的文档不是很好，所以对我有用的是一步一步地遵循它的tutorial。

此时，您可能已经听说 Webpack ALSO 有一个内置的 Web 服务器，具有“热模块重载”功能。这是仅用于开发的静态文件的 Web 服务器。它的好处是每当你编辑一个 JS 模块时，浏览器会自动应用更改而无需刷新。这是一个非常好的但可选的功能。问题：这个内置的网络服务器与我们的网络服务器（Kestrel）竞争。因此，如果您想在开发过程中尝试此功能，请使用 Microsoft 的 JavaScriptServices repo 提供的 Webpack ASP.NET Core middleware。在那里你会找到我目前正在使用的WebApplicationBasic template。我解剖了它，去掉了它的大部分部分，通过尝试使用它，我慢慢理解了每个部分最初的用途。

在使用 Webpack 时，您将主要使用 3 个工作流程：

• 内置开发模式：创建大文件，方便调试。将它与“watch-mode”一起使用，因此每当您修改文件时，都会触发一个新的 Webpack 构建。
• 内置生产模式：创建小型压缩文件。对于“dotnet 发布”很有用。
• 使用 Webpack 的 Web 服务器和热模块重新加载与 Webpack ASP.NET Core 中间件意味着您的应用程序将在后台运行 Webpack、构建并监视源文件的更改。编译输出不写入磁盘，只保存在内存中并通过 HTTP 提供。 JavaScriptServices 中间件将来自 Kestrel 的请求转发到 Webpack 的 Web 服务器以完成这项工作。

无论你使用什么 Webpack 配置，你都必须在你的 Webpack 配置中包含“vue-loader”。你可能会受到Vue’s webpack-simple template的启发。

我没有涵盖我想要的所有内容，但是这个主题太广泛了，我需要回到编码。请留下一些反馈。

Answer 2

我迟到了，但现在有一个可用于 .NET Core 的模板，您可以使用单个命令构建它。在安装了 .NET Core 的 Windows 机器上，只需创建一个空文件夹，然后在该文件夹中运行此命令以显示可用模板列表：

dotnet new

如果你没有所有的模板，你只需要运行这个来安装 SPA 模板：

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

这是一个新的 Vue 应用程序：

dotnet new vue

在几毫秒内，一个全新的 Vue.js 单页 Web 应用程序将使用带有控制器、视图等的有效 .NET Core 后端构建。这非常棒。只需在 VS 或 VS Code 中打开项目即可。

还有 Aurelia、Angular、Knockout 和 React 的模板！您可以构建它们并比较它们如何解决相同的问题。 Angular 甚至可以开箱即用地进行服务器端预渲染！

我知道 .NET Core 有一段路要走，但它正变得越来越棒！

Answer 3

首先，免责声明：我找不到真正适合我需要的东西，所以我从头开始整理了一个解决方案。看到最后。

您通过<script> 标签询问是否包含 Vue（在这种情况下是 CDN 构建）。 但是，您还提到了使用 Babel 和 ES6 模块功能。在这种情况下，我建议将 Webpack 用于客户端应用程序，它将使用 Babel 编译您的 ES6，允许您使用模块和组件，并使用模板！您还可以重新加载热模块（编辑源代码并实时查看客户端应用程序中的更改！），Webpack 会将您的 SPA 捆绑到静态 HTML5 应用程序中。

Vue.js 官方文档指向their own Webpack template。

所以您可以独立运行 Webpack 开发服务器和 ASP.NET Core 应用程序，如果这符合您的需求，但是有一个更好的解决方案可以使开发更加简化：

Microsoft 的开源 JavaScriptServices 允许您从 ASP.NET Core 执行 Node.js，并且他们有一些 Webpack 中间件，可以在调试构建期间将 Webpack 开发服务器集成到您的应用程序中。

他们为 Angular 2 提供官方模板，甚至还有一个标有 Vue.js 的模板，但 Vue 模板只是官方的 Webpack 模板，没有任何与 .NET 的集成；这就像独立服务器。

我找不到为 Vue.js 执行此操作的任何模板，因此我将一个示例 ASP.NET Core 应用程序放在一起，该应用程序将 Webpack 开发中间件与 Vue.js Webpack 应用程序一起加载。当 .NET Core 服务器在开发模式下运行时，您可以编辑 Vue 源代码，更改将通过快速增量补丁反映出来，而无需重新构建整个应用程序。在发布模式下，.NET Core 将使用预构建的 Webpack 输出。你可以在 GitHub 上找到它：

https://github.com/0xFireball/YetAnotherShrinker

上面链接的存储库有一个使用 NancyFx、axios、Vue.js 和 Vue Material 的完整应用程序演示，并且是一个简单的 URL 缩短器。如果您想要一个可以轻松添加到现有应用程序的更简单设置的步骤，请查看this blog post of mine。

强制性披露：我写了那篇博文。

Answer 4

也许有人会发现此信息有帮助。

以下是一些可用于快速项目设置的入门模板。

第一个为您提供了具有一些预定义架构的多项目解决方案。这个模板比这里已经提到的 JavaScriptServices 解决方案更接近现实世界的项目。它提供了域层、存储库层等。请注意，这是一个 Yeoman 生成器，它使用 TypeScript。 https://github.com/vue-typed/generator-vue-net-core

第二个只是 GitHub 上的一个项目，如果你想使用它，你应该克隆它。它不是 Yeoman 生成器，我认为这很遗憾，但我发现这个模板中的结构比第一个更好。此外，它还有很多不错的小东西，比如一些异常过滤器，你很可能仍然会这样做。如果你是初学者，这个模板简直是天赐之物。推荐在 awesome-vue 页面上使用此模板。这是链接： https://github.com/mrellipse/toucan

Answer 5

我创建了这个结合了 .NET MVC 和 Vue.js 的模板。您可以使用整个 Vue 生态系统，但如果您不希望它出现在任何页面上，您可以选择退出。

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

您可以将其用作示例或起点。

Answer 6

您可以从这个简单的guide 尝试以下步骤。

1. 设置 npm 配置文件（package.json）

以下是我将使用的 npm 包：

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3",
    "vuex": "^2.1.1"
  }
}

1. 安装 npm 包

打开命令提示符并转到应用程序的根文件夹，然后 使用命令从你的 package.json 文件安装 npm 包集 'npm install'，不带引号。

1. 设置 Gulp

安装 npm 包后，您现在可以设置 Gulp 文件。你 将需要添加一个 Gulp 配置文件 (gulpfile.js)。稍后的 我们将创建 Vue JS，我们将其称为 vueApp.js 使用下面的代码。第一个论点是公众 输出目录，另一个是源目录。更多 Webpack详情点击here。

var elixir = require('laravel-elixir');



require('laravel-elixir-vue-2');

elixir(function (mix) {
    mix.webpack('vueApp.js', 'wwwroot/js/dist', 'wwwroot/js');
});

4. 创建 Vue JS 文件

在您的 ASP.NET Core Web 应用项目解决方案资源管理器中，转到 wwwroot 并添加一个“js”文件夹，如果它不存在，则再次添加一个新的 名为“dist”的文件夹。现在，一旦文件夹设置完成，添加一个新的 名为“vueApp.js”的“js”文件夹中的 JavaScript 文件。

5. 在您的 Vue JS 文件中开始编码

您现在可以开始编码了。在下面的示例中，我们将显示 指示 Vue.js 正在运行的警报。

import Vue from 'vue'

new Vue(
    {
        el: '#app',
        data() {
            message:'hello world using Vue.js on ASP.NET Core MVC.'
        },
        mounted() {
            console.log(this.message);
        }
    });

6. 将 Vue JS 应用到 Razor 视图或 HTML

打开你的布局页面并用 div 包裹你的 body 标签的内容 和一个“app”的ID。我们将使用“app”，因为那是我们使用的 id 标签 在我们第 5 步的示例代码中。名称“app”不是必需的，您可以 将其更改为您想要的名称。最后添加对 Vue JS 文件的引用。 请务必移出脚本引用的“app”div 以防止出错。

<body>

<div id="app">

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Project.Payrole</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
                @await Html.PartialAsync("_LoginPartial")
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2017 - Project.Payrole</p>
        </footer>
    </div>

</div>

<environment names="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>

<environment names="Staging,Production">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
    </script>
    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

<script src="~/js/dist/vueApp.js" asp-append-version="true"></script>



    @RenderSection("Scripts", required: false)
</body>

1. 运行 Gulp

现在我们已经设置了 Vue.js 配置并将其应用到我们的 Razor 视图，我们需要运行 Gulp 来执行我们设置的内容 我们的 gulp 文件。就像在第 2 步中一样，转到您的根文件夹并打开一个命令 提示然后执行命令'npm run dev'，再次没有 引号。

8. 运行

现在运行您的 ASP.NET Core MVC 应用程序并检查最后一步 Web 浏览器的控制台。您现在应该可以看到该消息 我们在第 5 步中设置。

（我在博文中写了该指南以供需要时参考：D）

Answer 7

我参加这个聚会也迟到了，但我相信在过去一年或更短的时间里发生了很多变化。鉴于 ES6 模块规范（以及动态模块）现在具有相对广泛的浏览器支持（请参阅 CanIUse），将 Vue.js 集成到 ASP.NET MVC Razor 视图中的选项现在要好得多。我学到的关于 Vue.js 的一件事是最好放弃关于 jQuery 意义上的“插件”的先入之见。如果你像我一样来自 jQuery 世界（没有 Angular 或 React 经验），你必须坐下来学习 Vue 的组件模型（甚至是 SFC；尽管在这种情况下你不需要它们，它们有助于定义全局）。这需要对 ES6（ECMAScript 2015）有很好的掌握。

迭代和增量方法是，如果您想开始学习和利用 Vue 最重要的资产之一（易于 CDD - 组件驱动的开发），那么只需在脚本中添加“完整”构建（参见 guide）标签。使用 ES6 模块语法（导入/导出），您可以构建自己的组件库，这些组件可以插入到您需要的任何地方；不需要 Webpack 或转译。这确实是一个很棒的开发，因为您可以涉足 Vue.js，使用组件化的最佳实践，而无需承担将 Webpack 和 Babel 添加到您的 .NET 项目的初始（繁重）学习曲线。而且，作为额外的奖励，稍后当您需要使用现代工具和工作流程（NPM、Webpack、测试、HMR、VS Code 等）来提升您的游戏时，您的许多组件都经过测试并准备就绪。

本质上，您构建并附加根 Vue 实例（也称为 Vue 组件）到 DOM 中的元素。一旦你明白一切都是一个组件，那么你就会有信心深入挖掘像 vue-moment 和 vue-datetime-picker 这样的开源包，并通过模块语法导入它们或学习它们以合并到你自己的自定义组件中。

Answer 8

我找到了一种在 ASP.NET Core Web 应用程序中创建单个文件 Vue 组件的方法，方法是将它们存储为共享的 Razor 视图并在项目中作为 Partials 引用。这种方式不需要使用任何 JavaScript Bundles 这是一个非常简单的解决方案，并且与 Vue v2.6.x 完美配合。

这是一个简单的单文件 Bootstrap Card Vue 组件 (_Card.cshtml)。

<style>
    .card {
        width: 15rem;
    }
</style>
<script type="text/javascript">
    Vue.component('vue-card', {
        props: {
            id: String,
            name: String,
            img: String
        },
        template: '#vue-card-template'
    });
</script>
<script type="text/template" id="vue-card-template">
    <div v-bind:id="id" v-bind:name="name">
        <div class="card">
            <img v-bind:src="img" class="card-img-top p-4 bg-light border-bottom">
            <div class="card-body">
                <p class="card-text">
                    <slot></slot>
                </p>
            </div>
        </div>
    </div>
</script>

这是在 Razor 页面上使用它的部分：

<div id="app">
    <vue-card id="Id" name="Card" img="https://vuejs.org/images/logo.png" class="mb-4">
         <h6>Bootstrap 4 Card Vue Component</h6>
       </vue-card>
</div>

@section Scripts {

<partial name="_Card" />

<script type="text/javascript">
        var app = new Vue({
            el: '#app'
        })
</script>
}

详情请查看我在 Github 上的示例项目：ASP.NET Core + Vue.js

我还在 Medium 上写了一篇关于我的 Using Vue Components in ASP.NET Core 方式的文章。

Answer 9

这个问题有点老了，但是..

我在GitHub 上有一个使用 ASP.NET 和 Vue.js 的小示例项目。它使用 Yarn（或 npm）作为包管理器和 Webpack。

它不是 .NET Core，但使用它的方式是一样的。它可能会帮助您入门。

奇怪的文件结构是因为它运行在我们的 Sitecore CMS 系统上。

希望对你有帮助。

Answer 10

我花了很长时间学习如何使用 Browserify 和 Babel，以便建立自己的 ES6 环境。但是，在使用 Vue 时，我很乐意使用默认模板，最好通过安装 Vue-CLI 来访问这些模板。您可以在 Browserify 和 Webpack 之间进行选择，也可以选择简单的设置，也可以使用仅运行时版本进行完整的 linting、单元测试和单文件组件。

它只是工作。

Answer 11

此处提供了将 Vue.js 与 ASP.NET Core 集成的最佳分步教程：

https://ourtechroom.com/tech/integrating-vuejs-in-aspnetcore-application/

我在这里发布了一个 GitHub 示例项目：

https://github.com/Diwas777/integrating-vue-with-asp.net-core-project