代码效果
工程:meta
文件：src/views/auth/system/home/index.vue
节省代码：162+ 49=211行。本文件303行。节省代码 70%
重构的思想：
将修改与变更的地方抽象出来，如果有需要增加的，只需要做最简单的类目的添加（在类目的变量里添加即可），而不需要修改js ,html代码。
具体重构点
（1） 罗列的各项
利用循环进行优化
（2）html的各项
知识点
vue 模板语法
（1） Attribute 绑定
（2）v-for 注意在vue3+ts里，语法检查，一定要绑定:key ,这个在div里应该不需要的
当你使用 <template v-for> 时，key 应该被放置在这个 <template> 容器上：（如上）
template
<template v-for="todo in todos" :key="todo.name">
<li>{
{ todo.name }}</li>
</template>v-for中:key的作用 - 知乎 (zhihu.com)