在线 VueJS 编辑器——编写、运行及共享代码

<html> <head> <title>VueJs 演示示例</title> <script src="https://unpkg.com/vue@3"></script> </script> </head> <body> <h1 id="app">{{ message }}</h1> <script> const { createApp } = Vue createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app') </script> </body> </html>

使用此在线 VueJS 编辑器（VueJS 版本 (2.5.3)）直接从浏览器直接编辑、运行和共享你的 Vuejs 代码。此在线编译器为你提供了使用最新版本的 VueJS (2.5.3) 编辑和编译 Vuejs 代码的便利性。

如何使用在线 VueJS 编辑器？

编写并执行代码

在“源代码”选项卡下直接编写（或粘贴）你的程序。
如果你想保存你的程序，请转至“项目”菜单并保存它。
你可以不保存直接执行程序，只需点击“执行”按钮即可。

如何输入用户输入？

最新版本的在线 VueJS 编辑器允许在运行期从终端窗口提供程序输入，与你在自己的计算机上运行程序的方式完全相同。因此，只需运行程序，然后从右侧提供的终端窗口提供你的程序输入（如果有的输入）。

键盘快捷键

以下是我们编辑器的关键字快捷方式

快捷方式	说明
⌘ + Enter	运行程序
⌘ + S	保存项目（需要登录）
⇧ + ⌘ + S	另存为项目
⌘ + P	新建项目
⌘ + G	共享项目
⌘ + Z	撤消编辑
⌘ + Y	重做编辑
⌘ + A	全选文字
⌘ + X	剪切选中文本
⌘ + C	复制选中文本
⌘ + V	粘贴复制的文本
⌘ + F	搜索文字
⌘ + ⌥ + F	替换文字

快捷方式	说明
Ctrl + Enter	运行程序
Ctrl + S	保存项目
Shift + Ctrl + S	另存为项目
Ctrl + G	共享项目
Ctrl + Z	撤消编辑
Ctrl + Y	重做编辑
Ctrl + A	全选文字
Ctrl + X	剪切选中文本
Ctrl + C	复制选中文本
Ctrl + V	粘贴复制的文本
Ctrl + F	搜索文字
Ctrl + H	替换文字

保存并分享项目代码

在线保存 Vuejs 项目

你可以在我们这里保存你的 Vuejs 项目，以便你以后可以访问该项目。要保存项目，你需要在我们这里创建一个登录 ID。因此，在你保存项目之前，请使用本页右上角给出的链接创建一个登录 ID。

在线共享 Vuejs 项目

你可以使用此功能与老师、同学和同事共享你的 Vuejs 代码。只需点击共享按钮，它就会创建一个短链接，可以通过电子邮件、WhatsApp 甚至社交媒体进行共享。如果一个共享链接三个月内一直处于被动状态，它将被删除。

编辑器的更多功能

主题——你可以从“设置”菜单的“编辑器主题”选项更改当前编辑器的主题。
字体大小——你可以从“设置”菜单的“字体大小”选项更改编辑器/编译器的字体大小。
**缩进宽度** – 您可以从“设置”菜单中的“缩进宽度”选项更改缩进宽度。
**显示/隐藏行号** – 您可以从“设置”菜单中的“显示行号”或“隐藏行号”选项显示/隐藏代码中的行号。
以及更多其他功能。

为什么使用在线 VueJS 编辑器？

使用在线 VueJS 编辑器运行 Vuejs 代码有以下好处

跨平台：无论何种操作系统，您都可以从任何设备运行代码。
便利：无需安装任何软件即可使用它。
无需安装：运行代码时无需额外安装。
版本更新：我们的在线编译器/编辑器/终端都是最新版本。