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

阿諪諪2025-06-05 22:35

创建项目

使用命令行工具（例如 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": "小游戏"
                    }
                }
            ]
        }
    ]
}

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