接手了一个 Uni-app 项目，但这个项目并不是通过 CLI 创建的。由于不习惯 HBuilderX 的编辑方式，于是寻找了其他解决方案，最终找到了 uniapp run 这款 VSCode 插件来实现 VSCode 中进行开发。
准备工作
在开始之前，需要确保已经安装了以下工具：
- HBuilderX：虽然我们主要在 VSCode 中开发，但 HBuilderX 仍然是必要的，因为它提供了 Uni-app 的核心功能和编译环境。
- 微信开发者工具：用于调试和预览微信小程序。
安装 VSCode 插件
- 打开 VSCode： 启动 VSCode，进入扩展商店。
- 搜索插件 ： 在扩展商店中搜索
uniapp run。 - 安装插件： 找到插件后，点击安装按钮。安装完成后，重启 VSCode 以确保插件生效。
- 扩展设置： 打开设置分别输入HBuilderX和微信开发者工具地址
配置项目
-
打开项目： 在 VSCode 中打开你的 Uni-app 项目文件夹。
-
配置
launch.json： 如果你的项目中没有launch.json文件，可以通过以下步骤创建：-
打开 VSCode 的调试视图（
Ctrl+Shift+D或点击侧边栏的调试图标）。 -
点击"创建 launch.json 文件"按钮，选择 Node.js 环境。
-
json
- 在生成的 `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
-
启动项目：
- 在 VSCode 的调试视图中，选择"Uniapp Run"配置。
- 点击"开始调试"按钮（绿色三角形），项目将在本地启动。
注意事项
- HBuilderX 的必要性： 尽管我们主要在 VSCode 中开发，但 HBuilderX 仍然是必要的，因为它提供了 Uni-app 的核心功能和编译环境。
- 微信开发者工具： 微信开发者工具用于调试和预览微信小程序，确保项目在真实环境中的表现。
- 插件更新 ： 定期检查
uniapp run插件的更新，以确保兼容性和新功能的使用。
通过以上步骤，你可以在 VSCode 中高效地开发 Uni-app 项目，同时享受 VSCode 强大的编辑功能和 HBuilderX 提供的编译环境。