Vue 3 · MIT · 与组件库同版本号

后台模板
djm-ui-admin

四种布局的壳，登录、个人中心、修改密码、账号设置，403 / 404 / 500 / 维护四个异常页，再加用户、部门、数据字典、文件中心四个业务页。菜单选中只回传 key，路由用你自己的。

$npm i djm-ui djm-ui-admin

接入文档 npm 看示例应用

包含什么

包里只有结构和样式，没有演示数据，也没有内部接口。api 里没实现的方法会抛错，不会返回空列表。

后台壳

侧边菜单、顶部通栏、混合导航、双列菜单共用一套页面，切换布局只改一个参数。

页签、面包屑、用户菜单、皮肤面板
侧栏配色分跟随、浅色、深色、品牌色四档
宽度小于 960px 时菜单收进抽屉

账号与异常页

登录页只依赖 api.auth.login
改密、资料、设置各走各的接口
异常页按 code 区分，标题和说明可传

两个页面范式

用户页是列表页范式：筛选、表格、分页、增删改都在。工作台是统计卡片范式：四个 KPI 加一张待办表。

列表：多条件查询、批量操作、弹窗表单
统计：KPI 卡片、待办列表
部门、字典、文件三个页按同样结构写

模板自带页面

登录工作台用户管理部门数据字典文件中心个人中心修改密码账号设置 403 / 404 / 500 / 维护

你需要实现的接口

auth.loginauth.profileauth.changePassword stats.overviewusers.listusers.create depts.treedicts.typesfiles.list

接入三步

装包，把后端接口包成 api 对象注入，再放上壳。壳不管路由，只把选中的 key 传出来。

1. 安装与注入main.js

import { createApp } from 'vue'
import { initTheme } from 'djm-ui'
import 'djm-ui/styles'
import 'djm-ui-admin/styles'
import { ADMIN_API } from 'djm-ui-admin'
import App from './App.vue'
import api from './api.js'

initTheme()
createApp(App)
  .provide(ADMIN_API, api)
  .mount('#app')

2. 放上壳App.vue

<AdminLayout
  :menus="menus"
  :active-key="active"
  :tabs="tabs"
  :user="user"
  title="我的后台"
  @select="go"
  @tab-close="closeTab"
  @logout="logout"
>
  <component :is="pages[active]" :key="active" />
</AdminLayout>

// 用 vue-router 时，选中后 push 一次
function go (key) {
  router.push({ name: key })
}

3. 子路径部署vite.config.js

export default defineConfig({
  base: '/followup/'
})

// 模板里没有写死根路径；/followup 下跑过登录、页签和表格

和示例应用的区别

示例应用的数据是写死的，用来演示效果。模板包不带数据，壳和页面结构跟示例应用一样。

示例应用

带演示数据和演示账号，不接后端，用来评估效果。

后台模板

没有演示数据，壳和页面结构都在，数据从你注入的 api 取。

组件库

模板依赖组件库。只要组件、自己搭壳的话，装 djm-ui 就行。

常见问题

模板包含演示数据吗？

不包含。演示数据放在仓库的 admin/demo 里，npm 包里没有。页面调用到的接口都要你在 api 对象里实现。

必须用 vue-router 吗？

不必须。壳通过 select 事件回传菜单 key，用 hash、自研路由或 vue-router 都行，切换逻辑写在你的容器里。

能只装模板不装组件库吗？

不能。djm-ui 和 vue 都是 peer 依赖，两个包要一起装，版本保持一致。

能部署在 /followup 这类子路径吗？

可以。Vite 里配 base，静态资源和路由都按子路径生成。

许可与升级

MIT 许可，可商用、修改、随产品分发，LICENSE 随包提供。版本跟 djm-ui 同步，升级时两个包一起升，破坏性变更写在 CHANGELOG 里。

后台模板djm-ui-admin