Mastering OpenTiny: Build Cross‑Framework Admin Apps and Custom Themes in Minutes

What is OpenTiny?

OpenTiny is an enterprise‑grade component library solution that supports PC and mobile platforms, offering Vue2, Vue3, and Angular stacks. It includes a theme configuration system, admin templates, and a CLI tool to accelerate web application development.

Five Key Advantages

Cross‑end, cross‑framework enterprise‑level front‑end component library.

Innovative renderless architecture that combines business‑logic‑oriented development with HOC and scoped‑slot patterns.

Rich scenario coverage with over 150 components, proven in Huawei internal IT systems and MetaERP.

Complete ecosystem: CLI scaffolding, ready‑to‑use admin templates, and theme configuration system.

Configurable components supporting both tag‑based and configuration‑based usage, ideal for low‑code platforms.

Seamless Vue2‑to‑Vue3 Migration

OpenTiny enables a single codebase to run on both Vue2 and Vue3, allowing Vue2 projects to upgrade to Vue3 without modifying component APIs, preserving functionality and business continuity.

Hands‑On Experiment 1: Scaffold an Admin System

Install the TinyCLI, initialize a project, and start development using the following commands: tiny init pro During initialization, provide the project name, description, and select the "vue" tech stack. tiny start This command launches the development server with hot‑reloading. tiny build Builds the project and outputs compiled files in the dist directory for deployment.

Hands‑On Experiment 2: Theme Customization

The theme configuration system lets users create or copy themes, edit basic style tokens such as colors, and publish the theme as a package.

Publish the theme and install it via npm: npm install @opentiny/vue-custom1 Import the theme stylesheet in main.js:

import '@opentiny/vue-custom1/index.css'