# em_front_mulit

**Repository Path**: energy-management-system/em_front_mulit

## Basic Information

- **Project Name**: em_front_mulit
- **Description**: 能源管理系统WEB端，采集模板、采集项可配置，可根据采集模板启动多个netty
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-24
- **Last Updated**: 2025-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 能源管理系统WEB端，采集模板、采集项可配置，可根据采集模板启动多个netty

# Build Setup
```
## 克隆基础框架
git clone https://gitee.com/bldevelopment/front_code_admin.git

## 进入项目目录

## 安装依赖
npm install

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务

npm run serve

浏览器访问 [http://localhost:10088]
```
# 发布

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

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

# 其它

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

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

# 代码格式检查
npm run lint

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

# npm 升级所有依赖包
npm install -g npm-check-updates  先安装依赖
ncu -u  更新dependencies到新版本
ncu -a  更新全部到最新版本
```

# 功能

```
- 登录 / 登出 / 修改密码

- 权限验证
  - 页面权限（路由权限）
  - 指令权限（按钮权限）
  - 权限配置

- 多环境发布
  - dev stage prod

- 全局功能
  - 动态侧边栏（支持多级路由嵌套）
  - 动态面包屑
  - 快捷导航(标签页)
  - Svg Sprite 图标
  - Screenfull全屏
  - 自适应收缩侧边栏
  - 搜索页面

- 编辑器
  - 富文本支持粘贴拖拽图片到富文本编辑器中 （Tinymce）
  - JSON 等多格式（jsonEditor）

- 错误页面
  - 404

- 业务实例
  - Dashboard
  - 系统管理
    - 管理员列表
    - 部门管理
    - 角色管理
    - 菜单管理
    - 参数管理
    - 代码生成器
    - 文件上传
    - 操作日志

```

更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)

注：
1. 打包的时候开启gzip可以很大程度减少包的大小，非常适合于上线部署，但需要服务器的配置，本项目中构建生产环境时已经开启gzip
2. 项目中已经向全局sass样式传入共享的全局变量，无需再引入variables.scss
3. 如果需要生产环境下控制台去掉项目中的所有console.log有两种方式：一、通过修改node_modules/@vue/cli-service/config/terserOptions.js，在compress中加入【warnings: false,drop_console: true,drop_debugger: true,pure_funcs: ['console.log']】。二、npm install babel-plugin-transform-remove-console --save-dev，在babel.config.js（没有就新建）中：
```
let plugins = []
if (process.env.NODE_ENV === 'production') {
  plugins.push('transform-remove-console')
}
module.exports = {
  presets: ['@vue/app'],
  plugins: plugins
}
```
4. 菜单根据动态路由来生成的，根据动态菜单权限接口组装动态路由，如果本地存在接口给出的路由则有先取本地对应的路由信息，否则就是非定制化页面（代码生成器生成的页面）则根据接口信息组装对应路由（目录类型的path随机生成component为含router-view的固定模板，含router-view的固定模板也可以后续根据具体需求自定义）
5. 如果出现image-webpack-loader问题可能是npm的时候部分缺失，可以先卸载，然后使用cnpm install --save image-webpack-loader 
6. 以下路由需要加到路由最后面否则刷新会直接跳转到404
```
{
  path: '*',
  redirect: '/404'
}
```
7. 路由命名规范：path component name之前的关系如下：以系统管理模块为例component: () =>import('@/views/sys/dept/index')，sys文件夹为整个模块名称， 它下方有一个dept部门管理，index为部门管理的入口文件，则其对应的path应为/sys-dept即将sys/dept中的/替换为-，在菜单配置时菜单路由应配置为sys/dept即可。此时路由中的name为SysDept遵循帕斯卡命名法。每个模块下应该一个页面一个文件夹，每个页面应遵循index为页面入口，该页面组件（除公用组件）应存放该页面文件夹下。
```
{
  path: '/sys-dept',
  component: () => import('@/views/sys/dept/index'),
  name: 'SysDept',
  meta: {
    title: '部门管理',
    icon: ''
  }
}
```
8. 开发本地开发时可以通过src/permission.js中控制是使用本地配置路由还是接口获取的路由