m0_46172278的博客

目录项目地址前言作者的话能学到些什么系列文章项目地址github：https://github.com/wyb199877/multi-tabsdemo：前言作者的话为什么要做这么个项目呢？其实是因为前段时间在给一个企业做一个后台管理系统，然后就萌生了造轮子的想法。虽然，已经有很多大佬做出了很多很漂亮、功能丰富的模板，但是因为功能的凝练度太高，导致自己修改起来有些困难。同时有很多新手，自己去看那些大佬的源码是看不懂的。所以，我只将基础部分的架构，以及会用到的知识点总结出来，写成了这样一个项目。

目录一、安装vue-cli@4.5.x二、创建项目三、项目配置四、IDE配置五、vue.config.js配置六、篇章小结一、安装vue-cli@4.5.x工欲善其事，必先利其器，我们需要安装vue-cli来创建项目（别问为什么，问就是简单、便捷、高效）。但是，在安装之前，首先要保证你的电脑里有12以上的node.js，不然你直接运行npm是会报错的。至于安装node的方案，请自行网上搜索。接下来，我们打开电脑上的终端软件（windows用powershell或者cmd），输入以下代码并回车：npm

目录系列链接一、目录结构二、安装vue-router三、安装vuex四、改写main.ts五、篇章小结系列链接第一章——vue3.0+ts+element-plus多页签应用模板：项目搭建篇第二章——vue3.0+ts+element-plus多页签应用模板：安装vue-router与vuex篇一、目录结构现在，你的目录结构应该是这样的 (忽略node_modules)：├── config # 配置文件| ├── dev.config.js

目录系列链接一、目录结构一、安装element-plus二、按需引入为什么要按需引入？如何按需引入？三、验证是否引入成功五、篇章小结系列链接第一章——vue3.0+ts+element-plus多页签应用模板：项目搭建篇第二章——vue3.0+ts+element-plus多页签应用模板：安装vue-router与vuex篇第三章——vue3.0+ts+element-plus多页签应用模板：element-plus按需引入篇一、目录结构现在你的目录结构，应该是这样的：├── config

目录系列链接一、目录结构二、安装sass三、编写主框架1. 添加主框架的路由2. 划分主框架的header，aside，main四、封装侧边栏组件1. 实现自由伸缩系列链接第一章——vue3.0+ts+element-plus多页签应用模板：项目搭建篇第二章——vue3.0+ts+element-plus多页签应用模板：安装vue-router与vuex篇第三章——vue3.0+ts+element-plus多页签应用模板：element-plus按需引入篇第四章——vue3.0+ts+elem

7

目录系列链接一、目录结构二、实现头部logo1. 封装图标组件 (SvgIcon)：(1) svg-sprite-loader(2) svgo-loader(3) 开始行动吧系列链接第一章——vue3.0+ts+element-plus多页签应用模板：项目搭建篇第二章——vue3.0+ts+element-plus多页签应用模板：安装vue-router与vuex篇第三章——vue3.0+ts+element-plus多页签应用模板：element-plus按需引入篇第四章——vue3.0+ts

目录系列文章一、先说点啥1. 为啥需要路由缓存？2. 怎么实现路由缓存？二、路由扁平化三、定义tag模块处理路由缓存系列文章一、先说点啥1. 为啥需要路由缓存？关于这个问题，我就只假设一个场景：用户正在填写一个很长很长的表单，然后他填着填着就需要查看一下其他页面表格中的信息，这个时候他一定会去切换路由。好的，等他看完回来，他发现自己刚才用了一个小时填了一半的表单，居然被清！空！了！当然这只是个笑话，应该没有人会设计一个这样反人类的表单，但是如果这个系统有路由缓存的功能，那么刚才的悲剧是不是就可以避

目录系列链接一、目录结构二、写一个基本的HeaderToolbar系列链接第一章——vue3.0+ts+element-plus多页签应用模板：项目搭建篇第二章——vue3.0+ts+element-plus多页签应用模板：安装vue-router与vuex篇第三章——vue3.0+ts+element-plus多页签应用模板：element-plus按需引入篇第四章——vue3.0+ts+element-plus多页签应用模板：侧边导航菜单篇（上）第五章——vue3.0+ts+element

目录系列链接一、目录结构二、封装PathBreadcrumb (面包屑)组件三、篇章小结系列链接第一章——vue3.0+ts+element-plus多页签应用模板：项目搭建篇第二章——vue3.0+ts+element-plus多页签应用模板：安装vue-router与vuex篇第三章——vue3.0+ts+element-plus多页签应用模板：element-plus按需引入篇第四章——vue3.0+ts+element-plus多页签应用模板：侧边导航菜单篇（上）第五章——vue3.0

目录系列链接一、目录结构二、封装TagsView（标签视图）系列链接第一章——vue3.0+ts+element-plus多页签应用模板：项目搭建篇第二章——vue3.0+ts+element-plus多页签应用模板：安装vue-router与vuex篇第三章——vue3.0+ts+element-plus多页签应用模板：element-plus按需引入篇第四章——vue3.0+ts+element-plus多页签应用模板：侧边导航菜单篇（上）第五章——vue3.0+ts+element-pl