iui Design基于 Uni-app 的 Vue3 UI 组件库
iui Design 是由云磁数字「用户体验中心实验室」打造一套基于 Vue3 的 Uniapp 组件库，于 2023 年 8 月 8 日正式开源。
它提供了一套可复用、易扩展、低耦合的移动端 UI 组件库，帮助开发者快速搭建移动应用。
预览
使用微信搜索小程序 iui Design 进行体验。
移动端 H5：预览地址
安装
使用前，确保你已经学习过 uni-app 的使用，可以阅读 uni-app 文档。
组件库
方式一：通过 npm 安装
npm i iui-design
# or
yarn add iui-design
方式二：通过 HBuilderX 导入
如果你是使用 HbuilderX 开发的用户，可以在 uni-app 插件市场通过 uni_modules 的形式进行安装。
Scss 插件
iui-design 依赖 sass，你必须要安装此插件，否则无法正常运行。
- 如果你使用的是 HbuilderX，你可以在
插件市场中搜索sass进行安装。 - 如果你的项目是由 vue-cli 创建的，通过以下命令安装对 sass(scss)的支持，如果已安装，略过。
# 安装sass
npm i sass -D
# 安装sass-loader
npm i sass-loader -D
配置
引入样式
在 App.vue 中引入 iui-design 的样式。
<style lang="scss">
// npm 模式安装
@import "iui-design/style/index.scss";
// HBuilderX 插件市场安装
@import "@/components/iui-design/style/index.scss";
</style>
在 uni.scss 中引入 iui-design 的主题样式和变量。
<style lang="scss">
// npm 模式安装
@import "iui-design/style/theme.scss";
// HBuilderX 插件市场安装
@import "@/components/iui-design/style/theme.scss";
</style>
easycom 模式
iui-design 支持 easycom 模式，你可以在 pages.json 中配置 easycom，然后无需引入即可使用组件。
npm 模式安装：
{
"easycom": {
"custom": {
"^iui-(.*)": "iui-design/components/iui-$1/iui-$1.vue"
}
}
}
HBuilderX 插件市场安装：
{
"easycom": {
"custom": {
"^iui-(.*)": "@/components/iui-design/components/iui-$1/iui-$1.vue"
}
}
}
评论