Adding vConsole in WeDa Visual Development

Importing external JavaScript libraries (such as vConsole) in WeDa visual development can be achieved by following these steps:

Step 1: Get the Link to the External JS Library

First, you need to obtain the CDN link for the external JS library. For example, the CDN link for vConsole is as follows:

• vConsole JS file: https://unpkg.com/vconsole@3.13.0/dist/vconsole.min.js
• vConsole CSS file (optional): https://unpkg.com/vconsole@3.13.0/dist/vconsole.min.css

Step 2: Adding External Resources in WeDa

1. Log in to the WeDa editor and enter your project.
2. Click to open "Settings", then select "Development Settings".
3. On the "Development Settings" page, locate the "External Resources" section.
4. Click "Add External Resource", and in the pop-up dialog, enter the following information:
   • Resource Type: Select JS or CSS based on the type of file you need to import.
   • Resource Link: Paste the CDN link you obtained.
5. Click "OK" to save your settings.

Step 3: Verify Import

1. Save and preview your application to ensure that the external resources have been successfully loaded.
2. Open the browser's developer tools, and in the console, you should see information about vConsole.
3. During application runtime, initialize vConsole:

   // Initialize vConsole when the page loads
   export default function ({ event, data }) {
     if (typeof VConsole !== "undefined") {
       new VConsole();
     }
   }

By following the above steps, you can successfully import and use vConsole in WeDa visual development.