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

关于 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 服务器。