Vue项目样式与布局、路由处理与请求接口封装样式与布局 Element组件库element-ui路由处理，路由懒加载，

这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战

样式与布局

Element组件库
第一步：在入口文件main.js中引入
- 🤩import ElementUI from 'element-ui'
- 🤩引入css文件import 'element-ui/lib/theme-chalk/index.css'
🤩第二步：将Element注册为Vue插件

自定义全局样式文件

替换掉前面引用的element-ui中默认的主题风格文件
项目中src/styles存放全局样式
- src/styles/variable.scss
- src/styles/index.scss
🤩引入自定义的主题样式风格文件import './styles/index.scss'
另外：重置样式即：后面修改的reset.scss
存储复用的样式：mixin.scss

共享全局样式变量

当我们需要在组件中使用variable.scss中定义的变量时，需要先引入文件，然后才能访问变量，如果每个组件都要使用的话就可以通过共享访问。

举例（单个文件或多个文件的共享访问）

在App.vue中根据央视变量进行颜色设置
- 第一步：引入变量样式文件
```
// @表示：src目录,webpack别名
import '~@/styles/variable.scss'
```
- 第二步：使用变量进行样式设置
```
.text {
  color: $warning-color
}
```
如果多个组件都需要使用变量，就可以配置Vue CLI将所有Sass/Less样式传入共享全局变量
- 第一步：创建配置文件vue.config.js，webpack会自动帮我们将文件名引入到需要用的组件中
```
// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给sass-loader传递选项
      // 项目中使用的scss
      scss: {
        prependData: `@import "~@/styles/variables.scss"`
      }
    }
  }
}
```
- 第二步：使用变量进行样式配置(同单文件)

路由处理

根路由出口`router-view`

作用：渲染路径匹配到的视图组件

路由优化处理

@/views/index

1.路由懒加载

当我们打包构建应用的时候，js包会变得非常大，影响页面加载。
- 由于所有组件都打到一个包里面，当你在访问一个组件的时候，会将没有访问的组件也进行加载，这样非常不合理。
打包构建npm run build
如果能够把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才开始加载对应组件，这样就更加高效了。
解决：webpack中，可以使用import语法来定义代码分块点
因此使用import方式设置路由加载的模块
- 多个路由组件一起打包时，会分成一个一个的包（减小体积）
- 每个路由组件的包只有在被访问时才会被加载（优化加载速度）

const routes = [
  {
    path: '/login',
    name: 'login',
    // 换了新的引用方式,将整个体积的包分成小包
    component: () => import('@/views/login/index.vue')
  }
}

2.`webpack`魔法注释

在分别打包的时候，通过webpack给每个包自定义名称，这样可以增加代码的可读性，能够更准确的知道哪个文件出错。

const routes = [
  {
    path: '/login',
    name: 'login',
    // 使用魔法注释为其命名
    component: () => import(/* webpackChunkName: 'login' */'@/views/login/index.vue')
  }
}

vue项目路由优化.png

布局处理

布局容器

通过Element的Container布局容器进行初始布局
作用：用于布局的容器组件，方便快速搭建页面的基本结构
🤩容器高度通过vh设置，1vh = 1%视口高度；设置最小宽度防止窗口尺寸变化导致内容堆叠

侧边栏菜单

通过Element中的NavMenu创建侧边栏
路由切换设置成功，最后在layout组件中设置子路由出口即可完成

<!-- layout/index.vue -->
<template>
  <el-container>
    <el-aside width="200px">
      <!-- 自定义侧边栏组件 -->
      <app-aside></app-aside>
    </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <!-- 设置子路由出口 -->
      </el-main>
    </el-container>
  </el-container>
</template>

头部布局

左侧使用面包屑导航
设置头部内容垂直居中

// app-header.vue
.app-header {
  height: 100%;
  /* 弹性布局 */
  display: flex;
  align-items: center;
}

使头部左侧的面包屑导航给和右侧的用户菜单

.app-header {
  /* 给父元素设置flex布局的属性 */
  justify-content: space-between;
}

右侧使用下拉菜单，将下拉菜单中的文字替换成Avatar组件
最后修改下拉菜单内容与结构，divided属性用于设置分割线

接口处理

封装请求模块（在工具模块）

想要进行接口请求，就要使用能够发请求的工具，与Vue最常用的是axios(ajax库)
@/utils/request.js：存放工具模块中
axios.create([config])创建一个拥有通用配置的axios实例

// 1. 引入axios
import axios from 'axios'
// 2.创建axios实例
const request = axios.create({
  timeout: 2000
})
// 3.将axios实例导出
export default request

在别的文件中使用

request({
  method: 'POST',
  url: ''
}).then(res => {
  console.log('响应内容',res)
})

`axios`拦截器

观察发现接口的基地址有2个，每次请求接口书写完整地址较为繁琐
可以通过给request设置拦截器来判断url前缀，再将对应基地址设置给config.baseURL
- axios具有请求和响应拦截器，用于在请求与响应前进行提前处理
- 请求拦截器参数config为本次请求的相关配置信息，通过baseURL来修改请求的基地址
- 操作完毕，**一定要返回config让配置修改生效，**否则请求无法发送成功。

// 封装URL基地址检测函数
function getBaseUrl (url) {
  if (url.startsWith('/front')) {
    return 'http://edufront.com'
  } else {
    return 'http://eduboss.com'
  }
}

// 创建axios请求拦截器,回调函数
request.interceptors.request.use(function (config) {
  // 设置基地址
  config.baseURL = getBaseUrl(config.url)
  return config
})

Vue项目 样式与布局、路由处理与请求接口封装

样式与布局

自定义全局样式文件

共享全局样式变量

举例（单个文件或多个文件的共享访问）

路由处理

根路由出口router-view

路由优化处理

1.路由懒加载

2.webpack魔法注释

布局处理

布局容器

侧边栏菜单

头部布局

接口处理

封装请求模块（在工具模块）

axios拦截器

Vue项目样式与布局、路由处理与请求接口封装

根路由出口`router-view`

2.`webpack`魔法注释

`axios`拦截器