vue3+elementPlus之后台管理系统（从0到1）(day4-完结)

面包屑

创建一个面包屑组件

将路由导入然后格式化map对象 key-value

将当前路由的key和value获取然后存入list数组中

遍历list数据，渲染内容

动态菜单

在store/index.js中创建全局变量记录当前路由路径，并创建修改方法

//记录当前路由路径
currentPath:'/'


//修改路由路径的方法
updateCurrentPath(state, value){
  state.currentPath = value
} 

在AsideCom.vue中加载菜单

轮播图管理

获取轮播图数据

//导入封装的axios
import ajax from "@/utils/axios";

//获取轮播图列表
export function bannerList(){
    return ajax({
        method:'GET',
        url:'banner/list'
    })
}

//添加轮播图
export function addBanner(params){
    return ajax({
        method:'POST',
        url:'banner/add',
        data:params
    })
}

创建轮播图页面

添加轮播图

图表管理echarts

官网：Apache ECharts

安装echarts

npm install echarts

导入图表

将图表绑定在指定元素上

设置一个option

文件导入 excel

安装

npm install xlsx

选择文件

将文件读成数据流

将数据流读为对象

将对象中的工作表内容读取出来

将读取的内容转为json

数据渲染

文件导出 excel

使用文档：js-export-excel - npm

安装

npm install js-export-excel

1、导入使用函数

2、创建导出对象

3、定义导出内容

4、实现具体导出

富文本编辑器

官方文档：TinyMCE 7 Documentation | TinyMCE Documentation

安装：

npm install @tinymce/tinymce-vue tinymce 
或npm install --save tinymce "@tinymce/tinymce-vue@^5"

使用，需要申请api-key