如何设置ASP.NET Core + Vue.js? [英] How do I set up ASP.NET Core + Vue.js?

问题描述

我需要将Vue.js与一些ASP.NET Core MVC视图集成在一起.他们说，我选择Vue.js而不是其他选择，因为它似乎更简单-"只需通过<script>标签添加它们"即可.无需学习Gulp/Grunt/Webpack/Browserify/etc.

I need to integrate Vue.js with some ASP.NET Core MVC views. I picked Vue.js over other alternatives because it seemed to be simpler – "just add it via a <script> tag", they said. No need to learn Gulp/Grunt/Webpack/Browserify/etc.

事实证明这是错误的.在我第一次尝试处理日期时，我尝试了诸如 vue-moment 和 vue-datetime-picker ，摘自该官方

That turned out to be false. At my first attempt to handle dates I tried some extensions like vue-moment and vue-datetime-picker, taken from this official curated list of awesome things related to Vue.js but I hit a wall here. While the first does not mandate using the require() JS syntax (CommonJS?), the second one doesn't work without it. Other extensions happen to 'use babel' and imports/exports which is ECMAScript 6 that needs to be compiled. So, most Vue.js libraries and toolings indeed need a compiler, plus the require() syntax, and all that stuff from the Node world?

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

How should I set up my project to work with ASP.NET Core MVC + Vue.js, in a way that I can develop many small Vue apps using Vue plugins (that can require(stuff))?

推荐答案

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

I was totally lost when I asked the above question. I’ve spent a few days and I still don’t have a complete picture. What I am pretty sure is that 2016 is a hard year to learn JavaScript.

我想使用Vue.js，因为它比其他方法更简单.更少的仪式，更少的样板，更少的代码.它被标记为 Progressive Framework ...对！但是只有一点. Vue.js不能解决构建系统的JavaScript生态系统碎片化问题.

I wanted to use Vue.js because it’s simpler than the alternatives. Less ceremony, fewer boilerplates, less code. It's branded as the Progressive Framework... Right! But only to a point. Vue.js does not solve the JavaScript ecosystem fragmentation problem with build systems.

因此，您必须选择一个方面:是否需要JavaScript模块和构建系统?

So, you will have to pick a side: Do you need JavaScript modules and a build system?

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

遵循此路径的原因:

• 您没有很多时间要学习很多东西. (配置捆绑器，npm + package依赖关系，ES6内容.)
• 您不希望进行前沿的单页应用程序.将Vue.js嵌入几个HTML页面中似乎足够.
• HTTP/2逐渐成为主流，因此Webpack或Browserify之类的捆绑器将至少在性能方面提供较少的好处.
• 最终 ES6模块将可以直接在浏览器中获得支持，因此我们无需在浏览器兼容的 JavaScript中构建任何 latest JavaScript.

• You don’t have many days to learn A LOT of stuff. (Configuring bundler, npm+package dependencies hell, ES6 stuff.)
• You do not want to make a bleeding-edge single-page application. Embedding Vue.js inside a few HTML pages seems enough.
• HTTP/2 is becoming mainstream, so bundlers like Webpack or Browserify will provide fewer benefits, at least on performance.
• Eventually ES6 modules will be supported directly in the browser, so we won’t need to build whatever the latest JavaScript is into browser-compatible JavaScript.

不花时间学习可能会在几年后淘汰的内容，您将节省很多天.

You will save many days by not spending time learning stuff that will probably be obsolete in a few years.

如果您遵循此路径，请提出一些建议:

If you follow this path, a few recommendations:

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

• Just add JS libraries using the <script> tag.
• Only use browser-ready JavaScript libraries. Code that uses require() or the UMD prefix (function (root, factory) { requires you set up modules (therefore it is not browser-ready unless you set up CommonJS). JS files with import/export statements are written in ES6 so avoid them too.
• Use Bower to download browser-ready libs. Avoid NPM (which implies having a module system in place).

注意事项:您将无法使用高级Vue.js功能，例如单-文件组件或Vue路由器，但这没关系.您将不得不手动执行一些操作.

Caveat: You will not be able to use advanced Vue.js features like single-file components or Vue Router, but that is OK. You will have to do a few things manually.

选项2:学习JavaScript模块和构建系统.

准备几天来学习而不是编写代码.我只会简要地解释一下Webpack如何为我工作. Browserify也可以，但是我还没有尝试过.

Prepare a few days to learn and not code. I will only explain briefly how Webpack worked for me. Browserify also works, but I haven't tried it.

我建议您花一些时间来学习 JavaScript模块是.然后学习构建它们并打包它们:我使用了Webpack.它的文档不是很好，所以对我有用的是遵循它的教程逐步进行.

I recommend you spend some time learning what JavaScript modules are. Then learn to build them and pack them: I used Webpack. Its documentation is not great, so what worked for me was to follow its tutorial step by step.

在这一点上，您可能已经听说Webpack ALSO具有内置的Web服务器，该服务器具有热模块重新加载"功能.这是用于仅用于开发的静态文件的Web服务器.它的好处是，每当您编辑JS模块时，浏览器都会自动应用更改而无需刷新.这是一个非常不错的功能，但是可选功能.问题:此内置Web服务器与我们的Web服务器(Kestrel)竞争.因此，如果您想在开发过程中尝试使用此功能，请使用 JavaScriptServices回购.在那里，您将找到我当前正在使用的 WebApplicationBasic模板.我解剖了它，删除了它的大部分零件，然后尝试使用它，我逐渐了解了每个零件的原始用途.

At this point, you may have heard that Webpack ALSO has a built-in web server with "hot module reloading". This is a web server for static files to be used only for development. Its benefit is that whenever you edit a JS module, the browser will automatically apply the change without refreshing. This is a very nice, but optional, feature. The problem: this built-in web-server competes with our web server (Kestrel). So, if you want to try this feature during development use the Webpack ASP.NET Core middleware provided at Microsoft’s JavaScriptServices repo. There you will find the WebApplicationBasic template that I am currently using. I dissected it, removed most of its parts and by trying to use it I slowly understood what each part was originally for.

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

When using Webpack you will mostly use 3 workflows:

• 内置开发模式:创建巨大的文件，易于调试.将其与监视模式"一起使用，因此无论何时修改文件，都会触发新的Webpack构建.
• 内置生产模式:创建较小的缩小文件.对于"dotnet发布"很有用.
• 使用Webpack的Web服务器并通过Webpack ASP.NET Core中间件重新加载热模块，这意味着您的应用程序将在后台运行Webpack，构建并查看源文件中的更改.编译输出未写入磁盘，仅保留在内存中，并通过HTTP提供服务. JavaScriptServices中间件将来自Kestrel的请求转发到Webpack的Web服务器以完成这项工作.

无论使用哪种Webpack配置，都必须在Webpack配置中包含"vue-loader".您可能会受到 Vue的webpack-simple模板的启发.

Whatever Webpack config you go with, you have to include ‘vue-loader’ in your Webpack config. You may be inspired by Vue’s webpack-simple template.

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

I haven’t covered everything that I wanted to, but this topic is too extensive and I need to go back to coding. Please leave some feedback.

这篇关于如何设置ASP.NET Core + Vue.js?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！