当前位置：首页 > article >正文

在VSCode中开发一个uni-app项目

article 2025/8/27 7:19:02

创建项目

使用命令行工具（例如 vue-cli）来创建一个新的 uni-app 项目。
创建以JavaScript开发的工程

npx degit dcloudio/uni-preset-vue#vite my-vue3-project
//或者
npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project

创建以TypeScript开发的工程

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

创建好之后，在执行

npm install

配置VSCode

在VSCode中使用需要安装一些插件来辅助开发

uni-helper：主要是增加代码提示功能
uni-create-view：主要是帮助我们快速创建uniapp视图和组件，创建视图页面时将自动添加 pages.json 中

创建页面时也可以自行创建，然后在pages.json中手动配置路由。

在运行时，需要先在小程序的manifest.json文件中配置appid
在这里插入图片描述

此appid在微信公众平台中查看

在这里插入图片描述

项目运行调试

先执行dev:mp-weixin
在这里插入图片描述
执行完成后，项目中会出现dist文件夹，之后打开微信开发者工具，点击导入，选中该项目下dist文件夹中的mp-weixin，导入成功后，输入微信公众平台中查看的appid即可创建，成功运行在微信开发者工具中。
在这里插入图片描述

路由配置

小程序的主包是有限制大小的，太大就不能运行，所以在创建路由页面的时候需要尽量的创建子包，进行分包创建，避免这个问题。

{"pages": [{"path": "pages/home/index","style": {"navigationBarTitleText": "uni-app"}},{"path": "pages/my/index","style": {"navigationBarTitleText": "uni-app"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"subPackages": [{"root": "games","pages": [{"path": "pages/game1/index","style": {"navigationBarTitleText": "小游戏"}},{"path": "pages/game2/index","style": {"navigationBarTitleText": "小游戏"}}]}]
}