# jishupu-admin-template

**Repository Path**: jishupu/jishupu-admin-template

## Basic Information

- **Project Name**: jishupu-admin-template
- **Description**: jishupu-admin-template后台模板是一个基于vue-admin-template基础模板搭建的企业级后台前端解决方案，它基于 vue 2x 和 element-ui 2x实现，它主要从产品角度、实战方向去布局界面，包含企业级站点所需基础功能界面，可快速应用到项目中。
- **Primary Language**: HTML/CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 19
- **Forks**: 10
- **Created**: 2021-09-19
- **Last Updated**: 2024-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, ElementUI, vue-admin-jishupu, jishupu-vue-admin, jishupu-admin-template

## README

# 介绍

> jishupu-admin-template后台模板是一个基于vue-admin-template基础模板搭建的企业级后台前端解决方案，它基于 vue 2x 和 element-ui 2x实现，它主要从产品角度、实战方向去布局界面，项目包含了企业级站点所需基础功能界面，可快速应用到项目中，当然，更多的是学习为主，使用时建议阅读VueJs、Element Ui、vue-admin-template、vue-element-admin相关文档，望本项目都能帮助到您。

> 项目曾用名vue-admin-jishupu、jishupu-vue-admin，为便于识别已统一项目名为jishupu-admin-template，当前版本v1.0.1。

> 本项目为学习版，借鉴于vue-element-admin进行布局，目前已更新实战代码，若非错误将不在进行更新，下版本将弃用vue-element-admin，采用vue3+element最新版布局，可持续关注本仓库。

# 效果


<table>
<tr>
<td width="50%">
  <img src="https://gitee.com/jishupu/jishupu-admin-template/raw/master/public/static/img/demo/demo1.png">
</td>
<td>
  <img src="https://gitee.com/jishupu/jishupu-admin-template/raw/master/public/static/img/demo/demo2.png">
</td>
</tr>
<tr>
<td  width="50%">
  <img src="https://gitee.com/jishupu/jishupu-admin-template/raw/master/public/static/img/demo/demo3.png">
</td>
<td>
 <img src="https://gitee.com/jishupu/jishupu-admin-template/raw/master/public/static/img/demo/demo4.png">
</td>
</tr>

<tr>
<td  width="50%">
  <img src="https://gitee.com/jishupu/jishupu-admin-template/raw/master/public/static/img/demo/demo5.png">
</td>
<td>
 <img src="https://gitee.com/jishupu/jishupu-admin-template/raw/master/public/static/img/demo/demo6.png">
</td>
</tr>

</table>

# 在线体验

 地址：http://jishupuadmin.daibuzhe.com （活动服务器超慢，莫刷，感谢！ :pray: ）

 账号：demo/demo


# 软件架构

```

- 工作台
- 信息管理
    - 内容管理
      - 新闻栏目1（文章功能）
      - 图集栏目1（图集功能）
      - 单页栏目1（单页功能）
  - 导航管理
  - 栏目分类
  - 信息模型
- 营销管理
  - 广告位
  - 友情链接
  - 留言咨询
- 系统管理
  - 系统配置
  - 管理员
  - 角色管理
  - 菜单管理
  - 权限管理
  - 数据字典
  - 日志管理
      - 操作日志
      - 登录日志
- 外部连接
- 布局参考
  - 树形列表案例
  - 普通列表案例
  - 图标
  - 路由嵌套...

```

# 较大改动与新增功能/特性
```

### 2022.3.4更新

1.新增mock接口数据做演示
2.权限菜单分离：权限管理、菜单管理
3.新增图片裁剪功能
4.新增图片批量上传抽屉
5.树形表格支持复选框选择影响上级关系
6.取消路由mete{roles:[],realPath: ''}选项，roles权限校验方式，改为接口返回的菜单即登录用户可访问的路由权限
7.国际化优化
8.移除开发工具页面
9.栏目分类、导航管理等分类树表现形式的界面优化为弹框体验
10.优化界面、修复bug
11.等等

### 2021更新

与vue-admin-template相比较大改动：

1. layout布局目录迁移至views视图目录中，都归为视图渲染；
2. 动态菜单：生成登录用户的左侧菜单由generateUserMenu处理组件动态加载问题，并由generateRoutes最终生成菜单（router/modules/permission.js）；
3. 不同环境展示不同动态路由，“布局参考”只会在开发环境下出现，生产环境不会被生成（router/index.js）。
4. 本项目不考虑页面缓存。

新增功能/特性：

1. tagsView标签栏组件支持刷新页面不消失、左右效果；
2. 左侧菜单栏支持树结构（meta: { isTree:true }）；
3. 列表布局参考：搜索区+按钮功能区+列表区；
3. 新增JspCategorytreePicker分类选择组件；
4. 新增JspCkeditor编辑器组件，支持ckeditor编辑器；
5. 新增JspIconPicker图标选择组件，支持选择Svg Icons、Element-UI Icons、最新免费版Fontawesome Icons三种图标检索选择；
6. 新增JspImageUpload图片上传组件，支持上传、图片拖拽、预览等效果；
7. 新增JspImageViewer图片预览组件；
8. 新增JspTags标签组件，应用于关键词添加场景；
9. 等


```

# 项目构建

```bash

### 安装Node.js环境

### 克隆项目
git clone https://gitee.com/jishupu/jishupu-admin-template.git

### 进入项目目录
cd jishupu-admin-template

### 安装依赖
npm install

### 启动服务
npm run dev

```

浏览器访问 [http://localhost:9527](http://localhost:9527)

# 项目发布

```bash

### 构建测试环境
npm run build:stage

### 构建生产环境
npm run build:prod

```

# 优化相关

```bash
### 预览发布环境效果
npm run preview

### 预览发布环境效果 + 静态资源分析
npm run preview -- --report

### 代码格式检查
npm run lint

### 代码格式检查并自动修复
npm run lint -- --fix

```


# 浏览器支持

主流浏览器以及IE 11+

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| --------- | --------- | --------- | --------- |
| IE11, Edge| last 2 versions| last 2 versions| last 2 versions

# 商用注意事项

本项目使用的是要求最宽泛的MIT开源协议，保留[MIT开源协议](https://gitee.com/jishupu/jishupu-admin-template/blob/master/LICENSE)即可免费商用。


# 鸣谢

感谢VUEJS、ELEMENT UI 以及vue-element-admin作者花裤衩对开源的贡献。


## 更新

```
1. 2021.9.19首次提交，版本v1.0.0
2. 2022.4.29编辑器（缩进、行高）、图片裁剪新增自定义等一些修改，版本v1.0.1

```