uniapp run使用指南 - VSCode 开发 Uni-app 项目

接手了一个 Uni-app 项目，但这个项目并不是通过 CLI 创建的。由于不习惯 HBuilderX 的编辑方式，于是寻找了其他解决方案，最终找到了 uniapp run 这款 VSCode 插件来实现 VSCode 中进行开发。

准备工作

在开始之前，需要确保已经安装了以下工具：

• HBuilderX：虽然我们主要在 VSCode 中开发，但 HBuilderX 仍然是必要的，因为它提供了 Uni-app 的核心功能和编译环境。
• 微信开发者工具：用于调试和预览微信小程序。

安装 VSCode 插件

1. 打开 VSCode： 启动 VSCode，进入扩展商店。
2. 搜索插件 ： 在扩展商店中搜索 uniapp run。
3. 安装插件： 找到插件后，点击安装按钮。安装完成后，重启 VSCode 以确保插件生效。

4. 扩展设置： 打开设置分别输入HBuilderX和微信开发者工具地址

配置项目

1. 打开项目： 在 VSCode 中打开你的 Uni-app 项目文件夹。

2. 配置 launch.json ： 如果你的项目中没有 launch.json 文件，可以通过以下步骤创建：

   • 打开 VSCode 的调试视图（Ctrl+Shift+D 或点击侧边栏的调试图标）。

   • 点击"创建 launch.json 文件"按钮，选择 Node.js 环境。

-   在生成的 `launch.json` 文件中，添加以下配置：


    ```
    { 
        "version": "0.2.0",
        "configurations": [
        {
          "type": "uniapp-run",
          "request": "launch",
          "name": "Uniapp Run",
          "platform": "mp-weixin",
          "openDevTool": true,  // 是否自动打开开发者工具
          "vueVersion": "v3", // vue版本，默认是2
        }
      ]
    }

    ```
   

注意vue版本的选择，值分别是v2和v3

1. 启动项目：

   • 在 VSCode 的调试视图中，选择"Uniapp Run"配置。
   • 点击"开始调试"按钮（绿色三角形），项目将在本地启动。

注意事项

1. HBuilderX 的必要性： 尽管我们主要在 VSCode 中开发，但 HBuilderX 仍然是必要的，因为它提供了 Uni-app 的核心功能和编译环境。
2. 微信开发者工具： 微信开发者工具用于调试和预览微信小程序，确保项目在真实环境中的表现。
3. 插件更新 ： 定期检查 uniapp run 插件的更新，以确保兼容性和新功能的使用。

通过以上步骤，你可以在 VSCode 中高效地开发 Uni-app 项目，同时享受 VSCode 强大的编辑功能和 HBuilderX 提供的编译环境。