从HBuilderX到VSCode:无缝迁移UniApp项目的完整指南

迁移步骤参考文章:从HBuilderX到VSCode:无缝迁移UniApp项目的完整指南-CSDN博客

对这个文章的补充:

如果你有我自定义的组件,则还需要备份自定义组件:cp -r components project_backup/

复制自定义组件到新项目:cp -r project_backup/components/* src/components/

其实总的来说还是无法完全脱离HBuilder X的,但是因为一直使用vs code开发习惯了 使用HBuilder X真的很不上手 所以我们可以使用这个方法

  1. 使用 HBuilder X 运行项目,将它运行到你想要的平台
  2. 使用 VsCode 打开要开发的项目
  3. 在 VSCode 中安装插件:
    1. uni-helper:这个插件主要是增加代码提示功能
    2. uni-app-snippets
    3. uni-app-schemas
    4. uni-ui-snippets
    5. uni-create-view: 这个插件主要是帮助我们快速创建uniapp视图和组件,我们安装好后,在项目中右键就会发现新建uniapp页面相关操作
    6. uniapp小程序扩展:这个插件提供给我们鼠标悬停查看文档功能
  4. 最后只要在vscode中进行代码的开发就好了 保存文件后会自动运行
  5. 项目运行调试

执行 pnpm dev:mp-weixin,项目中会出现dist文件夹,我们用微信开发者工具,打开目录 dist/dev/mp-weixin

补充:使用cli创建项目就可以直接在vscode,不过最近开发了一段时间以后发现开发uniapp还是用hbuilder比较方便,这个各有各的看法,大家根据自己的喜好来就可

使用的插件:

参考文章:从HBuilderX到VSCode:无缝迁移UniApp项目的完整指南-CSDN博客

如何使用vscode来开发uni-app_vscode_鱼子酱酱酱-华为开发者空间

如何使用vsCode搭建运行uni-app项目本文介绍了如何利用vsCode创建一个uni-app项目,还介绍了如何使用 - 掘金

使用VSCode搭建UniApp + TS + Vue3 + Vite项目-腾讯云开发者社区-腾讯云

相关推荐
多客:duokelijie17 小时前
代练订单系统选型思路:跨品类游戏接入、订单分层管理、自动结算逻辑拆解!
数据库·mysql·微信小程序·前端框架·uni-app·php·持续部署
码间留白1 天前
鸿蒙端对接 BLE 血压计:从一次握手到读数入库(二)设备篇
物联网·uni-app·鸿蒙·蓝牙ble·血压计
别问!问就是全会2 天前
Jupyter Notebook 安装包下载|单元格分块运行,图表直接内嵌
ide·python·其他·jupyter
华玥作者2 天前
Vue 3 + TypeScript + uni-app 组件库推荐:hy-app(华玥组件库)
vue.js·typescript·uni-app
FinelyYang2 天前
uniapp使用kkfileview在线预览ppt,excel,word,pdf类型文件
pdf·uni-app·powerpoint
2501_916008892 天前
iPhone 设备信息查看,用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
1024奇点2 天前
【仓颉语言入门 · 第二篇 第 22 课】
开发语言·ide·开源
ModyQyW3 天前
vite-plugin-uni-manifest 0.7:在 uni-app 读取之前生成
前端·uni-app
lyz2468593 天前
uniapp vue3 小程序开发注意事项
uni-app
techpupil3 天前
IDEA基础配置及开发基础插件
java·ide·intellij-idea