# simple_zj

**Repository Path**: hello-caspar/simple_

## Basic Information

- **Project Name**: simple_zj
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-12
- **Last Updated**: 2026-08-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 2 企业后台模板

从 `geo_agent_web` 提炼出的独立后台骨架。保留成熟的侧栏菜单、顶栏、登录态、请求拦截和配置式表格思路，移除了 GEO、代理管理、品牌资源及具体后端地址。

## 技术版本

- Vue `2.7.14`（Options API）
- Element UI `2.15.14`（全局引入）
- Vue Router `3.6.5`
- Vuex `3.6.2`
- Axios `0.27.2`
- js-cookie `3.0.5`
- Vue CLI Service `5.0.8`

## 创建与安装

直接使用本模板：

```bash
cd /Users/chenpeng/Desktop/zm/vue2-admin-template
npm install
npm run dev
```

从空目录创建同版本项目时可执行：

```bash
npx @vue/cli@5 create vue2-admin-template
cd vue2-admin-template
npm install --save-exact vue@2.7.14 element-ui@2.15.14 vue-router@3.6.5 vuex@3.6.2 axios@0.27.2 js-cookie@3.0.5
npm install --save-dev --save-exact vue-template-compiler@2.7.14 @vue/cli-service@5.0.8 @vue/cli-plugin-babel@5.0.8 @vue/cli-plugin-eslint@5.0.8
```

## 目录

```text
src
├── api                    # 按业务模块管理接口与开发 mock
├── assets/styles          # 全局重置、布局和 Element UI 覆盖
├── components
│   ├── Breadcrumb         # 路由面包屑
│   ├── PageTools          # 搜索/重置/扩展操作区
│   ├── SvgIcon            # SVG symbol 与 Element 图标适配
│   ├── ThemeSettings      # 明暗主题、强调色与显示偏好
│   └── TableWrap          # 配置列、分页、选中与重置
├── layout
│   ├── components         # Sidebar、递归菜单、Navbar
│   └── index.vue          # 后台主体框架
├── router                 # 常量路由、业务路由、守卫
├── store/modules          # user、app 模块
├── utils                  # token、axios、公共校验
└── views                  # 登录、工作台、用户示例、404
```

## 接入真实项目

1. 修改 `.env.development` 和 `.env.production` 中的 `VUE_APP_BASE_API`，并将 `VUE_APP_USE_MOCK` 改为 `false`。
2. 在 `src/api` 按领域新增接口文件。响应推荐统一为 `{ code, data, message }`，页面会直接收到 `data`。
3. 在 `src/router/index.js` 的 `asyncRoutes` 增加业务路由，侧栏会自动生成菜单。`meta.title`、`meta.icon` 控制文案与图标，`meta.roles` 控制可见角色。
4. 替换 `src/api/user.js` 中登录、用户信息和退出接口字段映射。登录结果需归一为 `{ token, user? }`，用户信息需包含 `{ name, roles }`。
5. 复制 `views/system/user` 作为列表页起点。页面只维护查询对象、列配置和加载方法，分页与选择交由 `TableWrap`。

主题设置已经从布局中独立为 `ThemeSettings + store/app + utils/preferences`。设置包含浅色、深色、自定义底色、预设/自定义强调色、紧凑密度、玻璃效果、动效和侧栏状态，均持久化在浏览器 `localStorage`；登录页与后台顶栏都可以打开设置面板。

## 组件契约

`TableWrap` 通过 `columns` 描述列，通过同名插槽扩展单元格：

```js
columns: [
  { prop: 'name', label: '姓名', minWidth: 120 },
  { prop: 'status', label: '状态', slot: 'status' },
  { label: '操作', width: 130, fixed: 'right', slot: 'actions' }
]
```

监听 `pagination-change` 同时获得 `{ pageNum, pageSize }`；`selection-change` 获得已选行。调用组件实例的 `reset()` 可清空选择、排序和筛选，`doLayout()` 可重新计算列宽。

`PageTools` 默认提供查询、重置按钮，默认插槽放查询项，`actions` 插槽追加查询区按钮，`extra` 插槽放新增、导出等右侧操作。

## 注意事项

- `vue` 与 `vue-template-compiler` 必须保持完全相同的 `2.7.14`，否则模板编译会报版本不匹配。
- Element UI 只适配 Vue 2。当前模板全局引入，产物体积优先让位于开箱即用；需要按需加载时再统一改 Babel 配置。
- 路由默认使用 hash 模式，部署无需服务器回退配置。切换 history 模式后，Nginx 必须将未知路径回退到 `index.html`。
- 开发 mock 直接位于 API 模块，不拦截 Axios。生产环境默认关闭，避免演示数据进入线上。
- 401 拦截器负责清理 Cookie/Vuex 并跳回登录页；业务代码不要重复处理登录过期。
- Node 18/20 LTS 与 Vue CLI 5 配合更稳定。较新的 Node 若遇到旧依赖警告，应优先切换 LTS，不需要添加 OpenSSL legacy 参数。