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

创建项目

使用命令行工具(例如 vue-cli)来创建一个新的 uni-app 项目。

创建以JavaScript开发的工程

javascript 复制代码
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
//或者
npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project

创建以TypeScript开发的工程

javascript 复制代码
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

创建好之后,在执行

javascript 复制代码
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即可创建,成功运行在微信开发者工具中。


路由配置

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

javascript 复制代码
{
    "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": "小游戏"
                    }
                }
            ]
        }
    ]
}

当页面路由配置好之后,在跳转其他页面展示的是该页面的路径而不是页面内容时,可以尝试清除缓存

相关推荐
ᥬ 小月亮34 分钟前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
要加油哦~3 小时前
工具 | 解决 VSCode 中的 Delete CR 问题
ide·vscode·编辑器
耶啵奶膘4 小时前
uniapp+vue3——通知栏标题纵向滚动切换
uni-app
未来之窗软件服务5 小时前
基于 Nginx 与未来之窗防火墙构建下一代自建动态网络防护体系—仙盟创梦IDE
网络·ide·nginx·服务器安全·仙盟创梦ide·东方仙盟
yao000377 小时前
Claude 4.0 终极编程指南:模型对比、API配置与IDE集成实战
ide·ai编程
The_era_achievs_hero8 小时前
UniappDay03
vue.js·微信小程序·uni-app
我有一只肥螳螂8 小时前
idea监控本地堆栈
java·ide·intellij-idea
界面开发小八哥14 小时前
通用CI/CD软件平台TeamCity v2025.3全新发布——主要界面交互体验升级
ide·ci/cd·开发平台·teamcity
张乔2418 小时前
mybatisX的自定义模板生成
java·ide·intellij-idea
taoismimortal19 小时前
vscode目录,右键菜单加入用VSCode打开文件和文件夹(快速解决)(含删除)(脚本)
ide·vscode·编辑器