echarts vue.js 前端 elementui 【项目实战】基于Vue3+TypeScript+Pinia的后台管理系统（coderwhy）

基于Vue3+TypeScript+Pinia的后台管理系统

是基于Vue3、Pinia、VueRouter、Vite、ElementPlus、TypeScript、Echarts等后台系统

接口地址

https://documenter.getpostman.com/view/12387168/TzzDKb12

baseURL = ‘http://codercba.com:5000’

postman详细使用可以自己搜 也可以使用其他接口管理的工具

给项目添加 环境变量 baseURL

项目地址

https://gitee.com/yangyang993/vue3_ts_cms_admin.git

超级管理员

登录

系统总览

侧边栏是动态形成的：动态路由加载。路由地址路径和菜单相匹配。 注意：路由地址和侧边栏菜单的选中状态不匹配（通过判断当前路由来解决）

核心技术

商品统计

echarts5.x 设计：饼图、玫瑰图、柱状图、折线图、中国地图核心：封装一下echarts

设计一个baseEcharts ，将echarts的初始化，和setOtion封装在这里；将每一种图形都封装成组件，引用baseEcharts设置个性化的option，通过props，将option传递给baseEcharts，

系统管理

这个部分，主要是对数据的增删改查。展示的布局和形式相似，通过抽取相同的部分，形成三个部分的公共组件（pageSearch、pageContent、pageModal）。

个性化的部分，使用具名插槽页面的搭建使用配置文件，快速搭建（注意：配置的时候，把url也要写上）编辑和新增是同一个公共组件，注意一些回显问题表格时间需要格式化，通过utils分页注意：在第1页之后的任何一页上时，添加或者修改数据，点击确定要刷新，当前页要定位到第1页

用户管理

部门管理

菜单管理

角色管理

商品中心

商品类别

商品类别

随便聊聊

故事列表

其他身份角色

根据用户 coderdemo的角色，获取的动态路由权限

项目结构

vue3_ts_cms

├── LICENSE

├── README.md

├── auto-imports.d.ts

├── components.d.ts

├── env.d.ts

├── index.html

├── package-lock.json

├── package.json

├── public

│ └── favicon.ico

├── src

│ ├── App.vue

│ ├── assets

│ │ ├── img

│ │ │ ├── login-bg.svg

│ │ │ └── logo.svg

│ │ ├── index.less

│ │ ├── reset.css

│ │ └── reset.less

│ ├── components

│ │ ├── MainHeader

│ │ │ ├── HeaderCrumb

│ │ │ │ └── HeaderCrumb.vue

│ │ │ ├── HeaderInfo

│ │ │ │ └── HeaderInfo.vue

│ │ │ └── MainHeader.vue

│ │ ├── MainMenu

│ │ │ └── MainMenu.vue

│ │ ├── MainTable

│ │ │ └── MainTable.vue

│ │ ├── PageEcharts

│ │ │ ├── data

│ │ │ │ ├── china.json

│ │ │ │ ├── china_geo.json

│ │ │ │ └── location.json

│ │ │ ├── echart-src

│ │ │ │ ├── BarEchart.vue

│ │ │ │ ├── BaseEchart.vue

│ │ │ │ ├── LineEchart.vue

│ │ │ │ ├── MapEchart.vue

│ │ │ │ ├── PieEchart.vue

│ │ │ │ └── RoseEchart.vue

│ │ │ ├── index.ts

│ │ │ ├── types

│ │ │ │ └── index.ts

│ │ │ └── utils

│ │ │ ├── convert-data.ts

│ │ │ └── coordinate-data.ts

│ │ └── PageMain

│ │ ├── PageContent

│ │ │ └── PageContent.vue

│ │ ├── PageModal

│ │ │ ├── PageModal.vue

│ │ │ └── type.ts

│ │ └── PageSearch

│ │ └── PageSearch.vue

│ ├── global

│ │ ├── constance.ts

│ │ └── register-icons.ts

│ ├── hooks

│ │ ├── usePageContent.ts

│ │ ├── usePageModal.ts

│ │ └── usePermission.ts

│ ├── main.ts

│ ├── router

│ │ ├── AnalysisMain

│ │ │ ├── AnalysisOverview

│ │ │ │ └── AnalysisOverview.ts

│ │ │ └── AnalysisdDashboard

│ │ │ └── AnalysisdDashboard.ts

│ │ ├── ProductCenter

│ │ │ ├── ProductCategory

│ │ │ │ └── ProductCategory.ts

│ │ │ └── ProductGoods

│ │ │ └── ProductGoods.ts

│ │ ├── StoryChat

