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"
]
}
再次重启你的编辑器或 IDE 以确保服务启动并正确加载配置。
现在再打开vue文件,uni-ui的uni-card已经变绿了,能够识别类型了:
鼠标放上去,能够显示正确的类型了;