Vivien_CC的博客

随着技术的飞速发展，我们公司内部一个基于“上古神器” jQuery + PHP 构建的十年历史老项目已显力不从心，技术非常老旧且维护成本高昂，其实已经无数次想要重构，但是苦于历史遗留原因以及业务的稳定性而一直难以下手，而且一时半会又不能全部重构。

v-micro-app-plugin 是一款基于京东MicroApp框架的微前端插件，旨在帮助开发者快速地将微应用集成到不同的系统中，实现高效、灵活的前端模块化开发。以下是详细的使用指南，帮助你快速上手。

CI/CD（Continuous Intergration/Continuous Delpoy），即持续集成/持续部署，或称为持续集成/持续交付，作为一套面向开发和运维团队的解决方案，CI/CD 主要解决集成新代码和向用户频繁交付应用的问题。更直接地说，就是可以解放开发人员的双手，将时间和精力专注于代码本身。传统的前端部署往往都要经历：本地代码更新本地打包项目清空服务器相应目录上传项目包至相应目录几个阶段，这些都是机械重复的步骤，并且手动操作非常容易出错。对于这一过程，我们往往可以通过CI/CD。

最近我开启了一个新项目，基于echarts进行二次封装，希望能为Vue3项目量身打造一套高效、易用的图表组件库，取名为 v-echarts。目前雏形已经搭建完成，先把整个搭建过程做一个记录。后续再持续迭代、完善该图表组件库。笔者在搭建自己的组件库时，趁着项目当前足够空白，专门切出了一个 demo 分支，存下来当做模板以备不时之需。可以切换到 demo 分支，查看比较干净的项目代码。

一、背景一、背景目标：如果当前页面中有正在编辑中的内容，那么此时切换组件、跳转路由、关闭标签页、刷新页面，都会有离开确认提示，防止用户因误触导致填写的内容白费。后台管理系统中有许多需要填写的表单，弹窗方式的表单一般都会关掉或提交，而单页个面的表单，有时候会忘记暂存或提交，直接离开页面，导致千辛万苦填写的内容全部置空，这是非常不友好的！！！于是，需要实现一个功能：如果当前页面中存在编辑中的内容，那么离开页面之前，要弹窗提示用户是否确认离开。二、实现。

静态路由通常是那些不需要权限即可访问的页面，如登录页、404页面等。动态路由则是根据用户角色和权限来动态生成的路由。3、路由匹配与生成调用后端接口获取侧边栏树形结构数据。前端通过递归遍历后端返回的树形结构数据，并与前端配置的路由进行匹配。

背景：平常所接触到的系统权限控制，大部分都是菜单、路由级别的控制，但后台管理系统中，很多操作都是与职责和角色挂钩的，同样一个列表，不同人的操作列并不都一样，有些页面存在一些含有重要数据的组件，也会进行相应的权限控制，仅让领导层能看到。：根据用户的权限不同，对不同的按钮进行权限控制，对同一组数据，不同的用户是否可以增删改查。对某些用户来说是只读浏览数据，对某些用户来说是可编辑的数据。除了按钮，比如页面中的某个字段，某个div，某个组件要求根据当前用户的权限进行控制时，都可以称为按钮级权限。