Vue JS Application Without Build

# 引言

人们经常说 Vue JS 或 React 是多么简单，甚至微不足道。嗯... 我不同意。它们不简单。毕竟，它们被广泛用于构建大规模的、通常是关键任务的系统。除了这些过于乐观的课程，还有很多东西需要学习。它们的生态系统是巨大的。工具要求很高。文档非常丰富。发现和理解最佳实践和高效的设计模式需要付出大量的努力。

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

这篇文章的源代码可以在 https://bitbucket.org/letsdebugit/minimalistic-vue 中找到，你可以在这里运行示例应用程序。

# 简单项目的简单工具

当我开始一个新项目时，简单开始是至关重要的。这个职业的认知负担已经够重的了。我不需要更多了，除非真的需要。同样重要的是，只要应用程序保持简单，项目设置就保持简单。对于许多项目来说，我所需要的只是一个网页背后的小小的智能引擎。一些可以连接照片库的东西。可以从外部源获取更新并保持 UI 同步。为什么我要为此而引入TypeScript和webpack呢？但是 Vanilla JS 的成本很高。我喜欢拥有诸如状态管理、响应式和数据绑定之类的东西。它们节省了很多时间，并且有助于构建一个一致的用户界面。幸运的是，这在进步的 web 框架中是可能的。在下面的示例中，我想展示如何以最简单的方式介绍 Vue JS 并享受其功能。

# 应用程序设计

下面的例子是一个小小的单页网页应用程序。它有一个页眉，内容区域和页脚。在内容区域有一条消息和一个按钮。当用户点击按钮时，消息会发生变化:

作为一个谨慎的程序员，我希望从一开始就正确地构造应用程序。在用户界面中有以下元素:

header 集管
main area 主要区域
footer 页脚

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

在一个典型的 Vue JS 设置中，您将使用.vue的单组件文件。不幸的是，这需要一个基于 webpack、 rollup 等的构建过程。事实证明，您可以在不使用任何构建过程的情况下获得几乎相同的体验！它可能不像原来的协议那么全面，但是对于许多简单的场景来说还是不错的。更重要的是，它没有常规构建过程和 CLI 工具引入的复杂性和依赖性。

# 工程项目结构

该项目的结构如下:

index.html
index.js
index.css
header/
    header.js
    header.css
content/
    content.js
    content.css
footer/
    footer.js
    footer.css

1
2
3
4
5
6
7
8
9
10
11
12

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

# 自力更生

当浏览器加载 index. html 时，会发生以下情况:

Vue JS 库是从 CDN 库中获取的https://unpkg.com/vue
获取组件样式
应用程序模块从index.js导出然后被执行

注意我们是如何使用 < script type = " module" > 来告诉浏览器我们正在加载所有花里胡哨的现代 ES6代码！

当执行 index.js 时，它会导入包含我们的组件的后续模块:

Content from 内容来自/content/content.js Header from 标题来自/header/header.js Footer from 的页脚/footer/footer.js

这些组件与常规的 Vue JS 单文件组件没有多大区别。它们可以拥有 Vue JS 组件的所有特性和功能，比如:

data props methods computed lifecycle events slots template with markup etc.

因为没有构建过程，我们的组件必须以不同的方式组合在一起。现代的 JavaScript 特性在这方面对我们有所帮助。与打包相反，我们可以在任何需要的地方import所需的依赖项。经过这么多年不费脑筋的打包浏览器终于知道如何导入模块; 然后，我们将使用 JS 模板文本代替 < template > 。

组件代码的结构如下:

const template = `
  <div>
  ...
  </div>
`
export default {
  template,
  data () {
  },
  computed: {
  },
  // etc.
}

1
2
3
4
5
6
7
8
9
10
11
12
13

主要的应用程序组件在 index.js 文件中。它的任务是为所有组件分配定制的 HTML 标记，比如 < app-header > 或 < app-footer > 。

import Header from './header/header.js'
import Content from './content/content.js'
import Footer from './footer/footer.js'
const App = {
  el: 'main',
  components: {
    'app-header': Header,
    'app-content': Content,
    'app-footer': Footer
  }
}
window.addEventListener('load', () => {
  new Vue(App)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

然后使用这些自定义标记在 index. html 文件中构建应用程序 UI。我们最终得到了一个简单易懂的用户界面:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Minimalistic Vue JS</title>
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="header/header.css">
  <link rel="stylesheet" href="content/content.css">
  <link rel="stylesheet" href="footer/footer.css">
  <script src="https://unpkg.com/vue">
  </script>
  <script src="index.js" type="module">
  </script>
</head>
<body>
  <main>
    <app-header bg-color="#c5cae2">
    </app-header>
    <app-content>
    </app-content>
    <app-footer>
      (c) Tomasz Waraksa, Dublin, Ireland
    </app-footer>
  </main>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 路由选择

一个不那么琐碎的应用程序通常会有一大堆视图，用户可以导航到这些视图。事实证明，Vue 路由器在我们的设置中工作，没有任何问题。您可以像定义任何其他组件一样定义视图或页面，使用上面描述的相同方法。然后，不要将这些组件注册为自定义标记，而是用标准的方式将它们链接到路由，例如:

import Home from './home/home.js'
import About from './about/about.js'
export default [
  {
    name: 'home',
    path: '/',
    component: Home
  },
  {
    name: 'about',
    path: '/about',
    component: About
  }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14

然后获取 Vue Router 库并在 index. html 中添加路由器占位符:

<head>
  ...
  <script src="https://unpkg.com/vue-router">
  </script>
</head>
<body>
  ...
  <router-view>
  </router-view>
  ...
</body>

1
2
3
4
5
6
7
8
9
10
11

最后，在 index.js 中将路由器与应用程序一起初始化:

const router = new VueRouter({ routes })
const app = {
  el: 'main',
  router,
  ...
}

1
2
3
4
5
6
7

现在，您可以通过输入 URL、使用 < router-link > 组件或以编程方式导航到这两个页面。

最后，我们几乎拥有了 Vue JS 的全部能力，而没有任何构建过程的复杂性。要部署这个应用程序，我们只需将文件复制到一个 web 服务器。然后只希望我们的访问者会使用一个像样的浏览器;

# 最后

这篇文章也可以在作者Tomasz Waraksa的博客 Let’s Debug It 上找到。完整的源代码可以在 google https://bitbucket.org/letsdebugit/minimalistic-vue 上找到。所有的荣誉和感谢都归功于 Vue JS 框架的创建者。

快乐的小丑

Choose mode