│ │ │ ├── ChatStory

│ │ │ │ └── ChatStory.ts

│ │ │ └── StoryList

│ │ │ └── StoryList.ts

│ │ ├── SystemMain

│ │ │ ├── SystemDepartment

│ │ │ │ └── SystemDepartment.ts

│ │ │ ├── SystemMenu

│ │ │ │ └── SystemMenu.ts

│ │ │ ├── SystemRole

│ │ │ │ └── SystemRole.ts

│ │ │ └── SystemUser

│ │ │ └── SystemUser.ts

│ │ └── index.ts

│ ├── service

│ │ ├── config

│ │ │ └── index.ts

│ │ ├── index.ts

│ │ ├── modules

│ │ │ ├── home.ts

│ │ │ ├── login

│ │ │ │ └── login.ts

│ │ │ └── main

│ │ │ ├── analysis

│ │ │ │ └── analysis.ts

│ │ │ ├── main.ts

│ │ │ └── system

│ │ │ └── index.ts

│ │ └── request

│ │ ├── index.ts

│ │ └── type.ts

│ ├── store

│ │ ├── index.ts

│ │ ├── login

│ │ │ └── login.ts

│ │ └── main

│ │ ├── analysis

│ │ │ └── analysis.ts

│ │ ├── main.ts

│ │ └── system

│ │ ├── system.ts

│ │ └── type.ts

│ ├── types

│ │ ├── index.ts

│ │ └── login.ts

│ ├── utils

│ │ ├── cache.ts

│ │ ├── format.ts

│ │ └── map-menus.ts

│ ├── views

│ │ ├── AnalysisMain

│ │ │ ├── AnalysisOverview

│ │ │ │ ├── AnalysisOverview.vue

│ │ │ │ └── OverviewCpn

│ │ │ │ ├── OverviewCard.vue

│ │ │ │ └── OverviewTree.vue

│ │ │ └── AnalysisdDashboard

│ │ │ ├── AnalysisdDashboard.vue

│ │ │ └── DashCpns

│ │ │ ├── CountCard

│ │ │ │ └── CountCard.vue

│ │ │ └── EchartCard

│ │ │ └── EchartCard.vue

│ │ ├── LoginAdmin

│ │ │ ├── LoginAccount.vue

│ │ │ ├── LoginAdmin.vue

│ │ │ └── LoginPhone.vue

│ │ ├── NotFound

│ │ │ └── NotFound.vue

│ │ ├── ProductCenter

│ │ │ ├── ProductCategory

│ │ │ │ ├── ProductCategory.vue

│ │ │ │ └── config

│ │ │ │ ├── content.config.ts

│ │ │ │ ├── modal.config.ts

│ │ │ │ └── search.config.ts

│ │ │ └── ProductGoods

│ │ │ ├── ProductGoods.vue

│ │ │ └── config

│ │ │ ├── content.config.ts

│ │ │ ├── modal.config.ts

│ │ │ └── search.config.ts

│ │ ├── StoryChat

│ │ │ ├── ChatStory

│ │ │ │ └── ChatStory.vue

│ │ │ └── StoryList

│ │ │ ├── StoryList.vue

│ │ │ └── config

│ │ │ └── content.config.ts

│ │ └── SystemMain

│ │ ├── SystemDepartment

│ │ │ ├── SystemDepartment.vue

│ │ │ └── config

│ │ │ ├── content.config.ts

│ │ │ ├── modal.config.ts

│ │ │ └── search.config.ts

│ │ ├── SystemMain.vue

│ │ ├── SystemMenu

│ │ │ ├── SystemMenu.vue

│ │ │ └── config

│ │ │ └── content.config.ts

│ │ ├── SystemRole

│ │ │ ├── SystemRole.vue

│ │ │ └── config

│ │ │ ├── content.config.ts

│ │ │ ├── modal.config.ts

│ │ │ └── search.config.ts

│ │ └── SystemUser

│ │ ├── SystemUser.vue

│ │ ├── UserCpns

│ │ │ ├── UserContent.vue

│ │ │ ├── UserModal.vue

│ │ │ └── UserSearch.vue

│ │ └── config

│ │ ├── content.config.ts

│ │ ├── modal.config.ts

│ │ └── search.config.ts

│ └── vite-env.d.ts

├── tsconfig.app.json

├── tsconfig.json

├── tsconfig.node.json

└── vite.config.ts

项目地址

https://gitee.com/yangyang993/vue3_ts_cms_admin.git

相关笔记

【Axios、TypeScript】基于vue3和typescript的axios二次封装

参考文章

 您阅读本篇文章共花了：