Skip to content

前端框架说明

框架功能介绍

框架中已经封装好的功能有:

js
 单点登录
 路由即菜单
 菜单收缩功能
 锁屏功能
 刷新页面组件功能
 显示器全屏功能
 国际化语言
 网站设置功能
 切换布局
 切换语言
 切换字号
 切换主题
 切换菜单目录的背景
 是否固定 header
 是否显示进度条
 是否显示刷新功能
 是否显示搜索栏
 是否显示右上角的通知功能
 是否显示全屏功能
 是否显示锁屏功能
 设置锁屏密码
 设置栏自己的显示宽度设置
 设置栏自己的移入效果设置

框架目录说明

1、框架目录结构简要说明

js
 src\api:接口目录
 src\assets: 需打包编译的静态资源
 src\components: 页面组件模块
 src\language: 语言包
 src\layouts: 前端框架多布局的核心代码
 src\router: 前端页面组件路由
 src\store: 工程的公共仓库
 src\theme: elementplus 主题包
 src\utils: 辅助函数
 src\views: 页面组件及其子组件
 App.vue: 根组件
 main.ts: 项目程序入口文件
 settings: 项目部分设置文件
 .env.development: 开发环境配置文件
 .env.production: 生产环境配置文件
 .eslintignore: 语法规范忽略文件
 .eslintrc.js: 语法规范文件
 .prettierignore: 代码风格配置忽略文件
 prettier.config.js: 代码风格配置文件
 README.md: 说明文档
 tsconfig.json: ts 配置文件
 vite.config.js: vite 脚手架各种环境编译配置文件

2、下载地址

框架模版(空的框架模版)gitee 仓库地址:https://e.gitee.com/youshengyun/repos/youshengyun/y9-core/tree/master/vue/common/y9vue-empty

数字底座标准版(这里当作框架模版的使用 demo)gitee 仓库地址:https://e.gitee.com/youshengyun/repos/youshengyun/y9-core/tree/master/vue/y9vue-kernel-standard

首次运行说明

1、首次运行简要说明

框架模版主要依赖了后端的单点登录,您下载后,应该是可以直接运行的,因为它已经配置好了互联网上的我司的单点登录

2、下载地址

框架模版(空的框架模版)gitee 仓库地址:https://e.gitee.com/youshengyun/repos/youshengyun/y9-core/tree/master/vue/common/y9vue-empty

数字底座标准版(这里当作框架模版的使用 demo)gitee 仓库地址:https://e.gitee.com/youshengyun/repos/youshengyun/y9-core/tree/master/vue/y9vue-kernel-standard

框架单点登录(图解说明)

1、时序图Alt

2、查看高清单点登录原理时序图 PDF 文档

点击查看时序图 PDF 文档

框架配置文件说明

1、配置文件简要说明

框架模版只包含两份配置文件,分别是开发环境配置文件和生产环境配置文件,在前端工程目录下的.env.development.env.production

2、配置文件中的环境变量详细说明(以.env.development 文件为例,打包生产环境时,需通过以下说明修改您的.env.production 文件)

js
# 运行环境
NODE_ENV = 'development'
# 工程名
VUE_APP_NAME = 'y9vue-code'
# 公共资源路径
VUE_APP_PUBLIC_PATH = '/y9vue-code/'
# markdown 文件路径
VUE_APP_MD_PATH = '/y9vue-code/public/'
# 后端api接口域名
VUE_APP_HOST = 'http://localhost:8080/code'
# index页面,配一个首页
VUE_APP_HOST_INDEX = 'http://localhost:8081/y9vue-code/'
# sso接口主域名
VUE_APP_SSO_DOMAINURL = 'https://test.youshengyun.com/'
# sso接口上下文
VUE_APP_SSO_CONTEXT = 'sso'
# sso授权码接口
VUE_APP_SSO_AUTHORIZE_URL = 'https://test.youshengyun.com/sso/oauth2.0/authorize'
# 退出URL,service参数,需注意您是开发环境运行还是生产环境运行
VUE_APP_SSO_LOGOUT_URL = 'https://test.youshengyun.com/sso/logout?service=http://localhost:8081/'
# sso接口的固定字段,由后端提供此参数
VUE_APP_SSO_CLIENT_ID = 'clientid'
# sso接口的固定字段,由后端提供此参数
VUE_APP_SSO_SECRET = 'secret'
# sso接口的固定字段,由后端提供此参数
VUE_APP_SSO_GRANT_TYPE = 'authorization_code'
# 前端存储token的key
VUE_APP_SSO_SITETOKEN_KEY = 'y9AT'

框架渲染过程(图解说明)

1、图解

Alt

框架路由配置说明

1、设计原则

  • 一个主路由(即任意一个一级菜单)独立一个路由文件

  • 一个页面级路由对应一个页面级组件

2、开发规范

  • 主路由文件下添加各级子路有(即对应这个一级菜单的任意二、三、四级菜单)

  • 一个页面级组件在 views 目录中独立一个文件夹,文件夹下再添加此页面中的私有组件

框架路由过程(图解说明)

1、框架路由过程(图解说明)

Released under the GPL-3.0 License.