uni app vue3 + uni ui 配置

553 阅读1分钟

由于 uni app 官方文档太烂,所以自己单独记录一下。

uni app 已经支持 vite + ts + vue3 了,官网也有,但是不明显。

通过下面的命令创建:

npx degit dcloudio/uni-preset-vue#vite-ts 你的项目名称

cd 你的项目名称
pnpm i

没有 pnpm 用 npm 替换

添加 uni-ui

uni ui 在线预览:vue3-hellouniapp.dcloud.net.cn/pages/extUI…

uni ui 文档:uniapp.dcloud.net.cn/component/u…

pnpm i sass -D

pnpm i @dcloudio/uni-ui

自动导入需要配置 easycom。
打开 src/pages.json,然后添加:

{
    "easycom": {
        "autoscan": true,
        "custom": {
        // uni-ui 规则如下配置
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    }
    // ... 省略原有内容
}

测试效果:

效果.png