PiUI - 高质量UI移动组件库发布啦~
PiUI
和圆周率π
相同的读音[Pai UI],表示无限的可能性,我们希望PiUI
本身足够灵活,同时开发者能够借助它的能力,开发出无限可能性的应用。
【PiUI - 高质量UI移动组件库发布啦~】PiUI是基于uniapp,高质量UI移动组件库,基于 vue.js
语法,可编译到不同的平台
- 高效开发
- 灵活扩展,丰富的属性配置
- 提供 50+ 高质量组件,覆盖移动端各类场景
- 高性能
- 完善的文档和示例
- 按需引入
- 支持主题定制
GITHUB仓库:https://github.com/sadais-org/piui
GITEE仓库:https://gitee.com/org-sadais/piui
欢迎大家star和fork,你的支持是我们持续更新的动力!
扫码体验[piui]小程序
![PiUI - 高质量UI移动组件库发布啦~](https://img.it610.com/image/info9/29c9ff9369094806a5752d1bf697ac69.jpg)
文章图片
Background 背景 uniapp提供的vue语法(不完全支持),能比原生的写法(小程序原生语法作为对比)提高30%的效率。
但是仅仅使用uniapp提供的基础组件,是远远支撑不了现代移动端的业务复杂度。
借助
piui
的能力,可以让您基于uniapp,再增加至少50%的效率提升。Install 安装 使用脚手架【推荐】
基于
vue-cli
脚手架创建,更加通用的vue
项目配置,接入更加快捷,可以做到零配置直接运行步骤1: vue-cli安装(如果安装了可以跳过) 可以使用下列任一命令安装最新的
vue-cli
包:npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装之后,你就可以在命令行中访问
vue
命令。你可以通过简单运行 vue
,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。你还可以用这个命令来检查其版本是否正确:
vue --version
步骤2:文件生成 项目初始化我们通过vue-cli进行生成,以下项目名我使用my-project做示例,名字可以自定义
vue create -p sadais-org/uni-preset-vue my-project
命令输入后,选择默认模板,回车
步骤3:项目启动 在本地启动服务器来开发你的应用
cd my-project && npm run dev
非脚手架项目引入(HbuilderX / Uniapp Vue-Cli工程)
已初始化的项目,可以通过以下方式接入piui
piui
@sadais/piui-tool
源码都以es6 语法编写,如果是 vue-cli
工程,必须在vue.config.js
中声明其显式转译// vue.config.js
module.exports = {
transpileDependencies: ['@sadais/piui-tool', 'sadais-piui']
}
步骤1:安装piui 安装
piui
,以及piui工具库
yarn add sadais-piui @sadais/piui-tool
步骤2:引入piui
import Vue from 'vue';
import piui from "sadais-piui";
// 全局属性配置
const piuiConfig = {}Vue.use(piui, piuiConfig);
步骤3:引入piui样式文件 在App.vue文件中引入
@import 'sadais-piui/scss/index.scss';
在uni.css文件中引入
@import 'sadais-piui/scss/variable.scss';
步骤4:通过easycom模式全局按需引入 修改uniapp的pages.json文件,增加配置
"easycom": {
"^pi-(.*)": "sadais-piui/components/pi-$1/index.vue"
}
Usage 使用方法 配置easycom规则后,组件自动按需引入
推荐阅读
- 移动端h5调试方法
- python|8. 文件系统——文件的删除、移动、复制过程以及链接文件
- 被催稿了,所以聊聊|被催稿了,所以聊聊 长链接在移动端开发中如何做到和短链接一样高效
- 发扬“两路”精神和青藏铁路精神|发扬“两路”精神和青藏铁路精神 高质量推进工程建设
- 移动端事件绑定
- 移动用户体验设计(底部导航)
- SwiftUI|SwiftUI 动画组件之Lottie小型高质量交互式的开源动画文件格式
- 人工智能与智能系统3->|人工智能与智能系统3-> 机器人学3 | 移动机器人平台
- 移动5G网络下,如何做好网络主播,成为百万主播()
- 《孩子需要高质量的陪伴》摘抄()