海灵总结

海灵提示：泡杯茶的功夫，我们来看看如何在VS Code中开发Vue3版本的uni-app项目。你可以通过命令行或手动下载模板来创建项目并安装依赖。项目支持多种平台的运行与构建命令，常用的是H5和微信小程序。配置好manifest.json中的小程序appid后，运行编译命令，再将输出的对应目录导入微信开发者工具即可调试。

创建项目(基于Vue3)

命令创建

执行命令前请确定是否正确安装了npx

# 创建以 javascript 开发的工程  
npx degit dcloudio/uni-preset-vue#vite my-vue3-project  

# 创建以 typescript 开发的工程  
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

手动复刻

如果遇到网络问题，可以手动复刻项目
打开uni-preset-vueGitHub地址,本次创建的vue3+typescript项目所以将分支切换到vite-ts分支,然后下载到本地.

安装依赖

1	npm install

或者

1	yarn install

运行构建项目

打开package.json文件,找到scripts字段,可以看见所有的命令,下面是所有的命令

"scripts": {
 "dev:app": "uni -p app", // 运行app项目，可以在浏览器中预览
 "dev:app-android": "uni -p app-android", // 运行app项目，并在Android模拟器或真机上调试
 "dev:app-ios": "uni -p app-ios", // 运行app项目，并在iOS模拟器或真机上调试
 "dev:custom": "uni -p", // 运行自定义平台的项目，需要在命令后面指定平台名称
 "dev:h5": "uni", // 运行h5项目，可以在浏览器中预览
 "dev:h5:ssr": "uni --ssr", // 运行h5项目，并开启服务端渲染
 "dev:mp-alipay": "uni -p mp-alipay", // 运行支付宝小程序项目，并在支付宝开发者工具中调试
 "dev:mp-baidu": "uni -p mp-baidu", // 运行百度小程序项目，并在百度开发者工具中调试
 "dev:mp-jd": "uni -p mp-jd", // 运行京东小程序项目，并在京东开发者工具中调试
 "dev:mp-kuaishou": "uni -p mp-kuaishou", // 运行快手小程序项目，并在快手开发者工具中调试
 "dev:mp-lark": "uni -p mp-lark", // 运行飞书小程序项目，并在飞书开发者工具中调试
 "dev:mp-qq": "uni -p mp-qq", // 运行QQ小程序项目，并在QQ开发者工具中调试
 "dev:mp-toutiao": "uni -p mp-toutiao", // 运行头条小程序项目，并在头条开发者工具中调试
 "dev:mp-weixin": "uni -p mp-weixin", // 运行微信小程序项目，并在微信开发者工具中调试
 "build:app": "uni build -p app", // 构建app项目，生成打包文件
 "build:app-android": "uni build -p app-android", // 构建app项目，并生成Android打包文件
 "build:app-ios": "uni build -p app-ios", // 构建app项目，并生成iOS打包文件
 "build:custom": "uni build -p", // 构建自定义平台的项目，需要在命令后面指定平台名称
 "build:h5": "uni build", // 构建h5项目，生成静态网页文件
 "build:h5:ssr": "uni build --ssr", // 构建h5项目，并开启服务端渲染，生成静态网页文件和服务端代码文件
 "build:mp-alipay": "uni build -p mp-alipay", // 构建支付宝小程序项目，生成小程序代码文件
 "build:mp-baidu": "uni build -p mp-baidu", // 构建百度小程序项目，生成小程序代码文件
 "build:mp-jd": "uni build -p mp-jd", // 构建京东小程序项目，生成小程序代码文件
 "build:mp-kuaishou": "uni build -p mp-kuaishou", // 构建快手小程序项目，生成小程序代码文件
 "build:mp-lark": "uni build -p mp-lark", // 构建飞书小程序项目，生成小程序代码文件
 "build:mp-qq": "uni build -p mp-qq", // 构建QQ小程序项目，生成小程序代码文件
 "build:mp-toutiao": "uni build -p mp-toutiao", // 构建头条小程序项目，生成小程序代码文件
 "build:mp-weixin": "uni build -p mp-weixin", // 构建微信小程序项目，生成小程序代码文件
 "build:quickapp-webview": "uni build -p quickapp-webview", // 构建快应用webview项目，生成快应用代码文件
 "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei", // 构建快应用webview华为项目，生成快应用代码文件
 "build:quickapp-webview-union": "uni build -p quickapp-webview-union", // 构建快应用webview联盟项目，生成快应用代码文件
 "type-check": "vue-tsc --noEmit" // 检查vue文件中的typescript类型错误，不生成js文件
 },

可以看见有许多的命令,我们常用的命令如下:

npm run dev:h5 运行h5项目,可以在浏览器中预览
npm run dev:mp-weixin 运行微信小程序项目,并在微信开发者工具中调试

配置程序

官方文档

构建微信小程序项目

打开项目manifest.json,manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。

设置appid

找到这里设置对应的appid

"mp-weixin" : {
        "appid" : "",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true
    },

构建

运行npm run dev:mp-weixin命令,然后打开微信开发者工具,选择dist/dev/mp-weixin目录,点击确定,就可以看见效果了.

在vscode上开发nui-app