【uni-app】uni-ui 组件库的使用

安装 uni-ui 组件库

这里我使用 npm 进行安装。

这里我使用 vite，没有使用 vue-cli，因此不用做transpileDependencies的相关配置。

准备 sass

vue-cli 项目请先安装 sass 及 sass-loader，如在 HBuliderX 中使用，可跳过此步。

• 安装 sass

 npm i sass -D   或   yarn add sass -D  

• 安装 sass-loader

npm i sass-loader@10.1.1 -D   或   yarn add sass-loader@10.1.1 -D

安装uni-ui

npm i @dcloudio/uni-ui

配置自动导入组件

// pages.json
{
  // 组件自动导入
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置  // [!code ++]
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" // [!code ++]
    }
  },
  "pages": [
    // …省略
  ]
}

安装类型声明文件

npm i -D @uni-helper/uni-app-types @uni-helper/uni-ui-types

配置类型声明文件

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types", // uni-app 组件类型
      "@uni-helper/uni-ui-types" // uni-ui 组件类型  // [!code ++]
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  }
}