您现在的位置是：亿华云 > 系统运维
使用vue3.0,不需要build也可以
亿华云2025-10-04 03:25:32【系统运维】9人已围观
简介关于 Vue 2版本的原始文章可以在 https://letsdebug.it/post/minimalistic-Vue 网站上找到。下面我们将描述如何使用 Vue 3实现类似的设置这篇文章的源代码
关于 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 并对更改做出反应，云南idc服务商我们将使用 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 服务器。
源码库很赞哦!（8429）
