在微搭可视化开发中添加 vConsole

在微搭可视化开发中引入外部 JavaScript 库（例如 vConsole）可以通过以下步骤完成：

步骤一：获取外部 JS 库的链接

首先，你需要获取外部 JS 库的 CDN 链接。例如，vConsole 的 CDN 链接如下：

• vConsole JS 文件：https://unpkg.com/vconsole@3.13.0/dist/vconsole.min.js
• vConsole CSS 文件（可选）：https://unpkg.com/vconsole@3.13.0/dist/vconsole.min.css

步骤二：在微搭中添加外部资源

1. 登录微搭编辑器，进入你的项目。
2. 点击打开“设置”，然后选择“开发设置”。
3. 在“开发设置”页面中，找到“外部资源”部分。
4. 点击“添加外部资源”，在弹出的对话框中输入以下信息：
   • 资源类型：选择 JS 或 CSS，根据你需要引入的文件类型。
   • 资源链接：粘贴你获取到的 CDN 链接。
5. 点击“确定”，保存你的设置。

步骤三：验证引入

1. 保存并预览你的应用，确保外部资源已经成功加载。
2. 打开浏览器的开发者工具，在控制台中你应该能看到 vConsole 的相关信息。
3. 在应用运行时，初始化 vConsole：

   // 在页面加载时初始化 vConsole
   export default function ({ event, data }) {
     if (typeof VConsole !== "undefined") {
       new VConsole();
     }
   }

通过以上步骤，你就可以在微搭可视化开发中成功引入并使用 vConsole。