# entry-rate **Repository Path**: luorui123123/entry-rate ## Basic Information - **Project Name**: entry-rate - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-11-21 - **Last Updated**: 2023-11-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 交通能源中心前端开发文档 ### 前端运行 ``` cd platform-ui ``` #### 安装依赖 ``` npm install ``` #### 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。 ``` npm install --registry=https://registry.npmmirror.com ``` #### 本地开发 启动项目 ``` npm run dev ``` ### 前端部署 当项目开发完毕，只需要运行一行命令就可以打包你的应用 ``` # 打包正式环境 npm run build # 打包预发布环境 npm run build:stage ``` 构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js 、***.css、index.html 等静态文件。 通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可，其中的 index.html 是后台服务的入口页面。 ### 前端结构 ``` ├── build // 构建相关 ├── public // 公共文件 │ └── index.html // html模板 │ └── robots.txt // 反爬虫 ├── src // 源代码 │ ├── api // 所有请求 │ ├── assets // 主题 字体等静态资源 │ ├── components // 全局公用组件 │ ├── directive // 全局指令 │ ├── layout // 布局 │ ├── router // 路由(路由自动，一般不用配置) │ ├── store // 全局 store管理 │ ├── utils // 全局公用方法 │ ├── views // view 主要页面文件 │ ├── App.vue // 入口页面 │ ├── main.js // 入口 加载组件 初始化等 │ ├── permission.js // 权限管理 │ └── settings.js // 系统配置 ├── .editorconfig // 编码格式 ├── .env.development // 开发环境配置 ├── .env.production // 生产环境配置 ├── .env.staging // 测试环境配置 ├── .eslintignore // 忽略语法检查 ├── .eslintrc.js // eslint 配置项 ├── .gitignore // git 忽略项 ├── babel.config.js // babel.config.js ├── package.json // package.json └── vue.config.js // vue.config.js ``` ### 前端技术 - npm：node.js的包管理工具，用于统一管理我们前端项目中需要用到的包、插件、工具、命令等，便于开发和维护。 - ES6：Javascript的新版本，ECMAScript6的简称。利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。 - vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。 - vue-router： Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。 - vuex：Vue提供的状态管理工具，用于统一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象。 - element-ui：基于MVVM框架Vue开源出来的一套前端ui组件。 https://element.eleme.cn/#/zh-CN/component/installation ### 开发规范 #### 新增 view 在 @/views 文件下 创建对应的文件夹，一般性一个路由对应一个文件， 该模块下的功能就建议在本文件夹下创建一个新文件夹，各个功能模块维护自己的utils或components组件。 一般文件名称/目录名称和菜单路径要对应上 #### 新增 api 接口请求 在 @/api 文件夹下创建本模块对应的 api 服务。 #### 路由使用 框架的核心是通过路由自动生成对应导航，所以除了路由的基本配置，还需要了解框架提供了哪些配置项。 ##### 路由配置 ```json // 当设置 true 的时候该路由不会在侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1 hidden: true // (默认 false) //当设置 noRedirect 的时候该路由在面包屑导航中不可被点击 redirect: 'noRedirect' // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面 // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面 // 若你想不管路由下面的 children 声明的个数都显示你的根路由 // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由 alwaysShow: true name: 'router-name' // 设定路由的名字，一定要填写不然使用时会出现各种问题 query: '{"id": 1, "name": "energy"}' // 访问路由的默认传递参数 roles: ['admin', 'common'] // 访问路由的角色权限 permissions: ['a:a:a', 'b:b:b'] // 访问路由的菜单权限 meta: { title: 'title' // 设置该路由在侧边栏和面包屑中展示的名字 icon: 'svg-name' // 设置该路由的图标，支持 svg-class，也支持 el-icon-x element-ui 的 icon noCache: true // 如果设置为true，则不会被 缓存(默认 false) breadcrumb: false // 如果设置为false，则不会在breadcrumb面包屑中显示(默认 true) affix: true // 如果设置为true，它则会固定在tags-view中(默认 false) // 当路由设置了该属性，则会高亮相对应的侧边栏。 // 这在某些场景非常有用，比如：一个文章的列表页路由为：/article/list // 点击文章进入文章详情页，这时候路由为/article/1，但你想在侧边栏高亮文章列表的路由，就可以进行如下设置 activeMenu: '/article/list' } ``` 普通示例 ```json { path: '/system/test', component: Layout, redirect: 'noRedirect', hidden: false, alwaysShow: true, meta: { title: '系统管理', icon : "system" }, children: [{ path: 'index', component: (resolve) => require(['@/views/index'], resolve), name: 'Test', meta: { title: '测试管理', icon: 'user' } }] } ``` #### 权限使用 封装了一个指令权限，能简单快速的实现按钮级别的权限判断。v-hasPermi, 和菜单设置的按钮相对应 ##### 使用权限字符串 v-hasPermi 主要使用 ```html // 单个 存在权限字符串才能看到 // 多个 包含权限字符串才能看到 ``` ##### 使用角色字符串 v-hasRole ```html // 单个 管理员才能看到 // 多个 包含角色才能看到 ``` 提示 - 在某些情况下，它是不适合使用v-hasPermi，如元素标签组件，只能通过手动设置v-if。 可以使用全局权限判断函数，用法和指令 v-hasPermi 类似。 - 前端的鉴权只是一个辅助功能，对于专业人员这些限制都是可以轻松绕过的，为保证服务器安全，无论前端是否进行了权限校验，后端接口都需要对会话请求再次进行权限校验！ ```html ``` ### 菜单管理 与后端数据库配合，需要在菜单管理中添加相应的菜单选择菜单上级 #### 目录 主要是决定上级路由，最好设置成和页面文件结构相对应的路由配置 该路由会影响下级路径 #### 菜单 对应的是页面，需要配置组件即vue 对应的路径 , @view/ 和 .vue 不需要写 - 举例 组件 ``` energy/basicdict/org ``` 实际组件位置 ``` @view/energy/basicdict/org.vue ``` 权限标识可以不写 #### 按钮 主要是设置某个页面下的对应的权限，可以控制页面是否显示该按钮 设置如下： ``` basicdict:org:list ``` ### 可视化图表 采用 echarts ，文档地址： https://echarts.apache.org/zh/index.html #### 封装模板样式 themeEchart 插件中可以配置2个模板样式 ，具体使用可以参考chart 组件 - 引用 ```javascript import themeEchart from "@/utils/themeEchart"; ```