安装uni-ui组件库

听海边涛声

已于 2024-09-12 18:31:39 修改

阅读量136

点赞数 2

文章标签： uni-app

于 2024-09-12 18:24:57 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/142175026

版权

https://uniapp.dcloud.net.cn/component/

在这里插入图片描述

uni-ui支持多种使用方式：

https://uniapp.dcloud.net.cn/component/uniui/quickstart.html

在这里插入图片描述

用pnpm安装

https://uniapp.dcloud.net.cn/component/uniui/quickstart.html#npm%E5%AE%89%E8%A3%85

如果用npm 安装，使用命令npm i @dcloudio/uni-ui，我们使用pnpm安装，改为pnpm i @dcloudio/uni-ui：
在这里插入图片描述

配置easycom：自动导入组件

打开项目根目录下的 pages.json 并添加 easycom 节点：
在这里插入图片描述

  // 组件自动引入规则
  "easycom": {
    // 是否开启自动扫描，开启后将会自动扫描符合 `components/组件名称/组件名称.vue` 目录结构的组件
    "autoscan": true,
    // 以正则方式自定义组件匹配规则
    // 如果 `autoscan` 不能满足需求，可以使用 `custom` 自定义匹配规则
    "custom": {
      // uni-ui 规则如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  },

我们在页面中使用uni-ui的双标题卡片 + 略缩图卡片来看看能否正常使用：
在这里插入图片描述

在微信开发者工具中看到了结果：
在这里插入图片描述

为uni-ui组件安装类型声明文件

https://uni-typed.netlify.app/

在这里插入图片描述

安装依赖

https://uni-typed.netlify.app/guide/uni-ui-types.html
在这里插入图片描述

本来应该使用npm i -D @uni-helper/uni-app-types @uni-helper/uni-ui-types同时安装 @uni-helper/uni-app-types和@uni-helper/uni-ui-types，因为我已经安装过了 @uni-helper/uni-app-types，所以此处只安装@uni-helper/uni-ui-types就可以了。

改为pnpm安装，执行pnpm i -D @uni-helper/uni-ui-types：
在这里插入图片描述

package.json文件中自动更新了：
在这里插入图片描述

更新tsconfig.json文件

更新 tsconfig.json，确保：

compilerOptions.moduleResolution 为 Bundler
compilerOptions.types 包含 @uni-helper/uni-app-types 和 @uni-helper/uni-ui-types
vueCompilerOptions.plugins 包含 @uni-helper/uni-app-types/volar-plugin
include 包含 Vue 相关源码文件

tsconfig.json文件示例：

 {
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "moduleResolution": "Bundler",
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      // uni-app + Vue 3 使用 Vite 构建，需要安装 vite
      "vite/client",
      // uni API 相关的 TypeScript 类型，需要安装 @dcloudio/types
      "@dcloudio/types",
      // 为原生微信小程序wx API 相关的 TypeScript 类型，需要安装 miniprogram-api-typings
      "miniprogram-api-typings",
      // 为 uni-app 组件提供 TypeScript 类型，需要安装 @uni-helper/uni-app-types
      "@uni-helper/uni-app-types",
      // 为 uni-ui 组件提供 TypeScript 类型，需要安装 @uni-helper/uni-ui-types
      "@uni-helper/uni-ui-types"
    ]
  },
  "vueCompilerOptions": {
    "plugins": [
      // 调整 Volar（Vue 语言服务工具）解析行为，用于为 uni-app 组件提供 TypeScript 类型
      "@uni-helper/uni-app-types/volar-plugin"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "*.d.ts"
  ]
}