众所周知 Hbuilder X 是 uniapp 的标配，而 vscode 作为宇宙第一编辑器怎么能不行呢，那么如何让 uniapp 的项目在 vscode 中开发、运行呢？一起来探索一下吧！！！
vscode 配置
安装插件： uni-helper
支持 vscode 中编写并实时更新 HBuilderX 的代码和预览
cli 创建项目
根据 uniapp 官方介绍的 vue-cli 命令行创建方法
全局安装 vue-cli 3.x（如已安装请跳过此步骤）
npm install -g @vue/cli
创建 uni-app 项目
vue create -p dcloudio/uni-preset-vue uniapp-demo
选择默认模板 项目创建完成
运行、发布 项目
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
package.json 中的命令：
npm run serve // h5 浏览器运行
npm run dev:mp-weixin // 微信小程序
在本地运行小程序时会自动打包出一个 dist 文件，首次运行小程序需要在微信开发中工具中导入项目。
一键运行 npm 脚本
或者使用 npm 脚本 手动执行项目的打包运行，一键运行 npm 更便捷
将 资源管理器下的 npm 脚本栏打开
在侧边栏 npm 脚本下会生成项目对应的 npm 操作，点击运行即可执行对应的操作
为什么使用 cli 模式创建项目呢？
如果想用其他 ide 开发 uni-app，只能使用 cli 模式
因为其他 ide 没有内置 uni-app 的编译器，所以其他 ide 开发 uni-app，只能把编译器安装在项目下，也就是 cli 创建的项目格式。
HBuilderX 可视化创建、运行、发布项目，底层调用的也是 npm 的 run、build 等命令。只是编译器不在项目下，而是在 HBuilderX 的目录下。
运行 cli 命令行报错
拉取 git 代码到本地
执行命令行时替换成项目地址，运行即可创建
vue create -p D:\Project\uniapp\uni-preset-vue uni_demo
vscode 中运行小程序
VSCode 跟 Hbuilder x 不同的是，VSCode 不会自动在微信开发者工具导入项目并打开，我们需要手动导入项目，仅在首次运行小程序时需要手动导入。
-
vscode 中运行小程序的项目 yarn run build:mp-weixin 在执行过程中会自动将项目打包到 dist 文件下
-
在微信开发者工具中导入小程序项目（在项目导入之前需要先打包）
需要注意的是 开发者工具选择的 appId，则需要与 manifest.json 文件中的 appId 保持一致，否则开发者工具会报错
若选择项目后出现无法找到项目对应的 app.json 或 project.config.json 文件的提示，需要找到项目打包后的 dist 文件
app.json 或 project.config.json 文件 位于 dist 目录下： …/dist/dev/map-weixin
项目导入成功！！！
导入后若页面为空白，打开控制台查看是否存在报错
检查发现报错提示为： window.WeixinJSBridge.beforeinvoke is not a function
解决方案： 调整 基础库的版本
将基础版本库下调至 2.24.2
此时项目能运行，但仍有报错 仍为版本库问题，可能需要升级 微信开发者工具版本
按照提示更新版本
版本升级后不会再出现运行报错