没有构建的Vue JS应用程序

导言

人们经常会说Vue JS或Reaction是简单的，甚至是微不足道的。

好吧.。我不同意；-)它们并不简单。毕竟，它们被广泛用于构建大规模的、通常是关键任务的系统。除了这些极端乐观的东西，还有很多东西要学

课程。它们的生态系统是巨大的。工装要求很高。文件内容广泛。需要大量的努力才能发现和理解最佳实践和高效的设计模式。

那么他们有什么吸引力？对我来说，这是他们进步的性格。只有在有必要时，复杂性才会逐渐引入到项目中。我可以从简单的JavaScript开始，这是一些先决条件，而且不需要复杂的构建设置。然后，随着需求的增长，我开始添加新的概念并学习如何使用它们。诸如模块、组件、路由、状态管理、状态传播、异步代码、反应性、服务器端呈现之类的东西最终都会出现在画面中。但只有在他们到来的时候，只有当我为他们做好准备的时候！

这篇文章的源代码可以在bitbucket.org/letsdebugit…

用于简单项目的简单工具

当我开始一个新项目时，最重要的是它的启动非常简单。这一职业的认知负担已经够艰难的了。我不需要更多了，除非真的有必要。

同样重要的是，只要应用程序保持简单，项目设置就保持简单。对于许多项目，我所需要的是一个小的智能引擎背后的网页。用来连接照片画廊的东西。从外部源获取更新并保持UI同步的内容。为什么我要介绍打字稿和webpack只是为了这个？但香草JS却付出了巨大的代价。我喜欢状态管理、反应性和数据绑定之类的东西。它们节省了很多时间，并且帮助构建了一个一致的UI。

幸运的是，这在进步的Web框架中是可能的。在下面的示例中，我想展示如何介绍Vue JS并以最简单的方式享受它的功能。

应用设计

下面的例子是一个很小的一个网页应用程序。它有一个页眉、内容区域和一个页脚。在内容区域中有一个消息和一个按钮。当用户单击按钮时，消息将更改：

作为一个谨慎的程序员，我想从一开始就正确地构造我的应用程序。UI中有以下元素：

• 标头
• 主区
• 页脚

我希望将每个组件定义为一个单独的组件。我希望将它们的代码保存在单独的模块中，便于识别和使用。

在典型的Vue JS设置中，您可以使用单个文件

那东西的部件。不幸的是，这需要一个基于webpack、汇总等的构建过程。事实证明，在没有任何构建过程的情况下，您可以获得几乎相同的体验！它可能和最初的交易一样全面，但对于许多简单的场景来说，这是很好的。更重要的是，它没有常规构建过程和CLI工具带来的复杂性和依赖性。

项目结构

该项目的结构如下：

xxxxxxxxxx

index.html

    index.js

    index.css

    header/

        header.js

        header.css

    content/

        content.js

        content.css

    footer/

        footer.js

        footer.css

我们的逻辑UI组件清楚地反映在项目的物理结构中。

自举

当浏览器加载时

，发生如下情况：

• Vue JS库是从CDN存储库中获取的unpkg.com/vue

• 获取组件样式表。

• 应用程序模块是从

  Index.js

  执行

注意我们是如何使用