PiUI - 高质量UI移动组件库发布啦~

2021-10-14

PiUI 和圆周率π相同的读音[Pai UI]，表示无限的可能性，我们希望PiUI本身足够灵活，同时开发者能够借助它的能力，开发出无限可能性的应用。
【PiUI - 高质量UI移动组件库发布啦~】PiUI是基于uniapp，高质量UI移动组件库，基于 vue.js 语法，可编译到不同的平台

高效开发
灵活扩展，丰富的属性配置
提供 50+ 高质量组件，覆盖移动端各类场景
高性能
完善的文档和示例
按需引入
支持主题定制

Website 网站官方文档：https://piui.sadais.com/
GITHUB仓库：https://github.com/sadais-org/piui
GITEE仓库：https://gitee.com/org-sadais/piui
欢迎大家star和fork，你的支持是我们持续更新的动力！
扫码体验[piui]小程序

PiUI - 高质量UI移动组件库发布啦~

文章图片

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规则后，组件自动按需引入

推荐阅读

上一篇：手摸手带大家实现一套小程序的全埋点SDK方案

下一篇：再聊t-io网络编程架构的基础知识（半包和粘包）