PiUI

PiUI is based on UNIApp, a high quality UI mobile component library, based on vue.js syntax, can be compiled to different platforms

  • The efficient development
  • Flexible extension, rich property configuration
  • Provides 50+ high-quality components, covering various scenarios on the mobile terminal
  • A high performance
  • Complete documentation and examples
  • According to the need to introduce
  • Support theme customization

Website web site

Official document: https://piui.sadais.com/

Making warehouse: https://github.com/sadais-org/piui

GITEE Repository: https://gitee.com/org-sadais/piui

Welcome everyone star and Fork, your support is our motivation to keep updating!

Scan code experience [PIUI] small procedures

Background Background

Uniapp provides vUE syntax (not fully supported), which is 30% more efficient than native writing (applet native syntax as a comparison).

But using the basic components provided by UniApp alone is far from enough to support the business complexity of modern mobile terminals.

With piUI’s capabilities, you can add at least 50% more efficiency gains based on UniApp.

Install the installation

Use scaffolding

Based on vuE-CLI scaffolding creation, more general VUE project configuration, access more quickly, can do zero configuration directly run

Step 1: VUE-CLI installation (skip if installed)

You can install the latest VUE-CLI package using any of the following commands:

npm install -g @vue/cli
# OR
yarn global add @vue/cli
Copy the code

Once installed, you can access vue commands from the command line. You can verify that vue is installed successfully by simply running it and seeing if it displays a help list of all available commands.

You can also use this command to check if the version is correct:

vue --version
Copy the code

Step 2: File generation

The project initialization is generated through VUe-CLI. I use my-project as an example for the following project names, which can be customized

vue create -p sadais-org/uni-preset-vue my-project
Copy the code

After entering the command, select the default template and press Enter

Step 3: Start the project

Start the server locally to develop your application

cd my-project && npm run dev
Copy the code

Non-scaffolding project introduction (HbuilderX/Uniapp Vue-Cli project)

An initialized project can access the PIUI in the following ways

Piui@sadais /piui-tool source code is written in ES6 syntax, if the vue-CLI project, must declare its explicit translation in vue.config.js

// vue.config.js
module.exports = {
  transpileDependencies: ['@sadais/piui-tool'.'sadais-piui']}Copy the code

Step 1: Install PIUI

Install PIUI and the PIUI tool library

yarn add sadais-piui @sadais/piui-tool
Copy the code

Step 2: Introduce piUI

import Vue from 'vue';
import piui from "sadais-piui";

// Global attribute configuration
const piuiConfig = {}

Vue.use(piui, piuiConfig);
Copy the code

Step 3: Introduce the PIUI style file

Introduced in the app.vue file

@import 'sadais-piui/scss/index.scss';
Copy the code

In the uni.css file

@import 'sadais-piui/scss/variable.scss';
Copy the code

Step 4: Global on demand introduction through EasyCOM mode

Modify the pages. Json file of uniapp and add the configuration

"easycom": {
  "^pi-(.*)": "sadais-piui/components/pi-$1/index.vue"
}
Copy the code

Usage Usage

After configuring easyCOM rules, they are automatically imported on demand