vue3后台管理系统 vue3+vite+pinia+element-plus+axios上

前言

项目安装与启动

使用vite作为项目脚手架

# pnpm
pnpm create vite my-vue-app --template vue

安装相应依赖

# sass
pnpm i sass
# vue-router
pnpm i vue-router
# element-plus
pnpm i element-plus
# element-plus/icon 
pnpm i @element-plus/icons-vue

安装element-plus按需自动引入插件

pnpm install -D unplugin-vue-components unplugin-auto-import

并在vite.config.js中配置

import{ defineConfig }from'vite'import vue from'@vitejs/plugin-vue'import AutoImport from'unplugin-auto-import/vite'import Components from'unplugin-vue-components/vite'import{ ElementPlusResolver }from'unplugin-vue-components/resolvers'exportdefaultdefineConfig({plugins:[vue(),AutoImport({resolvers:[ElementPlusResolver()],}),Components({resolvers:[ElementPlusResolver()],}),],resolve:{alias:{'@':'/src'}}})

注册elementplus的icon库

import*as ElementPlusIconsVue from'@element-plus/icons-vue'const app =createApp(App)

app.use(router).mount('#app')for(const[key, component]of Object.entries(ElementPlusIconsVue)){

app.component(key, component)}

删除helloworld组件和style.css 删除App.vue相应代码

在src目录下创建router文件夹在其中创建index.js 并配置基本内容

import{createRouter,createWebHashHistory}from'vue-router'const routes =[{path:'/',name:'main',redirect:"/home",component:()=>import("@/views/main.vue"),children:[path:"/home",name:"Home",component:()=>import("@/views/Home.vue")]}]const router =createRouter({history:createWebHashHistory(),

routes

})exportdefault router

并在main.js中注册和在App.vue中使用

//main.js
app.use(router).mount('#app')//App.vue<template><router-view></router-view></template>

创建views文件夹，创建Main.vue文件

使用element-plus组件库container布局容器

<template>

<div class="commom-layout">

<el-container class="lay-container">

<common-aside></common-aside>

<el-container>

<el-header class="el-header">

<commonHeader></commonHeader>

</el-header>

<common-tab></common-tab>

<el-main class="right-main">

<RouterView></RouterView>

</el-main>

</el-container>

</el-container>

</div>

</template>

<script setup>

import commonAside from '../components/commonAside.vue';

import commonHeader from '../components/commonHeader.vue';

import commonTab from '../components/commonTab.vue';

</script>

  

<style scoped lang="scss">

.commom-layout, .lay-container{

height:100%;

}

.el-header{

background-color: #333;

}

</style>

布局已经搭好 让我们完成里面的组件

创建component文件夹创建common-aside.vue文件,也就是el-aside中套了一个el-menu,并使用vue-router中跳转路由，并用pinia
状态管理工具 来控制兄弟组件中的通信
所以需要先引入pinia,并创建store文件夹与index.js文件

pnpm i pinia 

//在main.jsconst pinia =createPinia()

app.use(pinia)// store/index.jsimport{ defineStore }from'pinia'state:()=>{return{isCollapse:true,menuList:[],}},

<template>

<el-aside :width="MenuWidth">

<el-menu

background-color="#545c64"

text-color="#fff"

:collapse="isCollapse"

:collapse-transition="false"

:default-active="activeMenu"

>

<h3 v-show="!isCollapse">通用后台管理系统</h3>

<h3 v-show="isCollapse">后台</h3>

<el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path"

@click="handleMenu(item)"

>

<component class="icons" :is="item.icon"></component>

<span>{{ item.label }}</span>

</el-menu-item>

<el-sub-menu v-for="item in hasChildren" :index="item.path" :key="item.path">

<template #title>

<component class="icons" :is="item.icon"></component>

<span>{{ item.label }}</span>

</template>

<el-menu-item-group>

<el-menu-item

v-for="(subItem,subIndex) in item.children"

:key="subItem.path"

:subIndex="subItem.path"

@click="handleMenu(subItem)"

>

<component class="icons" :is="subItem.icon"></component>

<span>{{ subItem.label }}</span>

</el-menu-item>

</el-menu-item-group>

</el-sub-menu>

</el-menu>

</el-aside>

</template>

<script setup>

import { ref, computed } from 'vue'

import { useRouter ,useRoute} from 'vue-router';

import { useAllDataStore } from '../stores/index.js'

  

// const list = ref([

// { path: '/home', name: 'home', label: '首页', icon: 'house', url: 'Home' },

// { path: '/mall', name: 'mall', label: '商品管理', icon: 'video-play', url: 'Mall' },

