本项目采用 Monorepo(单体仓库)架构,基于 pnpm workspace 管理多个应用和公共包。
fantastic-admin/
├── apps/ # 应用目录
│ ├── core # 应用源码
│ └── example # 示例应用
├── packages/ # 公共包目录
├── docs/ # 文档站点
├── scripts/ # 脚本工具
└── package.json # 根目录 package.json应用源码,不含示例代码,仅保留必要的项目结构,适合直接用于项目开发。
使用时建议从此处复制一份在 apps/ 目录下,同时修改 apps/<app>/package.json 中 name 属性。
这样做的目的是确保项目内始终保留一份原始应用源码,方便后续扩展更多应用。
示例应用,包含丰富的示例代码和最佳实践,适合学习和参考。
根目录 package.json 提供了统一的命令入口:
# 安装所有依赖
pnpm install
# 启动开发服务器(交互式选择应用)
pnpm dev
# 构建项目(交互式选择应用)
pnpm build
# 预览构建产物(交互式选择应用)
pnpm serve
# 代码检查
pnpm lint其中 pnpm lint 会按以下顺序执行:
vue-tsceslintstylelint报错
如果无法正常安装依赖,可能是因为 npm 默认源无法访问,可以尝试执行 pnpm config set registry https://registry.npmmirror.com/ 切换为国内 npmmirror 镜像源(也可以使用 nrm 一键切换源),然后删除 node_modules/ 文件夹并重新安装依赖。
如果明确知道要操作哪个应用,也可以直接使用 pnpm filter 命令:
# 运行指定应用
pnpm -F @fantastic-admin/core dev
# 构建指定应用
pnpm -F @fantastic-admin/core build
# 在指定应用下执行任意命令
pnpm -F @fantastic-admin/core lint应用目录中的 lint 命令仅执行 vue-tsc ,用于当前应用的类型检查。
在根目录安装的依赖为所有应用和包共享,通常是:
每个应用或包可以拥有自己独立的依赖,安装在各自的 node_modules/ 目录下。
# 为指定应用添加依赖
pnpm add axios -F @fantastic-admin/core
# 为根目录添加开发依赖
pnpm add -D typescript -w