如何设置 ASP.NET Core + Vue.js? [英] How do I set up ASP.NET Core + Vue.js?
问题描述
我需要将 Vue.js 与一些 ASP.NET Core MVC 视图集成.我选择 Vue.js 而不是其他替代品,因为它看起来更简单——只需通过 标签添加它",他们说.无需学习Gulp/Grunt/Webpack/Browserify等
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
,取自这个官方 精选了与 Vue.js 相关的很棒的东西的列表,但我在这里碰壁了.虽然第一个不要求使用 require()
JS 语法(CommonJS?),但没有它,第二个就无法工作.其他扩展发生在 'use babel'
和 imports
/exports
中,这是需要编译的 ECMAScript 6.那么,大多数 Vue.js 库和工具确实需要一个编译器,加上 require()
语法,以及来自 Node 世界的所有东西?
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 插件开发许多小型 Vue 应用程序(可以 require(stuff)
)?
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,因为它比其他替代方案更简单.更少的仪式,更少的样板,更少的代码.它被称为渐进式框架...对!但仅限于一点.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 模块和构建系统.
走这条路的原因:
- 您没有多少天可以学习A很多的东西.(配置 bundler,npm+package 依赖地狱,ES6 的东西.)
- 您不想制作尖端的单页应用程序.将 Vue.js 嵌入几个 HTML 页面似乎就足够了.
- HTTP/2 正在成为主流,因此 Webpack 或 Browserify 之类的捆绑器将提供更少的好处,至少在性能方面.
- 最终 ES6 模块将直接在浏览器中支持,因此我们不需要将 最新 JavaScript 构建到 浏览器兼容 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:
- 只需使用
标签添加 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 withimport
/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).
警告:您将无法使用诸如 single-file 之类的高级 Vue.js 功能components 或 Vue Router,但那没问题.您将不得不手动执行一些操作.
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.它的文档不是很好,所以对我有用的是遵循它的 tutorial一步步.
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 还内置了具有热模块重新加载"功能的 Web 服务器.这是一个用于静态文件的 Web 服务器,仅用于开发.它的好处是,每当您编辑 JS 模块时,浏览器都会自动应用更改而无需刷新.这是一个非常好的但可选的功能.问题:这个内置的网络服务器与我们的网络服务器(Kestrel)竞争.因此,如果您想在开发过程中尝试此功能,请使用 Webpack ASP.NET Core 中间件,由 Microsoft 的 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:
- 内置开发模式:创建大文件,便于调试.将它与‘watch-mode’一起使用,所以每当你修改文件时,都会触发一个新的 Webpack 构建.
- 内置生产模式:创建小型缩小文件.对dotnet 发布"很有用.
- 使用 Webpack 的 Web 服务器和热模块重新加载以及 Webpack ASP.NET Core 中间件意味着您的应用程序将在后台运行 Webpack、构建并观察源文件的更改.编译输出不会写入磁盘,只会保存在内存中并通过 HTTP 提供服务.JavaScriptServices 中间件将来自 Kestrel 的请求转发到 Webpack 的网络服务器以完成这项工作.
无论您使用什么 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屋!