// { path: '/user', name: 'user', label: '用户管理', icon: 'user', url: 'User' },

// {

// path: 'other', label: '其他', icon: 'location', children: [{ path: '/page1', name: 'page1', label: '页面1', icon: 'setting', url: 'Page1' },

// { path: '/page2', name: 'page2', label: '页面2', icon: 'setting', url: 'Page2' }]

// }])

const AllDataStore = useAllDataStore()

const list = computed(()=>AllDataStore.$state.menuList)

  

const noChildren = computed(() => list.value.filter(item => !item.children))

const hasChildren = computed(() => list.value.filter(item => item.children))

const clickMenu = (item) => { router.push(item.path) }

const isCollapse = computed(() => AllDataStore.$state.isCollapse)

const MenuWidth= computed(() => AllDataStore.$state.isCollapse ? '64px' : '180px')

const router = useRouter()

const route = useRoute()

const activeMenu = computed(()=>route.path)

const handleMenu= (item) => {

router.push(item.path)

AllDataStore.selectMenu(item)

}

</script>
<style lang="scss" scoped>
// var asideColor: #545c64;
.icons{
height:18px;
width:18px;
margin-right:5px;
}
.el-menu{
border-right:none;
h3{
line-height:48px;
color:#fff;
text-align:center;
}
}
.el-aside{
height:100%;
background-color: #545c64;
}
</style>

comonheader组件搭建 使用下拉框el-dropdown和面包屑el-breadcrumb

<template>

<div class="header">

<div class="l-content">

<el-button size="small" @click="handleCollapse">

<component class="icons" is="menu"></component>

</el-button>

<el-breadcrumb separator="/" class="bread">

<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

</el-breadcrumb>

</div>

<div class="r-content">

<el-dropdown>

<span class="el-dropdown-link">

<span><img :src="getImageUrl('user')" class="user"></span>

</span>

<template #dropdown>

<el-dropdown-menu>

<el-dropdown-item>个人中心</el-dropdown-item>

<el-dropdown-item @click="handleLoginOut">退出</el-dropdown-item>

</el-dropdown-menu>

</template>

</el-dropdown>

</div>

</div>

  

</template>

  

<script setup>

import {useAllDataStore}from '../stores/index.js'

import {useRouter}from 'vue-router'

import {computed} from 'vue'

const AllData = useAllDataStore()

const getImageUrl = (user) => {

return new URL(`../assets/images/${user}.png`,import.meta.url).href

}

const handleCollapse = () => {

AllData.$state.isCollapse = !AllData.$state.isCollapse

}

</script>

  

<style lang="scss" scoped>

.header {

display:flex;

justify-content: space-between;

align-items: center;

height:100%;

width:100%;

background-color: #333;

}

.icons{

height:20px;

width:20px;

}

.l-content{

display: flex;

align-items: center;

.el-button{

margin-right:20px;

}

}

.r-content{

.user{

width:40px;

height:40px;

border-radius: 50%;

outline: none;

}

}

//样式穿透

:deep(.bread span){

color:#fff !important;

cursor:pointer !important;

}

</style>

接下来实现首页剩余内容

使用elementplus中的layout布局 通过基础的 24 分栏，迅速简便地创建布局，在使用el-card卡片来分隔不同内容

<template>

<el-row class="home" :gutter="20">

<el-col :span="8" style="margin-top:20px">

<el-card shadow="hover">

<div class="user">

<img :src="getImageUrl('user')" class="user"/>

<div class="user-info">

<p class="user-info-admin">Admin</p>

<p class="user-info-p">超级管理员</p>

</div>

</div>

<div class="login_info">

<p>上次登陆时间:<span>2024-07-24</span></p>

<p>上次登陆地点:<span>北京</span></p>

</div>

</el-card>

<el-card shadow="hover" class="user-table">

<el-table :data="tableData">

<el-table-column

v-for="(val,key) in tableLabel"

:key = "key"

:prop = "key"

:label = "val"

>

</el-table-column>

</el-table>

</el-card>

</el-col>

<el-col :span="16" style="margin-top:20px">

<div class="num">

<el-card :body-style="{display:'flex', padding:0}"

v-for="item in countData"

:key="item.name"

>

<component :is="item.icon" class="icons" :style="{background:item.color}">

</component>

<div class="detail">

<p class="num">${{ item.value }}</p>

<p class="txt">${{ item.name }}</p>

</div>

</el-card>

</div>

<el-card class="top-echart">

<div ref="echart" style="height:230px"></div>

</el-card>

