vue3+elementPlus搭建后台首页

好的，下面我为你介绍一下如何使用 Vue3 和 Element Plus 搭建后台首页。

首先，你需要安装 Vue3 和 Element Plus。你可以在终端中使用以下命令安装：

npm install vue@next
npm install element-plus

接下来，我们可以新建一个 Vue 项目，并在 main.js 中引入 Element Plus：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

createApp(App).use(ElementPlus).mount('#app')

然后，我们可以在 App.vue 中编写 HTML 和 CSS 代码，来构建我们的后台首页。这里只提供一个简单的示例，你可以根据自己的需求进行修改。

<template>
  <div class="container">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">首页</el-menu-item>
      <el-submenu index="2">
        <template #title>产品管理</template>
        <el-menu-item index="2-1">产品列表</el-menu-item>
        <el-menu-item index="2-2">添加产品</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">用户管理</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>
    </el-menu>
    <div class="main">
      <h2>{{ title }}</h2>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      activeIndex: '1',
      title: '首页'
    }
  },
  methods: {
    handleSelect(index) {
      switch (index) {
        case '1':
          this.title = '首页';
          break;
        case '2-1':
          this.title = '产品列表';
          break;
        case '2-2':
          this.title = '添加产品';
          break;
        case '3':
          this.title = '用户管理';
          break;
        case '4':
          this.title = '订单管理';
          break;
        default:
          this.title = '首页';
          break;
      }
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.el-menu-demo {
  margin-bottom: 20px;
}

.main {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
  background-color: #f5f5f5;
}
</style>

以上代码中，我们使用了 Element Plus 中的 el-menu 组件来创建导航菜单，并使用 el-submenu 来创建子菜单。在 main 中，我们使用了 router-view 来动态渲染不同的页面。

最后，你还需要在 main.js 中引入路由和页面组件，并配置路由。这里只提供一个简单的示例，你可以根据自己的需求进行修改。

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import ProductList from './views/ProductList.vue'
import AddProduct from './views/AddProduct.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/product/list',
    name: 'ProductList',
    component: ProductList
  },
  {
    path: '/product/add',
    name: 'AddProduct',
    component: AddProduct
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

这样，一个简单的后台首页就完成了。你可以根据自己的需求对其进行进一步的美化和扩展。