使用vue3.0,不需要build也可以

引言

前天，我写了一篇简短的文章，描述了如何创建一个简单的 Vue JS 应用程序，而不需要任何构建。人们对此很感兴趣，并给予了很多反馈。许多读者问，在即将发布的 Vue 3版本中，是否可能出现类似的壮举。答案是肯定的。而且，使用 Vue 3，你可以走得更远，不需要任何构建过程就可以享受渐进式 web 框架的力量。

关于 Vue 2版本的原始文章可以在 https://letsdebug.it/post/minimalistic-Vue 网站上找到。下面我们将描述如何使用 Vue 3实现类似的设置

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

应用程序设计

与 Vue 2的例子类似，我们将创建一个带有页眉、内容区域和页脚的单页面 web 应用程序。在内容区域有一条消息和一个按钮。当用户单击按钮时，消息将发生变化。UI 由定制 HTML 标记表示的 Vue 组件构成。

工程项目结构

该项目的结构与 Vue 2版本完全相同:

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

我们的逻辑 UI 组件清楚地反映在项目的目录结构中。在组件的代码中有一些变化，如下所述。

自力更生

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

vue3.0库是从 CDN 仓库获取的https://unpkg.com/vue@3.0.0-rc.8
获取组件样式
应用程序模块从index.js开始然后被执行

请注意，在编写 Vue 3的时候，Vue 3还没有正式发布。因此，我们在这里使用最新的可用版本3.0.0-rc. 8。当官方发布时，你将不得不相应地改变 URL。

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

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

最后，它创建应用程序实例，并将其挂载到index.html内的<main>标记中。

组件

有了这个框架的新版本，我们可以利用新的函数式编程模型，也就是复合 API。我们将使用 setup()函数来代替数据、计算和方法部分，它将连接所有组件的内部。为了确保数据传播到 UI 并对更改做出反应，我们将使用 composition api 提供的reactive 和 computed。

组件代码的结构如下:

const template = `
  <div>
  ...
  </div>
`
export default {
  template,
  setup () {
  }
}

作为一个例子，我们提供了 footer 组件，它在左边显示一些文本，在右边显示一个滴答作响的时钟:

const { reactive, computed } = Vue
const template = `
  <footer>
    <div class="left">
      <slot></slot>
    </div>
    <div class="middle">
    </div>
    <div class="right">
      Current time: <b>{{ state.nowString }}</b>
    </div>
  </footer>
`
export default {
  template,
  setup () {
    const state = reactive({
      now: new Date(),
      nowString: computed(() => state.now.toTimeString().substr(0, 8))
    })
    window.setInterval(() => {
      state.now = new Date()
    }, 1000)
    return { state }
  }
}

主要的应用程序组件在 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 { createApp } = Vue
const App = createApp({
  components: {
    'app-header': Header,
    'app-content': Content,
    'app-footer': Footer
  }
}
window.addEventListener('load', () => {
  App.mount('main')
})

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

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Minimalistic Vue 3</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@3.0.0-rc.8"></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>

最后，我们几乎拥有了 Vue 3的全部功能，包括了不起的 Composition API，而且没有任何构建过程的复杂性。要部署这个应用程序，我们只需将文件复制到一个 web 服务器。

最后

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