真香定律！配置篇(settings.js)(基础篇)

完整项目地址：vue3-element-plus

体验地址：http://8.135.1.141/vue3-admin-plus

系列文章入口：

真香定律！带你用vue3+vite2撸后台（入口）

前言

本篇主要针对配置文件settings.js和vite.config.js进行讲解

配置文件settings.js

settings.js主要分为三部分配置

页面布局相关
页面动画相关
页面登录和其他

我们先熟悉vue3-element-plus页面布局，来张图

下面详解，配合上面的图

1639477384677

src/settings.js

const setting = {
  
  /*页面布局相关*/
  
  //标题和导航栏显示的名称
  title: 'Vue3 Admin Plus',
  //是否显示图标和标题（Logo）
  sidebarLogo: true,
  //是否导航栏的中间的title
  showNavbarTitle: false,
  //是否显示下拉框区域
  ShowDropDown: true,
  //是否显示面包屑导航（Breadcrumb）
  showHamburger: true,
  //是否显示侧边栏（Sidebar）
  showLeftMenu: true,
  //是否显示标签栏（TagsView）
  showTagsView: true,
  //显示标签栏时，配置最多显示标签的个数，超过将会替换最后一个标签
  tagsViewNum: 6,
  //是否显示导航栏（NavBar）
  showTopNavbar: true,
  
  /*页面动画相关*/
  
  //主视区域和面包屑导航是否需要动画(暂未实现)
  //mainNeedAnimation: true,
  //是否需要页面加载进度条
  isNeedNprogress: true,
  
  /*
    首次进入是否需要登录
    true: 走正常的登录流程，包括角色权限的校验
    false:不走登录流程，直接进入主页，此时没有token。架构中会在permission.js文件中，动态设置个临时               token使用，临时token取的是settings.js文件中的tmpToken
    dev环境时，设置为false，可以适当提高你的开发效率
   */
  isNeedLogin: true,
  
  // 当isNeedLogin设置为false起作用，建议调试时的token写在这里，架构会自动设置到auth.js中，和登录流程设置的token一样
  tmpToken: 'tmp_token'
  
  /*
    动态路由过滤的方式 'roles' | 'code'
    roles: 通过角色进行过滤
    code: 通过codeArr进行过滤
   */
  permissionMode: 'roles',
  
  //是否开启生产时也使用mock,开启后生产环境也能使用开发时的mock数据
  openProdMock: true,
  
  /*
    配置那个环境需要，收集错误日志 ['build', 'serve']
    注：尽量不要配置serve下收集错误日志，因为收集到的日志大多没有意义，还浪费了服务器资源
   */
  errorLog: ['build'],
    
  // el-table中动态高度设定，计算的数值为height(100vh-delWindowHeight)，可以根据自己公司的实际业务进行调整
  delWindowHeight: '210px',

   /*
   * vite.config.js base config
   * such as http://8.135.1.141/vue3-admin-plus/#/dashboard
   * 那么你需要配置："/vue3-admin-plus/"
   *  如果你只配置"/",那么页面只能访问到根路径http://8.135.1.141/
   * */
  viteBasePath: '/vue3-admin-plus/'
}
  
export default setting
复制代码

在页面路径page-switch配置了测试demo

在页面加载之处，将settings.js配置信息加载到

src/store/app.js

import defaultSettings from '@/settings'
const state = {
  sidebar: {
    opened: true
  },
  settings: defaultSettings,
  cachedViews: []
}

/*
* data:ObjType
* such as {sidebarLogo:false}
* */
M_settings: (state, data) => {
  state.settings = { ...state.settings, ...data }
},
复制代码

所以可以通过

import { useStore } from 'vuex'
const store = useStore()
//获取settings配置
let settings = computed(() => {
  return store.state.app.settings
})
//动态修改settings
store.commit('app/M_settings', { sidebarLogo: !settings.value.sidebarLogo })
复制代码

进行获取或者动态修改配置信息

真香定律！配置篇(settings.js)(基础篇)

前言

配置文件settings.js

猜你喜欢