一文搞定！在VS Code等ide中开发运行UniApp项目的完整指南
文章目录
一、为什么选择VS Code开发UniApp？
UniApp作为"一次开发，多端运行"的跨平台框架，配合微软的VS Code这个轻量级编辑器，堪称开发效率神器组合。相比HBuilderX，VS Code拥有更丰富的插件生态和自由的配置空间，特别适合已经熟悉前端开发的程序员。
同时，UniApp使用Vue相关的语法进行开发，这对于前端开发工程师来说，并不需要太多的学习成本，上手难度较低。但是如果还需要学习配套的HBuilderX工具来开发的话，那么就会产生较大的学习成本了。为了达到降本增效的目的，能够直接在VS Code中进行开发就显得尤为重要。
二、准备工作（请先完成这些！）
- 环境三件套：
- Node.js（建议16.x以上版本）
- VS Code
- GitHub与Git
三、cli（脚手架）创建项目
注意！！！
如果需要使用VS Code等其他ide进行项目的开发，只能通过cli（脚手架）的方式进行项目创建。
很好理解。因为其他ide没有内置uni-app的编译器，所以其他ide开发uni-app，只能把编译器安装在项目下，也就是cli创建的项目格式。
cli项目可以使用多种ide开发，但ide之间有区别：
- HBuilderX为uni-app做了大量优化，其他ide搭配uni-app使用也可以用，但没有为uni-app优化过
- 其他ide没有uni-app的app和uniCloud的运行、调试工具。这些工具在HBuilderX里。如开发app和uniCloud，必须使用HBuilderX。
但是cli创建的项目，也可以在HBuilderX中进行编辑。
首先HBuilderX作为通用编辑器，兼容传统的cli方式开发。不止uni-app的cli，其他框架的cli也可以拖入HBuilderX。
也就是HBuilderX里可以使用可视化界面创建项目，也可以使用cli命令行创建项目，都可以达到和uni-app更好协作的目的。比如pages.json跳转和提示、manifest可视化界面、条件编译、rpx等css单位…众多 for uni-app 的优化都可以使用。
这些是HBuilderX的特点，和项目结构无关。
cli创建项目和HBuilderX可视化界面创建项目的区别
- cli创建的项目，是传统的node项目结构。工程代码在src目录下，编译器在项目下，编译结果在dist目录下。
- HBuilderX可视化创建的项目，是一种免node开发概念。工程代码在项目目录下，编译器在HBuilderX目录下而不是项目下，编译结果在项目的unpackage目录下。
1、环境安装
全局安装 vue-cli
npm install -g @vue/cli
2、创建uni-app
-
使用正式版（对应HBuilderX最新正式版）（项目名不要用中文！）
vue create -p dcloudio/uni-preset-vue my-project -
使用alpha版（对应HBuilderX最新alpha版）（项目名不要用中文！）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project -
使用Vue3/Vite版
此时，会提示选择项目模板（使用Vue3/Vite版不会提示，目前只支持创建默认模板），初次体验建议选择 hello uni-app 项目模板，如下所示：
注意
- Vue3/Vite版要求 node 版本 18+、20+
- 如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）
- HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径
- HBuilderX Windows 版本菜单栏 工具->设置->运行配置->node路径
3、创建报错如何解决
如果出现如下的网络错误，无法链接或连接超时的话，可以使用下面这种方式进行创建。
从GitHub中直接拉取代码到本地。仓库地址：https://github.com/dcloudio/uni-preset-vue
# 拉取命令
git clone https://github.com/dcloudio/uni-preset-vue
执行命令行时把dcloudio的地址替换成本地的项目地址，运行即可创建
vue create -p D:\Project\uni-preset-vue my-project
如果是创建vue3.0 + vite + javascript的uni-app项目，直接在浏览器打开 https://github.com/dcloudio/uni-preset-vue 切换到vite分支下载zip后缀的压缩文件，解压到本地就可以了。无法打开的话，直接拉取这个项目的分支即可。
# 拉取命令
git clone -b vite https://github.com/dcloudio/uni-preset-vue
如果是创建vue3.0 + vite + typescript的uni-app项目，直接在浏览器打开 https://github.com/dcloudio/uni-preset-vue 切换到vite-ts分支下载zip后缀的压缩文件，解压到本地就可以了。无法打开的话，直接拉取这个项目的分支即可。
# 拉取命令
git clone -b vite-ts https://github.com/dcloudio/uni-preset-vue
四、VS Code必备配置
-
插件市场安装：
- Vue Language Features (Volar)（Vue3支持）
- Vue tooling for VS Code from Vetur(Vetur)（Vue2支持）
- uni-app-snippets（代码补全）
- Image Preview（图片预览）
- SCSS IntelliSense（Scss提示）
- ESLint（代码规范检查）
- Uni-helper（增强体验）
-
关键配置修改：
打开manifest.json，配置微信小程序AppID："mp-weixin": { "appid": "你的微信小程序ID", "setting": { "urlCheck": false } }
五、运行调试全攻略
运行、发布 项目
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
cli创建的项目与Vue的项目目录是一样的，因此运行的命令也是在package.json中进行配置。
场景1：开发H5页面
npm run dev:h5
浏览器自动打开http://localhost:8080，修改代码实时刷新
场景2：调试微信小程序
在本地运行小程序时会自动打包出一个 dist 文件，首次运行小程序需要在微信开发中工具中导入项目。
-
修改
package.json："scripts": { "dev:mp-weixin": "uni -p mp-weixin" } -
终端运行：
npm run dev:mp-weixin -
微信开发者工具：
- 导入
dist/dev/mp-weixin目录 - 顶部菜单 → 设置 → 安全 → 开启服务端口
- 导入
六、高效开发技巧
- 代码片段：输入
uButton快速生成uni-button组件 - 跨端调试：使用
process.env.UNI_PLATFORM判断运行平台 - 快捷键：
Ctrl+Shift+P打开命令面板Alt+Shift+F代码格式化
七、常见问题急救箱
Q1：插件安装失败？
- 尝试用管理员身份运行VS Code
- 检查网络是否可访问
registry.npmmirror.com
Q2：H5请求出现跨域？
-
在
vue.config.js配置代理：devServer: { proxy: { '/api': { target: 'http://your-api.com', changeOrigin: true } } }
Q3：微信开发者工具无法连接？
- 检查是否开启服务端口
- 确认项目目录路径没有中文
- 重启微信开发者工具和VS Code
八、项目打包发布
# 小程序打包
npm run build:mp-weixin
# H5打包
npm run build:h5
生成文件在dist/build目录下，各平台按要求上传即可
九、DCloud插件使用
VSCode不能像Hbuilder X一样一键导入插件，一般用cli创建的项目要使用插件，一般有两种方式，第一种是支持npm安装的，那就用npm最好，如uViewUI，另一种不支持npm安装的，那就下载对应的zip压缩包，放到项目中，这种一般会有两个版本，我们选择非uni_modules版本，如uCharts。
这点确实没有Hbuilder X方便，不过导入第三方插件这种事情不是经常做，这还是可以接受的。
结语
通过以上步骤，你已经成功在VS Code中搭建了UniApp开发环境。建议从H5开发开始练手，逐步尝试小程序、App等多端适配。遇到问题可查看uni-app官方文档，或加入开发者社区交流。动手实践是掌握的关键，现在就开始创建你的第一个跨平台应用吧！
参考资料：