✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。

前一个小节的内容中，已经介绍了项目中如何配置代码高亮的插件。这个小节来学一个新的富文本编辑器，叫做：。Vue3项目开发（微信文章集合）编辑器的效果，如下所示：首先，需要安装依赖，执行下面命令：执行成功，就可以在文件中，查看到相应的依赖和版本信息。在目录下面，创建一个目录，接着再创建一个目录，新建一个文件，内容如下：1.4、创建组件在目录下，新建一个组件，代码如下所示：1.5、使用组件组件创建完成之后，就可以直接引入使用了。案例代码：1.6、获取源代码到此，项目集成富文本编辑器就介绍完了。

前一个小节的内容中，已经介绍了Vue3项目如何集成Quill富文本编辑器。这个小节来学习一下，如何Quill引入代码高亮插件。

前一个小节的内容中，已经介绍了Vue3项目如何配置wangEditor图片上传的功能。quill。

wangEditor还提供了一个自定义上传的方法，通过方法，可以实现自己的图片上传逻辑。方法有两个参数，第一个参数是当前上传的文件对象file，第二个参数是一个回调函数insertFn，可以插入图片到文本编辑器里面。/*** 编辑器配置*/placeholder: '请输入内容...',// 创建 FormData 对象// 添加文件到 FormData// 上传图片到服务器baseURL: 'http://localhost:8888', // 设置基础的 API 地址。

前一个小节的内容中，已经介绍了Vue3项目中如何修改el-table表格的默认样式。这个小节来学习一下，Vue3项目如何集成wangEditor富文本编辑器。

前一个小节的内容中，已经介绍了项目如何基于封装图表组件。这个小节来学习一下，如何修改表格组件的默认样式。Vue3项目开发（微信文章集合）修改之后的表格样式效果，如下所示：修改表格样式，例如：字体颜色、背景颜色、边框等等，只需要添加下面代码即可：修改表格行的样式，例如：背景颜色、边框、字体大小，颜色等等，只需要添加下面代码：修改表格的偶数行的背景颜色、当前选中行显示的背景颜色，只需要添加下面代码：修改表格多选框的样式，添加下面代码：1.3、完整代码调整完的表格组件完整代码，如下所示：1.4、获取源

前一个小节的内容中，已经介绍了Vue3项目如何引入ECharts图表库，这个小节基于ECharts图表库自定义封装一个图表组件，方便开发过程中图表需求的实现。

前一个小节的内容中，已经介绍了如何封装组件，这个小节来学习一下，项目中如何引入图标库组件。Vue3项目开发（微信文章集合）引入图表组件之后的效果，如下图所示：是一个强大的数据可视化图表库，提供了非常多的图表，例如：柱状图、折线图、折柱混合、饼状图等等图表。用户可以根据自己的需求，选择相应的图表组件，使用起来也非常的方便。首先，需要安装的依赖，执行下面命令：执行成功，就可以在文件中，查看到相应的依赖和版本信息。依赖安装完成之后，就可以直接使用图表了。首先，创建一个测试案例，代码如下：上面代码中，需要引入依

前一个小节的内容中，已经介绍了项目中如何引入状态管理库，这个小节来学习如何基于中的组件，自定义封装一个表格组件。Vue3项目开发（微信文章集合）这个小节实现的表格组件，运行效果，如下所示：在目录下，创建一个目录，新建一个组件。案例代码，如下所示：1.3、使用组件在需要使用表格组件的地方，引入组件即可。1.4、获取源代码到此，自定义封装表格组件就介绍完了。

Pinia是Vue官方推出的一个新的状态管理库插件，它比Vuex更简洁、更灵活，使用起来也更加的方便。Pinia中的API更加简洁直观，它减少了Vuex中的一些复杂概念，例如：模块化状态管理的冗余代码。Pinia直接使用函数定义Store，使得状态管理更加直观。Pinia的状态是响应式的，与Vue的响应式系统可以无缝集成。这意味着当状态发生变化时，所有依赖该状态的组件都会自动更新。Pinia还提供了对TypeScript的全面支持，并且可以提供了插件支持，例如：持久化状态、日志记录等功能。需要注意的是，

前一个小节的内容中，已经介绍了如何实现用户的注销功能。这个小节来学习一下，如何调整侧边菜单栏的背景颜色，之前实现的侧边栏的是白色的样式，但有些可能喜欢黑色系列的，所以这里来学习一下，如何调整<el-menu>菜单栏的背景样式。

前一个小节的内容中，已经介绍了如何实现多级菜单的功能。这个小节来学习一下，如何实现用户注销登录的功能。

前一个小节的内容中，已经介绍了如何实现面包屑导航的功能。这个小节基于之前动态菜单的基础之上，添加多层级菜单的显示功能。在之前做的动态菜单中，会存在一个bug，那就是如果菜单层级超过2级，此时，菜单渲染就会报错，从而导致无法使用。这个小节就来解决多层级菜单的这个问题。

前一个小节的内容中，已经介绍了动态加载菜单以及如何解决页面刷新后菜单白屏的问题。这个小节来学习一下，如何实现切换菜单，更新面包屑导航提示信息的功能。

前一个小节的内容中，已经介绍了如何动态加载菜单，虽然功能实现了，但是你会发现，当页面刷新的时候，此时访问的路由菜单会出现白屏的效果。当我们访问某个菜单之后，此时刷新一下页面，这个时候访问的路由菜单就会白屏（空白页面），或者跳转到指定的404页面），效果就如下图所示：**那么，为什么页面刷新之后，我们访问的路由菜单会出现白屏效果呢？**下面就来看下这个问题的根本原因吧。

