乐趣区

关于前端:PiUI-高质量UI移动组件库发布啦

jiezi

PiUI

和 圆周率 π 雷同的读音 [Pai UI]，示意有限的可能性，咱们心愿PiUI 自身足够灵便，同时开发者可能借助它的能力，开发出有限可能性的利用。

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] 小程序

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

退出移动版