在 ABT 节点上部署 Vue Vite | ArcBlock 博客

有关如何使用现成的 Vue Vite Blocklet 和 ABT 节点部署 Vue 的演示。

介绍

在此演示中，我们将向你展示如何使用现成的 Blocklet 和 ABT 节点快速部署 Vue Vite。与其他 Blocklet 相似，ABT 节点是一个适应性极强的开发平台，让开发者可以使用例如 ReactJS、Express 和 Vue 等首选框架轻松开发自己的项目。Vue Vite Blocklet 包含快速部署并使用 Vue 和集成工具编码所需的一切，并轻松添加去中心化身份和区块链^[1]等。

Vue Vite 是什么

对于那些不了解的人来说，Vue 是一个易于构建用户界面的渐进式框架，旨在逐步采用（类似于根据需要添加 Blocklet）。在此演示中，我们将 Vue 与 Vite 结合在一起，Vite 能提供快速冷启动、即时的热模块更新和真正的按需编译。Vite 提供了一个无捆绑开发设置环境，让你在开发过程中无需打包任何组件的情况下使用单个文件组件来开发 Vue 应用。有趣的是，Vite 不仅可以与 VueJS 一起使用，而且可以被其他如 ReactJS 的库使用。

在 ABT 节点上部署 Vue + Vite

要开始使用 Vue Vite 和 ABT 节点，只需访问 Blocklet Github 页面：https://www.github.com/blocklet，选择 Vue + Vite Blocklet。

在 Gitpod 点击打开

选择在 Gitpod 中打开选项，启动 Cloud IDE 并在 ABT 节点上启动 Vue Vite Blocklet。注意：我们已经与 Gitpod 合作，让开发者能够使用 ArcBlock 的 ABT 节点完全在云中快速开始编码、构建和调试其应用和项目。

自动部署 Vue 和 ABT 节点

如屏幕截图所示，ABT 节点守护进程已启动，并将以调试模式部署 ABT 节点，因此你可以立即开始使用代码，并访问 ABT 节点仪表板和 Web 版 Vue 预览。

ABT 节点正在运行

现在我们可以看到开发服务器正在云中本地运行，并且已自动部署了 NGINX 等服务。

点击链接

可访问的 URL 现时可用，包括一个链接，用于在我们的浏览器中访问 ABT 节点仪表板和 Vue。

预览 Vue Vite 并开始编码

此时，Vue 在云中的 ABT 节点上运行，开发者可以访问源文件并开始为他们项目编码。

立即尝试 Vue + Vite

现在，轮到你了。单击此链接^[2]以启动 Cloud IDE，在 ABT 节点上启动 Vue Blocklet。

部署到 ABT 节点

如果你是开发者并且准备在 ABT 节点环境上开始使用 Vue，请返回 Github，然后选择在 ABT 节点上安装^[3] 将任何 Blocklet 直接安装到你的开发环境中，只需按照以下步骤完成安装即可。

References

[1] 去中心化身份和区块链: https://www.arcblock.io/zh/platform
[2] 单击此链接: https://gitpod.io/#https://github.com/blocklet/vue-vite-demo
[3] Github，然后选择在 ABT 节点上安装: https://github.com/blocklet/vue-vite-demo

更多ArcBlock区块基石信息，可关注以下渠道了解：

• 官网 | https://www.arcblock.io

• ABT 技术社区 | https://community.arcblockio.cn

• ABT 链网 | https://www.abtnetwork.io

• ABT 钱包 | https://abtwallet.io

• ABT 换币服务 | https://swap.abtnetwork.io

• 开发者文档 | https://docs.arcblock.io
  

• Twitter | https://twitter.com/ArcBlock_io

• Facebook | https://www.facebook.com/arcblock.io/

• LinkedIn | https://www.linkedin.com/company/18355951/

• Reddit | https://www.reddit.com/r/arcblock/

• Medium | https://medium.com/arcblock

• 微博 | https://weibo.com/realArcBlock

• 微信群 | 加“ABT共识社区小助手（ID: L520abt1314）”好友入群

• 电报群 | Telegram groups:

  Telegram (English): https://t.me/ArcBlock

  Telegram (中文): https://t.me/ArcblockAsian

↙点击查看 Blocklet 开源仓库