This is the 19th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

Style and Layout

  • ElementComponent library
  • Step 1: Import the filemain.jsThe introduction of
    • 🤩import ElementUI from 'element-ui'
    • 🤩 Imports the CSS fileimport 'element-ui/lib/theme-chalk/index.css'
  • 🤩 Step 2: WillElementRegistered as aVueThe plug-in

Customize global style files

  • Replace the previous referenceelement-uiThe default theme style file in
  • In the projectsrc/stylesStore global styles
    • src/styles/variable.scss
    • src/styles/index.scss
  • 🤩 introduces custom theme style style filesimport './styles/index.scss'
  • In addition: reset style namely: later modifiedreset.scss
  • Storage reuse style:mixin.scss

Share global style variables

  • When we need to use it in a componentvariable.scssIf a variable is defined in, it needs to be imported before it can be accessed, or shared if it is used by each component.

Example (shared access of a single file or multiple files)

  • Set the color according to the CCTV variable in app. vue

    • Step 1: Introduce a variable style file
    // @ means: SRC directory,webpack alias
import '~@/styles/variable.scss'
Copy the code
    • Step 2: Use variables for styling
    .text {
  color: $warning-color
}
Copy the code

  • If multiple components need to use variables, you can configure the Vue CLI to pass in all Sass/Less styles to shared global variables

    • Step 1: Create a configuration filevue.config.js.webpackWill automatically help us to import the filename into the component that needs it
    // vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // Pass options to sas-loader
      // SCSS used in the project
      scss: {
        prependData: `@import "~@/styles/variables.scss"`}}}}Copy the code
    • Step 2: Style configuration using variables (same file)

The routing process

  • @/views: Routing page component directory

Root egressrouter-view

  • Effect: Render the view component to which the path matches

Route optimization

  • @/views/index

1. Lazy route loading

  • When we package and build the application,jsPackages can become very large and affect page loading.
    • Since all components are in one package, it is not reasonable to load components that are not accessed when you access a component.
  • Pack to buildnpm run build
  • It would be much more efficient to split the components of different routes into separate code blocks and then load the components when the route is accessed.
  • Solution:webpack“, can be usedimportSyntax to define code block points
  • So usingimportMode to set the route loading module
    • When multiple routing components are packaged together, they are grouped into one package (reduced in size)
    • Each routing component’s package is loaded only when it is accessed (optimizes load speed)
const routes = [
  {
    path: '/login'.name: 'login'.// Change the reference method, the entire volume of packages into small packages
    component: () = > import('@/views/login/index.vue')}}Copy the code

2.webpackMagic annotation

  • While packing separately, passwebpackGiving each package a custom name makes the code more readable and makes it more accurate to know which file is failing.
const routes = [
  {
    path: '/login'.name: 'login'.// Name it with a magic comment
    component: () = > import(/* webpackChunkName: 'login' */'@/views/login/index.vue')}}Copy the code

Layout processing

Layout container

  • throughElementtheContainerThe layout container does the initial layout
  • Purpose: Container component for layout, easy to quickly build the basic structure of the page
  • 🤩 Container height passvhSettings,1vh = 1%Viewport height; Set the minimum width to prevent content stacking due to window size changes

Sidebar menu

  • throughElementIn theNavMenuCreate a sidebar
  • Route switchover is set successfullylayoutComponent can be completed by setting a child route exit
<! -- layout/index.vue -->
<template>
  <el-container>
    <el-aside width="200px">
      <! Customize sidebar components -->
      <app-aside></app-aside>
    </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <! -- Set child route exit -->
      </el-main>
    </el-container>
  </el-container>
</template>
Copy the code

The head layout

  • Use breadcrumb navigation on the left
  • Center the header content vertically
// app-header.vue
.app-header {
  height: 100%;
  /* Elastic layout */
  display: flex;
  align-items: center;
}
Copy the code
  • Enable the breadcrumbs on the left side of the head to navigate to the user menu on the right
.app-header {
  /* Set the flex layout properties */ for the parent element
  justify-content: space-between;
}
Copy the code
  • Use the drop-down menu on the right, and replace the text in the drop-down menu withAvatarcomponent
  • Finally, modify the contents and structure of the drop-down menu,dividedProperty to set the splitter line

Interface processing

Encapsulate request module (in tools module)

  • To make an interface request, use a tool that can make the request, andVueThe most common one isaxios(ajaxLibrary)
  • @/utils/request.js: Stored in the tool module
  • axios.create([config])Create one with a common configurationaxiosThe instance
// 1. Introduce axios
import axios from 'axios'
// 2. Create an axios instance
const request = axios.create({
  timeout: 2000
})
Export the axios instance
export default request
Copy the code
  • Use it in another file
request({
  method: 'POST'.url: ' '
}).then(res= > {
  console.log('Response content',res)
})
Copy the code

axiosThe interceptor

  • It is found that the interface has two base addresses. It is cumbersome to write a complete address for each interface request
  • You can do this by givingrequestSet interceptors to determineurlPrefix, and set the corresponding base address toconfig.baseURL
    • axiosHas request and response interceptors forPre-processing of requests and responses
    • Request interceptor parametersconfigFor the configuration information related to this request, passbaseURLTo modify the requested base address
    • ** must return after operationconfigLet the configuration changes take effect, otherwise the request will not be sent.
// Encapsulate the URL base address detection function
function getBaseUrl (url) {
  if (url.startsWith('/front')) {
    return 'http://edufront.com'
  } else {
    return 'http://eduboss.com'}}// Create axios request interceptor, callback function
request.interceptors.request.use(function (config) {
  // Set the base address
  config.baseURL = getBaseUrl(config.url)
  return config
})
Copy the code