<div class="graph">

<el-card>

<div ref="userEchart" style="height:240px"></div>

</el-card>

<el-card>

<div ref="videoEchart" style="height:240px"></div>

</el-card>

</div>

</el-col>

</el-row>

</template>

<script setup>

import {ref,getCurrentInstance,onMounted,reactive} from 'vue'

import * as echarts from 'echarts'

const {proxy} = getCurrentInstance()

const getImageUrl = (user) => {

return new URL(`../assets/images/${user}.png`,import.meta.url).href

}

const observer =ref(null)

const tableData = ref([])

const countData = ref([])

const chartData = ref([])

const tableLabel = ref({

name: "课程",

todayBuy: "今日购买",

monthBuy: "本月购买",

totalBuy: "总购买",

}

)

const getTableData = async () => {

const data = await proxy.$api.getTableData()

tableData.value = data.tableData

}

const getCountData = async () => {

const data = await proxy.$api.getCountData()

countData.value = data

}

const xOptions = reactive({

// 图例文字颜色

textStyle: {

color: "#333",

},

legend: {},

grid: {

left: "20%",

},

// 提示框

tooltip: {

trigger: "axis",

},

xAxis: {

type: "category", // 类目轴

data: [],

axisLine: {

lineStyle: {

color: "#17b3a3",

},

},

axisLabel: {

interval: 0,

color: "#333",

},

},

yAxis: [

{

type: "value",

axisLine: {

lineStyle: {

color: "#17b3a3",

},

},

},

],

color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],

series: [],

})

  

const pieOptions = reactive({

tooltip: {

trigger: "item",

},

legend: {},

color: [

"#0f78f4",

"#dd536b",

"#9462e5",

"#a6a6a6",

"#e1bb22",

"#39c362",

"#3ed1cf",

],

series: []

})

  

const getChartData = async () => {

const {orderData,userData,videoData}= await proxy.$api.getChartData()

xOptions.xAxis.data = orderData.date;

xOptions.series = Object.keys(orderData.data[0]).map(val=>({

name:val,

data:orderData.data.map(item => item[val]),

type:'line'

}))

const oneEchart = echarts.init(proxy.$refs['echart'])

oneEchart.setOption(xOptions)

xOptions.xAxis.data = userData.map(item => item.date)

xOptions.series=[

{

name:'新增用户',

data:userData.map(item=>item.new),

type:'bar'

},

{

name:'活跃用户',

data:userData.map(item=>item.active),

type:'bar'

}

]

const twoEchart = echarts.init(proxy.$refs['userEchart'])

twoEchart.setOption(xOptions)

  

pieOptions.series = [

{

data:videoData,

type:'pie',

}

]

const threeEchart = echarts.init(proxy.$refs['videoEchart'])

threeEchart.setOption(pieOptions)

//监听页面的变化

observer.value = new ResizeObserver(() => {

oneEchart.resize()

twoEchart.resize()

threeEchart.resize()

})

if(proxy.$refs['echart']){

observer.value.observe(proxy.$refs["echart"])

}

}

onMounted(() => {

getTableData()

getCountData()

getChartData()

})

</script>

  

<style lang="scss" scoped>

.home{

height:150vh;

overflow:hidden;

.user{

display:flex;

align-items:center;

border-bottom:1px solid #ccc;

margin-bottom:20px;

img{

width:150px;

height:150px;

border-radius: 50%;

margin-right: 40px;

}

.user-info{

p{

line-height:40px;

}

.user-info-p{

color:#999;

}

.user-info-admin{

font-size:35px;

}

}

}

.login_info{

p{

line-height:30px;

font-size:14px;

color:#990;

}

span{

color:#666;

margin-left:60px;

}

}

.user-table{

margin-top:20px;

}

.num {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

.el-card {

width: 32%;

margin-bottom: 20px;

}

.icons {

width: 80px;

height: 80px;

font-size: 30px;

text-align: center;

line-height: 80px;

color: #fff;

}

.detail {

margin-left: 15px;

display: flex;

flex-direction: column;

justify-content: center;

.num {

font-size: 30px;

margin-bottom: 10px;

}

.txt {

font-size: 14px;

text-align: center;

color: #999;

}

}

}

.graph {

margin-top: 20px;

display: flex;

justify-content: space-between;

.el-card {

width: 48%;

height: 260px;

}

}

}

</style>

没有后端 我们用mock来模拟网络请求 使用axios来处理网络请求

pnpm i axios
pnpm i mockjs

创建api文件夹 创建request.js 文件 二次封装下axios

