给vue-admin-template添加TagsView

前言

之前规划着做一做自己的比较正式一点的项目，基于SpringBoot开发的前后端分离项目，但是自己本身只是Java后端为主的，所以前端功底并不好。于是就采用了vue-element-admin的基础模板vue-admin-template来进行开发。同时也可以基于自己的需要，增加很多组件上去。

开始

官方案例的对比

无TagsView

有TagsView

我们可以清楚的看到，有无tagsView的区别。

添加

既然需要这个组件，那么就添加上去吧，好在官方的完整解决方案中，是有这个代码的。

复制文件

我们需要先从vue-element-admin复制一些必要的文件过来。

• src/layout/components/TagsView 注意，这是一整个文件夹，全部复制进去。地址：https://github.com/PanJiaChen/vue-element-admin/tree/master/src/layout/components

• src/store/modules/tagsView.js，复制这个文件到相应的位置，不知道位置的，就看这个文件的路径。。。地址：https://github.com/PanJiaChen/vue-element-admin/blob/master/src/store/modules/tagsView.js

修改文件

• 修改vue-admin-template\src\layout\components\AppMain.vue

修改如下代码：

代码区块：

修改如下代码：

新增如下代码：

• 修改vue-admin-template\src\layout\components\index.js

• 修改src\layout\index.vue

修改如下代码：

修改如下代码：

修改如下代码：

• 修改src\settings.js

• 修改src\store\getters.js

• 修改src/store/index.js

• 修改src/store/modules/settings.js

至此，我们就把新功能添加上去啦！?

完成

现在我们来看看添加后的效果吧！

-