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

Question

我需要集成<script>到一些vue-momentMVC视图.我选择了Vue.js而不是其他选择,因为它似乎更简单: - " 只需通过vue-datetime-picker标签添加它们 "他们说.无需学习gulp/grunt/webpack/browserify/etc.

结果证明是错误的.在我第一次尝试处理日期时,我尝试了一些扩展,例如,require()或者'use babel'从这个与Vue.js相关的官方策划列表中获取,但是我在这里碰到了一堵墙.虽然第一个不是强制使用importsjs语法(¿ exports？),但第二个没有它就不起作用.其他扩展发生require()和require(stuff)/ <script>这是vue-moment需要进行编译.那么,大多数vue-datetime-picker库和工具确实需要编译器,require()语法和'use babel'世界上所有的东西？

我应该如何设置我的项目以使用ASP.NET Core MVC + Vue.js,这样我可以使用vue插件(可以imports)开发许多小的vue-apps ？

Answer 1

当我问上面的问题时,我完全迷失了.我花了几天时间,但仍然没有完整的图片.我非常确定2016年是学习JavaScript的艰难一年

我想使用Vue.JS,因为它比替代品更简单.仪式少,锅炉板少,代码少.它被称为渐进式框架 ......对!但只有一点.<script>没有解决构建系统的Javascript生态系统碎片问题.

所以,你必须选择一个方面:你需要一个javascript模块和一个构建系统吗？

选项1:保持简单:避免使用Js模块和构建系统.

遵循此路径的原因:

• 你没有很多天学习很多东西.(配置bundler,npm +包依赖地狱,ES6的东西
• 您不希望成为领先的单页应用程序.嵌入require()几个HTML页面似乎已经足够了.
• (function (root, factory) {正在成为主流,所以捆绑商喜欢import或export将提供更少的好处,至少在性能方面.
• 最终 <script>将直接在浏览器中支持,因此我们不需要构建任何最新的 - require()与浏览器兼容 - (function (root, factory) {.

通过不花时间学习可能在几年内过时的东西,你将节省很多天.

如果您遵循此路径,请提供以下建议:

• 只需使用import标记添加js库.
• 仅使用支持浏览器的Javascript库.无论使用什么代码export或UMD前缀都<script>需要您设置模块(因此除非您设置,否则它们不是浏览器就绪require()).带有(function (root, factory) {/ importstatements的Js文件都是写入的,export所以也要避免它们.
• 使用Bower下载支持浏览器的库.避免使用NPM(这意味着有一个模块系统).

警告:您将无法使用高级Vue.js功能,如单文件组件或者<script>,但这不要紧.你必须手动做一些事情.

选项2:学习Javascript模块+构建系统.

准备好几天学习而不是编码.我只会简要解释一下require()对我有用的方法.(function (root, factory) {也有效,但我还没试过.

我建议你花点时间学习一下JavaScript模块.然后学习构建它们并打包它们:我使用了WebPack.它的文档不是很好,所以对我有用的是一步一步地遵循它的教程.

此时,您可能听说过webpack还有一个内置的Web服务器import.这是一个Web服务器,用于仅用于开发的静态文件.它的好处是无论何时编辑JS模块,浏览器都会自动应用更改而不刷新.这是一个非常好但可选的功能.问题:这个内置的Web服务器与我们的Web服务器(Kestrel)竞争.因此,如果您想在开发期间尝试此功能,请使用Microsoft的JavaScriptServices存储库中提供的Webpack Asp.Net核心中间件.在那里,您将找到我当前使用的WebApplicationBasic模板.我解剖了它,删除了它的大部分部分,并试图使用它,我慢慢地了解每个部分最初的用途.

使用webpack时,您将主要使用3个工作流程:

• 内置开发模式:创建大文件,便于调试.将它与'watch-mode'一起使用,这样无论何时修改文件,都会触发新的Webpack构建.
• 构建生产模式:创建小型文件.对'dotnet发布'很有用.
• 使用Webpack-web-server + Hot-Module-Reload export然后您的应用程序将在后台运行Webpack,构建并观察源文件以进行更改.编译输出不会写入磁盘,只保留在内存中并通过http提供.在<script>从红隼的请求转发到的WebPack的Web服务器来完成这项工作.

无论你使用什么webpack配置,你都必须在你的webpack配置中加入'vue-loader'.您可以使用Vue的webpack-simple模板激发灵感.

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

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文档指向他们自己的Webpack模板.

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

Microsoft的开源JavaScriptServices允许您从ASP.NET Core执行Node.js,并且它们有一些Webpack中间件,可以在调试版本中将Webpack dev服务器集成到您的应用程序中.

它们为Angular 2提供官方模板,甚至是标记为Vue.js的模板,但Vue模板只是官方webpack模板,没有与.NET集成; 这就像独立服务器一样.

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

https://github.com/0xFireball/YetAnotherShrinker 上面链接的存储库有一个完整的应用程序演示,它使用NancyFx,axios,Vue.js和Vue Material,是一个简单的URL缩短器.如果您想要一个可以轻松添加到现有应用程序的更小设置的步骤,请查看我的博客文章.

强制披露:我写了这篇博文.

Answer 4

也许有人会发现这些信息很有帮助。

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

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

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