在vscoed 中运行 uniapp 项目

众所周知 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不会自动在微信开发者工具导入项目并打开，我们需要手动导入项目，仅在首次运行小程序时需要手动导入。

1. vscode中运行小程序的项目 yarn run build:mp-weixin 在执行过程中会自动将项目打包到 dist 文件下

2. 在微信开发者工具中导入小程序项目（在项目导入之前需要先打包）

需要注意的是 开发者工具选择的 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

此时项目能运行，但仍有报错 仍为版本库问题，可能需要升级 微信开发者工具版本

按照提示更新版本

版本升级后不会再出现运行报错

参考

1. 这可能是最好、最详细的VSCode开发uni-app教程吧