后台管理项目重构为vue3.0

前言：

• 我们平常玩的游戏有时需要更新出新的内容，我们的项目也需要更新迭代，这就需要项目的重新构建，这样就能向用户展现更好的，更优秀的项目。

---

为什么要重构项目？

项目重构的理由我觉得应该是下面几个原因：

1、项目代码结构混乱，层次不清，代码风格不统一
2、漏洞多，稳定性差
3、有新的功能需求，但是之前的框架已经不能满足了
4、各种大量接口回调导致内存泄漏严重
5、业务代码和通用代码混合
6、包含大量重复代码
7、参数列表过长，参数太多的话，应该考虑用对象去替换参数列表

其实，重构是一个不断发现问题、解决问题的过程。

重构的目的

使代码更容易理解，方便后期维护，也就是要让每个模块的定位清晰明确
发现隐藏的代码缺陷
代码风格要优雅～，内容质量高，按照合理的设计模式和编程思想去重构
同步新的需求
项目功能交互来个极致体验，功能上要要尽量做到不卡顿 不闪退，要满足产品需求的细节
从长远来看，可以提高编程效率

具体案例

下载项目

• 下载地址
• project-one为vue2.0的后台管理系统
• vue3-project为vue3.0的后台管理系统

下面是我重构后台管理项目的一个组件

一. 为什么要重构后台管理项目

由于vue3.0的推广，vue2.0已经不能满足相应功能，所以需要vue3.0来重构此项目

二. 安装项目所需的vue3.0 插件

1.安装element-plus
	element-plsu是element-ui的vue3.0版本所以需要安装

element-plus官网

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

在main.js中引入

import ElementPlus from 'element-plus'
// 引入的是element-plus 的css样式
import 'element-plus/dist/index.css'
// 国际版(翻译)
import local from 'element-plus/es/locale/lang/zh-cn'
//挂载
app.use(ElementPlus, { local })

2. 安装axios 
	npm i axios
在main.js中引入：
	import axios from 'axios'
	//挂载
	app.config.globalProperties.$https = axios

• 安装和在main.js中引入完成之后项目基本就可以使用了

三. 具体代码重构

<template>
  <div class="student">
    <!-- 查询 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="find">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <!-- 1: 0-9 2: 10