iui Design 是一款基于uni-app
的前端组件库,它提供了一套可复用、易扩展、低耦合的移动端 UI 组件库,帮助开发者快速搭建移动应用。
设计灵感来自ArcoDesign,感谢巨人!
当前版本为早期预览版,可能存在各种问题。欢迎大家进行反馈。
iui Design 遵循 Apache-2.0 开源协议,意味着您无需支付任何费用,也无需授权,即可将 iui Design 应用到您的产品中。
注意
这并不意味着您可以将 iui Design 应用到非法的领域,比如涉及赌博,暴力等方面。如因此产生纠纷或法律问题,iui Design 相关方及云磁数字不承担任何责任。
使用前,请确保你已经学习过 uni-app
的使用,你可以阅读 uni-app 文档。
方式一:通过 npm 安装
npm i iui-design
# or
yarn add iui-design
方式二:通过 HBuilderX 导入
如果您是使用 HbuilderX 开发的用户,您可以在 uni-app
插件市场通过 uni_modules
的形式进行安装。
iui-design
依赖 sass
,您必须要安装此插件,否则无法正常运行。
插件市场
中搜索 sass
进行安装。# 安装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>
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"
}
}
}
如果你觉得 iui- 这个前缀太长了,可以在 easycom 规则中再添加一条规则。如下,你就可以使用 i- 作为前缀。当然,你也可以自定义你喜欢的前缀。
{
"easycom": {
"custom": {
"^iui-(.*)": "根据你的安装方式填写路径",
"^i-(.*)": "根据你的安装方式填写路径"
}
}
}
感谢你使用 iui Design
以下是关于向 iui Design 提交反馈或代码的指南。在向 iui Design 提交 issue 或者 PR 之前,请先花几分钟时间阅读以下内容。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。