上一篇零前端经验？我用DeepSeek自动生成Vue3代码，搞定CRUD页面！我利用ds生成了一个简单vue3页面，觉得有点单一。

所以这篇我尝试利用ds生成一个系统首页，里面包含我昨天生成的员工管理页面。

ds给我生成了6个操作步骤：

项目结构调整：

新的主页面布局App.vue

<template>
<div class="app-container">
<!-- 顶部导航栏 -->
<header class="app-header">
<div class="logo">Vue 管理系统</div>
<div class="user-info">
<span>管理员</span>
<el-avatar:size="32" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
</div>
</header>

<div class="main-container">
<!-- 侧边栏菜单 -->
<Sidebar />

<!-- 主内容区 -->
<main class="content">
<router-view />
</main>
</div>
</div>
</template>

<script setup>
import Sidebar from './components/Sidebar.vue'
</script>

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

.app-header {
height: 60px;
background-color: #2c3e50;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
font-size: 20px;
font-weight: bold;
}

.user-info {
display: flex;
align-items: center;
gap: 10px;
}

.main-container {
display: flex;
flex: 1;
overflow: hidden;
}

.content {
flex: 1;
padding: 20px;
overflow-y: auto;
background-color: #f5f7fa;
}
</style>

创建侧边栏组件 (components/Sidebar.vue)
<template>
<aside class="sidebar">
<el-menu
router
default-active="/dashboard"
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF"
class="sidebar-menu"
>
<el-menu-item index="/dashboard">
<el-icon><House /></el-icon>
<span>系统首页</span>
</el-menu-item>

<el-sub-menu index="1">
<template #title>
<el-icon><User /></el-icon>
<span>人员管理</span>
</template>
<el-menu-item index="/employees">员工管理</el-menu-item>
<el-menu-item index="/department">部门管理</el-menu-item>
</el-sub-menu>

<el-menu-item index="/settings">
<el-icon><Setting /></el-icon>
<span>系统设置</span>
</el-menu-item>
</el-menu>
</aside>
</template>

<script setup>
import {
House,
User,
Setting
} from '@element-plus/icons-vue'
</script>

<style scoped>
.sidebar {
width: 220px;
background-color: #304156;
height: 100%;
}

.sidebar-menu {
border-right: none;
height: 100%;
}
</style>

仪表盘页面 (views/Dashboard.vue)

这个页面只是ds建议我设置的静态页面，篇幅有限，就不展示了

更新路由配置 (router/index.js)

import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from '../views/Dashboard.vue'
import EmployeeView from '../views/EmployeeView.vue'

const routes = [
{
path: '/',
redirect: '/dashboard'
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard
},
{
path: '/employees',
name: 'Employees',
component: EmployeeView
}
]

const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})

export default router

安装 Element Plus 和图标库

在工程目录下，运行以下命令安装 Element Plus：

npm install element-plus @element-plus/icons-vue

然后在 main.js 中引入Element Plus

……
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
……
app.use(ElementPlus)

// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
……

运行项目

再次在工程目录下执行npm run dev后，就可以看到一个新的页面了ek