15 | 实战痛点1：复杂Vue项目的规范和基础库封装

你好，我是大圣，欢迎进入课程的第 15 讲。

在全家桶实战篇的前几讲里，我们学习了 Vue 3 本身的进阶内容。从今天开始，我们尝试着把这些技能都用在实际项目中，聊一下实战中常见的痛点。不过，既然是实际项目，那还是有很多库需要引入的，比如网络请求时用到的 axios、时间处理时用到的 Dayjs 等等。今天我要跟你聊的，则是复杂 Vue 项目的规范和基础库的封装。

组件库

在项目开发中，我们首先需要一个组件库帮助我们快速搭建项目，组件库提供了各式各样的封装完备的组件。现在社区可选择的组件库有 element-plus、antd-vue，Naive-UI、Element3 等，我们选择 Element3 来搭建项目，首先我们来到项目目录下，执行下面的代码安装 Element3。

npm install element3 --save

然后，我们在 src/main.js 中使用一下 Element3。看下面的代码，我们在其中引入了 Element3 和主体对应的 CSS，并使用 use(Element3) 加载组件库。

import { createApp } from 'vue'
import Element3 from 'element3'
import 'element3/lib/theme-chalk/index.css'
import store from './store/index'
import App from './App.vue'
import router from './router/index'

const app = createApp(App)

app.use(store)
    .use(router)
    .use(Element3)
    .mount('#app')

这样，项目的入口页面就注册好了 Element3 内置的组件。关于 Element3 的组件列表，你可以到Element3 官网查看。接下来，我们就可以使用组件库去搭建我们的页面了。

首先，我们打开项目目录下的 src/App.vue 文件，把之前的学习清单应用时的测试代码移除，然后新增下面的代码。你能看到，我们在代码中使用 Element3 的Container 布局组件实现管理系统的整体布局。

<template>

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">
      <div>
        <router-link to="/"> Home</router-link> 
      </div>
      <div>
        <router-link to="/about">About</router-link>
      </div>
    </el-aside>
    <el-container>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</el-container>
</template>

<script setup>

</script>
<style>
  .el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
</style>

上面代码对应在前端的显示格局如下，代码上方的 Header 组件，承载着页面的头部信息，包括项目左上角的名字、右上角的用户信息、消息等等。代码中的 aside 对应了前端页面左侧的侧边栏，承载着页面主要的导航信息；main 组件内部使用 router-view 渲染路由对应的组件，然后我们继续使用 Element3 逐渐丰富 Header 和导航信息。

Untitled

在 Element3 中，我们也可以很方便地找出我们需要的组件，就像 Menu 等等。在下面的代码中，我们使用 el-menu 组件渲染 header 组件，el-menu 内部使用 el-menu-item 渲染导航组件。

<el-header>
<el-menu
  :default-active="1"
  class="el-menu-demo"
  mode="horizontal"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
>
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template v-slot:title>我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template v-slot:title>选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"
    ><a href="<https://element3-ui.com>" target="_blank"
      >订单管理</a
    ></el-menu-item
  >
</el-menu>

  </el-header>

使用 menu 组件渲染 header 和 aslide 组件后，页面布局示意图如下，这样页面的基本结构就搭建完毕了。

Untitled

工具库

完成页面基本结构的搭建后，在我们获取后端数据时，需要使用 axios 发起网络请求。在项目的根目录下，打开命令行，执行下面的命令，这样我们就可以安装 axios 了（axios 跟 Vue 版本没有直接关系，安装最新即可）。