FiveAdminV2

项目配置

为简化业务开发工作量，框架提供简单且多样化的配置，让使用者专注于业务开发。

环境配置

文件位置：/src/.env

所有环境都被加载

# 应用标题
VITE_APP_TITLE = FiveAdmin-V2
# 缓存前缀
VITE_APP_STORAGE_PREFIX = FIVE_ADMIN_V2_
# 默认首页
VITE_APP_HOME_PATH = /home
# 开启mock
VITE_USE_MOCK = true
# 应用根路径
VITE_APP_BASE_PATH = /

文件位置：/src/.env.development

开发环境被加载

# 端口
VITE_APP_PORT = 9999
# http请求代理
VITE_API_BASE_URL = /api
VITE_DEV_PROXY = {"/api":"http://localhost:8080/","/upload":"http://localhost:8080/upload"}
# http请求超时设置
VITE_API_TIMEOUT = 10000

文件位置：/src/.env.production

生产环境被加载

# http代理（生产环境使用 Nginx 代理）
VITE_API_BASE_URL = /api
# http请求超时设置
VITE_API_TIMEOUT = 10000

提示

  • 接入后端时如果不考虑跨域问题，可以这么配置

    VITE_APP_BASE_URL = http://localhost:8080

    VITE_DEV_PROXY = {}

应用配置

文件位置：/src/appConfig.js


export default {
  /**
   * 多语言。'zh-cn' 中文简体 
   * 'zh-tw' 中文繁体
   * 'en' 英文
   */
  defaultLanguage: 'zh-cn',

  /**
   * elementplus组件尺寸。
   * 'default' 默认
   * 'large' 大
   * 'small' 小
   */
  elementSize: 'default',

  /** 布局。
   * 'default' 单侧栏
   * 'doubleAside' 双侧栏
   * 'crosswise' 无侧栏 
   * 'mixture' 顶栏主菜单，侧栏子菜单
   */ 
  layoutType: 'default',

  // 显示 logo
  showLogo: true,
  
  // 侧栏折叠
  menuIsCollapse: false,
  // 仅保持一个子菜单的展开
  subMenuUniqueOpened: true,
  // 显示主菜单标题(双侧栏布局有效)
  isMainMenuShowTitle: true,
  // 启用侧栏折叠动画
  enableCollapseTransition: true,

  // 使用多标签页
  isTabs: true,
  // 标签显示图标
  tabsIcon: true,
  /**
   * tabs风格。'card' 风格一
   * 'border-card' 风格二
   * '' 风格三
   */
  tabsType: 'card',

// 启用页面过渡动画
  isTransition: true,
  /**
   * 页面过渡动画。
   * 'fade' 渐变
   * 'scale' 缩放
   * 'slide' 滑动
   */
  transitionName: 'fade',

  // 显示页脚
  showFooter: true,
  // 页脚显示的文本内容,可以使用多语言文本
  footerText: 'Copyright © 2023 XXX 拥有所有版权',

  // 灰色模式
  enableGray: false,
  // 色弱模式
  enableColorWeakness: false,

  /**
   * 路由加载策略
   * 'frontend' 前端加载
   * 'backend' 后端加载
   */
  routeSource: 'frontend',

  // 动态 html 标题
  dynamicTitle: true,

  // 404页面显示位置, true：layout内，false：layout 外
  innerNotFound: true,

  // 固定布局
  layoutFixed: true,

  /**
   * 触发方式。主要使用的地方有 horizontal 模式的菜单，Dropdown 下拉菜单组件。
   * 'hover' 鼠标经过
   * 'click' 鼠标点击
   */
  trigger: 'hover',

  /**
   * 主题。主题文件：/src/assets/styles/common/theme.scss
   * '' 默认
   * 'dark' 暗黑
   * 'sakura' 樱花粉
   * 'sky' 天空蓝
   * 'grassland' 草原绿
   * 'fantasy' 主题-幻想
   */
  theme: '',

  /**
   * 工具栏收缩
   */
  headerToolsOmit: true,
}

注意

其中 defaultLanguage、elementSize、layoutType、theme 配置会被缓存到浏览器 localStorage，如果非首次启动修改配置后不生效请删除 localStorage 中的缓存数据。

主题配置

文件位置：/src/assets/styles/common/theme.scss

  • :root 为默认主题
  • html.dark 为暗黑主题

主题的切换是靠修改 html 的 class 实现

通过修改 css 变量改变应用外观及色彩

框架已预设多款主题，框架中所有自定义的css变量都可以在 :root 中找到

也可以根据需求修改 element-plus 的 css 变量

提示

所有以 --fv 开头 -bg 结尾的变量表示背景，框架中使用 background 引用，而非 background-color

这意味着你不仅可以设置背景纯色，还可以设置渐变、图片、gif等。

Last Updated:
Contributors: zhangyuge