【教程】如何将Hbuilder上的Uniapp项目迁移到VSCode

最近博主在Hbuilder X上开发一个基于Uniapp的小程序项目，用着用着还是更习惯使用VSCode，于是决定将该项目迁移至VSCode中继续开发，所以本文会分享如何将Hbuilder上的Uniapp项目迁移到VSCode以及小程序如何在VSCode运行的教程，需要的朋友可以瞅瞅！

核心思想就是：新创建一个项目，再将原代码复制到新项目组。

以下为具体步骤：

创建项目

在Uniapp官网中其实提供了用vue脚手架创建项目的命令行，直接复制该命令去创建项目即可，现以Vue3+Vite+js为例（注意node版本）。

 

 选择对应的文件放置地址，直接cmd打开控制台，输入命令行创建项目即可：

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

但是博主由于网络问题，命令行运行不成功，所以到gitee下载了模版

直接将模版解压，再更改成自己想要的项目名称，直接用vscode打开就得到一个简单的模版。

复制代码

先看新创建的项目模版和原项目代码区别

这时，就可以将原项目代码直接复制到新建项目的src中，注意同名文件要替换掉，依赖和打包文件（标红）不要复制。

复制好之后参考下图

 

这样就算是迁移成功了，但是想要运行起来，还需要以下步骤。

运行

先下载依赖，下载好了会出现依赖包

npm i

准备就绪，直接在控制台输入运行命令，例如h5和微信小程序

运行h5，点击对应网站即可直接访问

npm run dev:h5

运行微信小程序，需要微信开发者工具导入项目

npm run dev:mp-weixin

运行后会出现以下目录，终端也会有运行步骤提示

 

接下来就是在微信开发者中编译运行就可以了，在vscode修改代码后小程序也可以动态更新。

---

以上就是将Hbuilder上的Uniapp项目迁移到VSCode的教程了，欢迎指正！