基于Vue3+TypeScript+Pinia的后臺(tái)管理系統(tǒng)
是基于Vue3、Pinia、VueRouter、Vite、ElementPlus、TypeScript、Echarts等后臺(tái)系統(tǒng)
接口地址
https://documenter.getpostman.com/view/12387168/TzzDKb12
baseURL = ‘http://codercba.com:5000’
postman詳細(xì)使用可以自己搜 也可以使用其他接口管理的工具
給項(xiàng)目添加
環(huán)境變量 baseURL
項(xiàng)目地址
https://gitee.com/yangyang993/vue3_ts_cms_admin.git
超級(jí)管理員
登錄
系統(tǒng)總覽
側(cè)邊欄是動(dòng)態(tài)形成的：動(dòng)態(tài)路由加載。路由地址路徑和菜單相匹配。
注意：路由地址和側(cè)邊欄菜單的選中狀態(tài)不匹配（通過(guò)判斷當(dāng)前路由來(lái)解決）
核心技術(shù)
商品統(tǒng)計(jì)
- echarts5.x 設(shè)計(jì)：餅圖、玫瑰圖、柱狀圖、折線圖、中國(guó)地圖
- 核心：封裝一下echarts
- 設(shè)計(jì)一個(gè)baseEcharts ，將echarts的初始化，和setOtion封裝在這里；
- 將每一種圖形都封裝成組件，引用baseEcharts
- 設(shè)置個(gè)性化的option，通過(guò)props，將option傳遞給baseEcharts，
系統(tǒng)管理
這個(gè)部分，主要是對(duì)數(shù)據(jù)的增刪改查。展示的布局和形式相似，通過(guò)抽取相同的部分，形成三個(gè)部分的公共組件（pageSearch、pageContent、pageModal）。
- 個(gè)性化的部分，使用具名插槽
- 頁(yè)面的搭建使用配置文件，快速搭建（注意：配置的時(shí)候，把url也要寫上）
- 編輯和新增是同一個(gè)公共組件，注意一些回顯問(wèn)題
- 表格時(shí)間需要格式化，通過(guò)utils
- 分頁(yè)注意：在第1頁(yè)之后的任何一頁(yè)上時(shí)，添加或者修改數(shù)據(jù)，點(diǎn)擊確定要刷新，當(dāng)前頁(yè)要定位到第1頁(yè)
用戶管理
部門管理
菜單管理
角色管理
商品中心
商品類別
商品類別
隨便聊聊
故事列表
其他身份角色
根據(jù)用戶 coderdemo的角色，獲取的動(dòng)態(tài)路由權(quán)限
項(xiàng)目結(jié)構(gòu)
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
項(xiàng)目地址
https://gitee.com/yangyang993/vue3_ts_cms_admin.git文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-465387.html
相關(guān)筆記
【Axios、TypeScript】基于vue3和typescript的axios二次封裝文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-465387.html
到了這里，關(guān)于【項(xiàng)目實(shí)戰(zhàn)】基于Vue3+TypeScript+Pinia的后臺(tái)管理系統(tǒng)（coderwhy）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
