前端框架说明
框架功能介绍
框架中已经封装好的功能有:
单点登录
路由即菜单
菜单收缩功能
锁屏功能
刷新页面组件功能
显示器全屏功能
国际化语言
网站设置功能
切换布局
切换语言
切换字号
切换主题
切换菜单目录的背景
是否固定 header
是否显示进度条
是否显示刷新功能
是否显示搜索栏
是否显示右上角的通知功能
是否显示全屏功能
是否显示锁屏功能
设置锁屏密码
设置栏自己的显示宽度设置
设置栏自己的移入效果设置
框架目录说明
1、框架目录结构简要说明
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、时序图
2、查看高清单点登录原理时序图 PDF 文档
框架配置文件说明
1、配置文件简要说明
框架模版只包含两份配置文件,分别是开发环境配置文件和生产环境配置文件,在前端工程目录下的.env.development
和.env.production
。
2、配置文件中的环境变量详细说明(以.env.development
文件为例,打包生产环境时,需通过以下说明修改您的.env.production
文件)
# 运行环境
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、图解
框架路由配置说明
1、设计原则
一个主路由(即任意一个一级菜单)独立一个路由文件
一个页面级路由对应一个页面级组件
2、开发规范
主路由文件下添加各级子路有(即对应这个一级菜单的任意二、三、四级菜单)
一个页面级组件在 views 目录中独立一个文件夹,文件夹下再添加此页面中的私有组件
框架路由过程(图解说明)
1、框架路由过程(图解说明)
