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

发布时间：2025-11-05 07:31:24 来源：创站工坊 作者：IT科技类资讯

关于 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版本完全相同: 

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

自力更生当浏览器加载 index. html 时，使用会发生以下情况:

vue3.0库是使用从 CDN 仓库获取的https://unpkg.com/vue@3.0.0-rc.8

获取组件样式

应用程序模块从index.js开始然后被执行

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

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

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

组件代码的结构如下:

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

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

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

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

相关文章