目前很多后台管理框架都支持多TAB模式，效果如下： 因此我们这也要支持多个TAB，要支持多个TAB，需要存储多个TAB页面的名称等信息。 此功能相对比较复杂，难度较大 基本功能设计 支持功能： 支持TAB名称和图标展示 支持TAB关闭 TAB支持右键菜单，可以关闭多个TAB 用KeepAlive缓存TAB状态 关闭后KeepAlive缓存移除 父子…
element-plus已经自带部分图标，不过图标数量并不多，因为是后台系统，可以考虑集成更多的图标，这里选择xicons图标库里面的material图标库。 目前图标库基本都是用组件的形式来使用图标，开始已经集成了element-plus的图标，这里要安装xicons。 地址：https://www.xicons.org/#/ 安装xicons图…
element-plus默认就支持黑白色主题，因此要实现主题切换只需要引入相关css文件，然后在html上添加上名为dark的类就完成了 文档：https://element-plus.org/zh-CN/guide/theming.html 为了方便切换主题，这里使用vueuse的useDark方法，此方法会给html增加相关的class 引入黑…
Pinia状态管理 目前Vuex已经不推荐使用，4.x是最后一版，已经不会有新版本，Pinia实际就是Vuex 5，因此推荐使用Pinia作为状态管理，其实Pinia使用比Vuex要简单。实际已经在生成项目的时候已经是集成了Pinia。 地址：https://pinia.vuejs.org/zh/introduction.html Pinia简单对…
多语言支持 这里要支持多语言，需要控件支持多语言，以及自己项目要支持多语言，另外要提供多语言的切换功能。 element-plus多语言 element plus的国际化多语言参考：https://element-plus.gitee.io/zh-CN/guide/i18n.html 引入element国际化资源 import ElementPlu…
Vue的中文文档还是比较齐全的，参考官网：https://cn.vuejs.org/ 参考文档：https://cn.vuejs.org/guide/quick-start.html Vue3需要16.0 或更高版本的 Node.js Vue3介绍 Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框…
Vue项目集成Axios支持Restful调用 Axios是前端Http请求工具，集成ajax请求，提供Promise API，方便请求处理，并可以很好的定制拦截器等统一处理请求和响应。 GitHub地址： https://github.com/axios/axios 安装Axios 使用npm安装axios即可 npm install axios…
Vue项目中使用Vuex作为状态管理已经是比较通用的做法了，新建Vue项目的时候就可以选择集成Vuex，其实Vuex本质上类似全局的变量存储，方便在所有Vue组件中共享，而且也可以动态改变状态。 在单页应用中Vue项目集成Vuex也就足够基本使用了，但是刷新页面的时候数据都会被清空，在某些情况下，我们需要这些状态能保存下来，比如登录后的用户信息、A…
前面已经搭建好VueJS环境，下面可以引入ElementUI组件了，ElementUI提供比较完整的控件库，很容易搭建一个自己的后台页面。 参考地址：https://element.eleme.cn/#/zh-CN/component/installation 安装并使用ElementUI npm install element-ui --save…
Vue一般开发基于nodejs环境，提前安装好nodejs之后，才能进行下面的操作。 安装Vue Cli工具 最好先设置好registry，下载速度会快些，参考可选镜像：https://developer.aliyun.com/mirror/NPM npm config set registry=https://r.cnpmjs.org #或者是使…