TinyPro

TinyCLI 是一个跨平台的前端工程化 CLI 工具，为开发者提供一系列开发套件及工程插件，覆盖前端开发的整个链路，保证团队开发过程的一致性和可复制性。

TinyPro 是 TinyCLI 的一个套件，是一个开箱即用、前后端分离的后台管理模板。

特性：

• 支持 NestJS / Spring Boot 后端
• 支持通过可视化方式配置菜单
• 细粒度权限管理：角色、用户、菜单、组件权限
• 支持多种构建工具：Webpack / Vite / Rspack / Farm
• 多级菜单
• 页签模式
• Mock 数据
• 主题定制
• 国际化

官网：https://opentiny.design/vue-pro

TinyCLI一行命令————初始化一个后台管理模板

请确保您安装了Node.js、NPM、TinyCLI。

官方推荐用 npm 安装 TinyCLI：

npm install @opentiny/cli -g
tiny -v

查看是否安装成功：

tiny -v

使用 tiny init 命令，创建pro项目：

tiny init pro

选择 Vue 技术栈，初始化完成后，项目结构应该为：

tiny-pro
  nestJs    # 后端服务
  web       # 前端服务

后端启动

后端服务支持 Docker 启动 与 命令启动 两种方式。

Docker 启动（方式一）

请确保您安装了 Docker。

在 tiny-pro/nestJs 下执行以下命令，启动后端服务：

docker compose up -d

命令启动（方式二）

请确保您安装了 MySQL、Redis。

在启动项目前请您做好如下检查：

• MySQL 服务可以正常访问
• Redis 服务可以正常访问
• MySQL 中存在 .env 文件中 DATABASE_NAME 字段定义的数据库，且该数据库为空
• .env 文件中 DATABASE_SYNCHRONIZE 为 true

更详细的文档请参考 TinyPro 官网：https://opentiny.design/vue-pro

本地项目启动运行

如果你有意愿参与本项目的贡献，可以通过以下方式启动项目。共三种模式，按是否需要 MySQL / Redis 选择：

以下以 pnpm 为例；npm 用户请注意：根目录使用 pnpm workspace，npm 无法使用根目录脚本，请进入对应子项目目录执行（命令见各模式末尾的 npm 等价命令）。

模式一：纯前端 Mock（无需 MySQL / Redis，推荐快速体验）

Mock 服务和前端都由 tinyvue 提供，无需启动任何后端：

pnpm i
pnpm dev

pnpm dev 会同时启动 Mock 服务（8848）与 Vite 开发服务。启动成功之后，会自动打开浏览器，并访问：http://localhost:3031/。

npm 等价命令：

cd template/tinyvue
npm i
npm run start:mock

模式二：NestJS Mock 联调（无需 MySQL / Redis）

NestJS 以 MOCK_MODE=true 启动，只加载 mock 能力：演示接口、登录、用户信息、角色权限、菜单、国际化、系统管理页的增删改查全部由 NestJS 内存 mock 数据接管（数据定义在 template/nestJs/src/mock/data/），适合联调后端接口形态或调试前端页面。

pnpm i

# 终端 1：启动 NestJS mock 服务
pnpm nest:mock

# 终端 2：启动前端
pnpm dev:vite

访问 http://localhost:3031/，账号 admin@no-reply.com / admin。修改 template/nestJs/src/mock/data/ 下的数据文件会热更新，重启服务后还原。

npm 等价命令：

# 终端 1
cd template/nestJs
npm i
npm run start:mock

# 终端 2
cd template/tinyvue
npm i
npm run dev

模式三：真实数据库联调（需要 MySQL / Redis）

演示接口走真实业务路由，数据来自 MySQL。

前提是 MySQL / Redis 服务已成功启动。

1. 创建一个空的 MySQL 数据库 demo_tiny_pro

# 连接 MySQL 数据库
mysql -u root -p

# 创建 demo_tiny_pro 数据库
create database demo_tiny_pro;

# 查看数据库是否创建成功
show databases;

2. 启动 Redis，并配置环境变量

Redis 不需要安装，只需要点击 redis-server.exe 即可启动。

在系统环境变量的 Path 中配置 Redis 目录，比如：C:\Program Files\Redis\。

验证 Redis 是否连接成功：

在命令行终端输入：

redis-cli

在可交互终端中输入：ping，如果 Redis 连接成功的话，应该返回：PONG。

$ redis-cli
127.0.0.1:6379> ping
PONG

3. 配置后端环境变量

cp template/nestJs/.env.example template/nestJs/.env

编辑 template/nestJs/.env，根据本机 MySQL 配置填写 DATABASE_HOST、DATABASE_PORT、DATABASE_USERNAME、DATABASE_PASSWORD 和 DATABASE_NAME。

4. 安装依赖并启动前后端

# 安装依赖
pnpm i

# 启动后端，执行该命令之后，会初始化 MySQL 数据库 demo_tiny_pro 的表结构，并填充表数据
pnpm dev:backend

# 启动前端
pnpm dev:vite

启动成功之后，会自动打开浏览器，并访问：http://localhost:3031/。

npm 等价命令：

# 终端 1
cd template/nestJs
npm i
npm start

# 终端 2（dev.env 中 VITE_USE_MOCK 默认为 false，直接 dev 即代理到真实后端）
cd template/tinyvue
npm i
npm run dev

说明：三种模式下前端请求形式不变（均为 /api/**）。模式二、三的区别在于 NestJS 的启动方式（pnpm nest:mock 或 pnpm dev:backend），由后端决定演示接口的数据来源（内存 mock 或 MySQL）。

维护者

添加官方小助手微信：opentiny-official，加入我们的技术交流群。

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Kagol 💻

GaoNeng 💻

liukun 💻

huqi 💻

CatWithFish 💻

ajaxzheng 💻

zhaoxiaofeng876 💻

vae 💻

This project follows the all-contributors specification. Contributions of any kind welcome!