import axios from"axios";import config from'../config/index'const service = axios.create({baseURL:config.baseApi,});constNETWORK_ERROR='网络错误...'

service.interceptors.request.use((config)=>{return config

},(error)=>{return Promise.reject(error)})

  

service.interceptors.response.use((res)=>{const{code,data,msg}= res.data

if(code===200){return data

}else{return Promise.reject(msg ||NETWORK_ERROR)}})functionrequest(options){// console.log(config.env)

options.method = options.method ||"get"if(options.method.toLowerCase()==="get"){

options.params = options.data

}//对mock的开关做一个处理let isMock = config.mock

if(config.env !=="undefined"){

isMock = config.env

}//针对环境作处理if(config.env ==="prod"){

service.defaults.baseURL = config.baseAPi;}else{// console.log('isMock',isMock)

service.defaults.baseURL = isMock ? config.mockApi : config.baseApi;}returnservice(options)}exportdefault request

在api文件下创建api.js

import request from'./request.js'exportdefault{getTableData(){returnrequest({url:"/home/getTable",method:'get',})},getCountData(){returnrequest({url:"/home/getCountData",method:'get',})},getChartData(){returnrequest({url:"/home/getChartData",method:'get',})},}

使用mock模拟请求 在api文件下创建mockData下创建home.js 并在api目录下创建mock.js作为出口

//mock.jsimport Mock from"mockjs"import homeApi from"./mockData/home.js"
Mock.mock(/api\/home\/getTableData/,"get",homeApi.getTableData)

Mock.mock(/api\/home\/getCountData/,"get",homeApi.getCountData)

Mock.mock(/api\/home\/getChartData/,"get",homeApi.getChartData)// mockData/home.jsexportdefault{getTableData:()=>{return{code:200,data:{tableData:[{name:"oppo",todayBuy:500,monthBuy:3500,totalBuy:22000,},{name:"vivo",todayBuy:300,monthBuy:2200,totalBuy:24000,},{name:"苹果",todayBuy:800,monthBuy:4500,totalBuy:65000,},{name:"小米",todayBuy:1200,monthBuy:6500,totalBuy:45000,},{name:"三星",todayBuy:300,monthBuy:2000,totalBuy:34000,},{name:"魅族",todayBuy:350,monthBuy:3000,totalBuy:22000,},],},}},getCountData:()=>{return{code:200,data:[{name:"今日支付订单",value:1234,icon:"SuccessFilled",color:"#2ec7c9",},{name:"今日收藏订单",value:210,icon:"StarFilled",color:"#ffb980",},{name:"今日未支付订单",value:1234,icon:"GoodsFilled",color:"#5ab1ef",},{name:"本月支付订单",value:1234,icon:"SuccessFilled",color:"#2ec7c9",},{name:"本月收藏订单",value:210,icon:"StarFilled",color:"#ffb980",},{name:"本月未支付订单",value:1234,icon:"GoodsFilled",color:"#5ab1ef",},],};},getChartData:()=>{return{code:200,data:{orderData:{date:["2019-10-01","2019-10-02","2019-10-03","2019-10-04","2019-10-05","2019-10-06","2019-10-07",],data:[{苹果:3839,小米:1423,华为:4965,oppo:3334,vivo:2820,一加:4751,},{苹果:3560,小米:2099,华为:3192,oppo:4210,vivo:1283,一加:1613,},{苹果:1864,小米:4598,华为:4202,oppo:4377,vivo:4123,一加:4750,},{苹果:2634,小米:1458,华为:4155,oppo:2847,vivo:2551,一加:1733,},{苹果:3622,小米:3990,华为:2860,oppo:3870,vivo:1852,一加:1712,},{苹果:2004,小米:1864,华为:1395,oppo:1315,vivo:4051,一加:2293,},{苹果:3797,小米:3936,华为:3642,oppo:4408,vivo:3374,一加:3874,},],},videoData:[{name:"小米",value:2999},{name:"苹果",value:5999},{name:"vivo",value:1500},{name:"oppo",value:1999},{name:"魅族",value:2200},{name:"三星",value:4500},],userData:[{date:"周一",new:5,active:200},{date:"周二",new:10,active:500},{date:"周三",new:12,active:550},{date:"周四",new:60,active:800},{date:"周五",new:65,active:550},{date:"周六",new:53,active:770},{date:"周日",new:33,active:170},],},};}}

最终效果

如果对你有所帮助就点个关注吧

本文是这篇文章的笔记
https://www.bilibili.com/video/BV1LS421d7cY?p=5&vd_source=e73709c9a1618b4c6dfd58c6c40d8986