Full project address: vuE3-element-plus

Experience address: http://8.135.1.141/vue3-admin-plus

Series entry:

  • True fragrance law! Take you to use vuE3 + VITE2 to lift backstage (entrance)

preface

This article focuses on the configuration files settings.js and viet.config.js

Configuration file settings.js

Settings.js is divided into three main configurations

  • Page layout dependency
  • Page animation correlation
  • Page login and others

Let’s get familiar with the VUE3-Element-Plus page layout

The following details, with the above figure

src/settings.js

const setting = {
  
  /* Page layout related */
  
  // The name displayed in the title and navigation bar
  title: 'Vue3 Admin Plus'.// Whether to display the icon and title (Logo)
  sidebarLogo: true.// Is the title in the middle of the navigation bar
  showNavbarTitle: false.// Whether to display the drop-down box area
  ShowDropDown: true.// Whether to display the Breadcrumb navigation
  showHamburger: true.// Whether to display the Sidebar
  showLeftMenu: true.// Whether to display the TagsView
  showTagsView: true.// Set the maximum number of labels to be displayed. If the number exceeds that, the last label will be replaced
  tagsViewNum: 6.// Whether to display the NavBar
  showTopNavbar: true./* Page animation related */
  
  // Whether the main view area and breadcrumb navigation needs to be animated (not implemented yet)
  //mainNeedAnimation: true,
  // Whether the page load progress bar is required
  isNeedNprogress: true./* Whether to log in for the first time True: go through the normal login process, including verifying role permissions false: skip the login process and go to the home page without a token. Set this parameter to false when using the tmpToken dev environment in settings.js to improve your development efficiency
  isNeedLogin: true.// When isNeedLogin is set to false, it is recommended that the token for debugging be written here. The schema will be automatically set to auth.js, just as the token is set in the login process
  tmpToken: 'tmp_token'
  
  / * dynamic routing filter 'roles' |' code 'roles: through role filtering code: through codeArr filtering * /
  permissionMode: 'roles'.// Whether to use mock when production is enabled, so that the production environment can also use mock data at development time
  openProdMock: true.['build', 'serve'] note: Try not to configure serve to collect error logs, because most of the collected logs are meaningless and waste server resources */
  errorLog: ['build'].// Set the dynamic height in el-table, calculate the value of height(100vh-delwindowheight), can be adjusted according to your company's actual business
  delWindowHeight: '210px'./* * viet.config. js base config * such as http://8.135.1.141/vue3-admin-plus/#/dashboard * then you need to configure: "/ vue3 - admin - plus/" * if you only configure"/", then the page can only access to the root path http://8.135.1.141/ * * /
  viteBasePath: '/vue3-admin-plus/'
}
  
export default setting
Copy the code

Test demo is configured in page path page-switch

At the point the page loads, load settings.js configuration information to

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 } },Copy the code

So you can go through

import { useStore } from 'vuex'
const store = useStore()
// Get Settings configuration
let settings = computed(() = > {
  return store.state.app.settings
})
// Dynamically modify Settings
store.commit('app/M_settings', { sidebarLogo: !settings.value.sidebarLogo })
Copy the code

To obtain or dynamically modify the configuration information