前一个小节的内容中，介绍了如何控制访问页面的权限，这个小节来学习一下，如何动态地加载菜单数据。在实际开发过程中，用户能够看到的菜单数据，都是通过调用后端接口获取的，当用户登录成功之后，调用接口获取到用户所属的菜单信息，然后动态加载并显示出这些路由菜单。

前一个小节的内容中，介绍了NProgress加载进度条插件的使用，这个小节来学习一下，如何控制界面的访问权限。

前一个小节的内容中，介绍了如何全局设置滚动条的样式，这个小节来学习一个进度条插件，插件名称叫做NProgress，使用这个插件可以很方便实现进度加载的功能。

前一个小节的内容中介绍了如何实现折叠和展开侧边栏的功能，这个小节来学习一下，如何全局设置滚动条的样式。

前一个小节的内容介绍了重新加载组件的功能，以及如何设置组件过渡动画。这个小节来学习一下，如何实现管理后台布局中，侧边菜单栏折叠和展开的功能。

前一个小节的内容中已经实现了管理后台全屏显示的功能，这个小节来实现重新加载组件的效果，要实现的功能是：点击头部信息栏中的刷新图标，要重新加载当前显示的组件界面，并且还要给组件加上了过渡动画的效果。

前一个小节内容中，已经将管理后台首页面的头部信息栏实现了，这个小节来看下如何实现点击图标，实现全屏显示、退出全屏显示的功能。

前一个小节的内容中，已经将管理后台左侧菜单栏的功能实现了，这个小节来实现管理后台首页面中的头部信息栏。实际开发中，管理后台首页面的头部信息栏，一般会显示用户头像、个人中心、退出登录、全屏展示等功能，这些都可以根据实际的需要来添加。针对头部信息栏中的内容，可以拆分成不同的组件进行实现，我这里是这样做的，针对上面要显示的图标，新建了一个`VIcon.vue`组件，右侧头像信息新建了一个`VProfile.vue`组件，当前显示的菜单路径新建了一个`VBreadCrumb.vue`组件。

前一个小节已经将管理后台首页面的布局结构搭建完成了，这个小节就来实现左侧菜单栏的功能界面。

上一个小节内容完成了登录注册界面的功能界面，这个小节就来实现一下管理后台首页的布局界面。

前面几个小节已经介绍了Vue3项目环境的搭建，并且在项目中引入了Element Plus、VueRouter、Vuex、Axios等依赖，这个小节就来做一个登录注册界面。

iconfont是阿里巴巴提供的一个图标素材库，这个图标库中有非常多的icon图标，可以直接搜索自己想要的图标，还支持调整颜色、大小、图标样式等等功能。

这篇文章还是基于之前的代码之上，介绍Vue3项目中如何引入第三方的图标库。前一个小节介绍了如何引入中的图标库，但是中的图标很少，有可能不满足我们的需求，这个时候就需要使用第三方的图标库，这个小节介绍如何引入图标库。是一个第三方提供的图标库，v5版本提供了1820个图标，可以覆盖大部分的图标使用场景了，可以去官网查看有哪些图标。

这篇文章基于之前的项目代码之上，介绍Vue3项目中如何引入Element Plus的图标库组件。

这篇文章基于之前小节的代码之上，介绍项目中如何引入插件，实现图片的裁剪功能。先来看看这个小节中要实现的功能效果，下图是基于插件之上，实现图片裁剪的运行效果：要实现图片裁剪的功能，需要引入第三方的依赖，例如：插件，这个小节就使用插件实现图片的裁剪功能。首先需要安装的依赖，如下所示：执行成功，就可以在文件中，查看到相应的依赖和版本信息。为了方便在项目中使用图片裁剪的功能，这里基于组件之上，自定义封装一个图片裁剪组件。在目录下，创建一个目录，用于存放图片裁剪组件，在目录下面新建一

`props`是`Vue`中提供的一个用于父组件向子组件传递数据的属性，在`Vue3`组合式API中，需要使用`defineProps()`进行定义，然后在这个方法中定义父组件要向子组件中传递的数据属性名称。案例代码如下所示：`props`是`Vue`中提供的一个用于父组件向子组件传递数据的属性，在`Vue3`组合式API中，需要使用`defineProps()`进行定义，然后在这个方法中定义父组件要向子组件中传递的数据属性名称。案例代码如下所示：

前面已经介绍了`Vue3`项目基础开发环境的搭建，以及引入`Element Plus`、`VueRouter`、`Axios`、`Vuex`四个插件，这个小节基于`Element Plus`组件库的基础之上，自定义一个`dialog`弹出框组件。`Vue3`中要自定义一个组件，需要学会这几个知识点：`父子组件通信`、`props属性`的使用、`emits事件`的使用、`watch监听`数据变化。这些都是自定义组件中会使用到的一些知识点，下面来简单学习一下。

这篇文章基于前一个小节的代码基础之上，介绍项目中如何引入状态管理插件。Vuex是一个专门为应用程序提供状态管理的插件，首先需要安装的依赖：

这篇文章基于前一个小节的代码基础之上，介绍如何在Vue3项目中引入Axios插件实现网络通信的功能。

这篇文章在前一个小节的代码基础之上，介绍一下如何使用VueRouter路由组件相关的功能。

这篇文章基于前一个小节的代码基础之上，介绍如何在Vue3项目中引入VueRouter路由组件。

这篇文章在前一个小节的代码基础之上，介绍如何在Vue3项目中引入Element Plus组件库和图标库。

这篇文章来介绍一下如何搭建Vue3+Vite的基础开发环境。