DeepSeek辅助写一个Vue3页面

文章目录

- 问题提出
- AI回答
- - 核心功能说明：
  - 使用说明：
- 需要补充的地方
- - Vue3项目创建
  - 代码错误
  - 一些小BUG
- 运行效果
- 总结

今天尝试用给DeepSeek提问，让它写一个前端，效果不错，虽然有一些小问题，但确实能节省不少工作。

问题提出

我是这样给它提问的：

Vue3 写一个左侧带三个菜单的页面，主色调使用类似知乎的蓝色。

AI回答

响应速度相当快：

下面是一个基于 Vue3 + Element Plus 的左侧三菜单页面实现，主色调采用知乎蓝色（RGB: #0084FF），代码可直接复制使用：

<template><el-container class="main-container"><!-- 左侧菜单栏 --><el-aside width="200px" class="sidebar"><el-menudefault-active="1"class="el-menu-vertical":background-color="zhihuBlue"text-color="#fff"active-text-color="#ffd04b"><!-- 三个菜单项 --><el-menu-item index="1"><el-icon><HomeFilled /></el-icon><span>首页</span></el-menu-item><el-menu-item index="2"><el-icon><Compass /></el-icon><span>发现</span></el-menu-item><el-menu-item index="3"><el-icon><User /></el-icon><span>个人中心</span></el-menu-item></el-menu></el-aside><!-- 右侧内容区 --><el-container><el-header class="header" :style="{ backgroundColor: zhihuBlue }"><span class="title">知乎风格管理系统</span></el-header><el-main class="content"><div v-if="activeIndex === '1'" class="page-content"><h2>首页概览</h2><p>欢迎使用知乎风格管理系统，这里展示系统概览信息...</p></div><div v-else-if="activeIndex === '2'" class="page-content"><h2>内容发现</h2><p>探索最新内容和推荐资源...</p></div><div v-else class="page-content"><h2>个人中心</h2><p>管理您的个人资料和账户设置...</p></div></el-main></el-container></el-container>
</template><script setup>
import { ref } from 'vue';
import { HomeFilled, Compass, User 
} from '@element-plus/icons-vue';// 知乎蓝色定义（RGB: 0,132,255）
const zhihuBlue = ref('#0084FF');
const activeIndex = ref('1'); // 默认激活首页
</script><style scoped>
.main-container {height: 100vh;
}.sidebar {background-color: #001529; /* 深蓝底色 */
}.el-menu-vertical {height: 100%;border-right: none;
}.header {display: flex;align-items: center;color: white;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}.title {font-size: 18px;font-weight: 600;
}.content {padding: 20px;background-color: #f6f9fb; /* 浅灰蓝背景 */
}.page-content {background: white;padding: 24px;border-radius: 4px;box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}/* 菜单项悬停效果 */
.el-menu-item:hover {background-color: rgba(0, 132, 255, 0.15) !important;
}/* 激活菜单项样式 */
.el-menu-item.is-active {background-color: rgba(0, 132, 255, 0.25) !important;
}
</style>

核心功能说明：

知乎蓝色主题：
- 主色调使用知乎蓝 #0084FF（RGB: 0,132,255）
- 左侧菜单栏采用深蓝底色 #001529 增强层次感
三个菜单项：
- 首页（带🏠图标）
- 发现（带🧭图标）
- 个人中心（带👤图标）
- 点击菜单右侧显示对应内容
视觉设计特点：
- 激活菜单项使用半透明蓝底色 rgba(0,132,255,0.25)
- 悬停效果使用浅蓝过渡 rgba(0,132,255,0.15)
- 内容区采用浅灰蓝背景 #f6f9fb 降低视觉疲劳
- 白色内容卡片+微阴影提升层次感
布局结构：
- 经典左右布局（左侧固定200px菜单）
- 顶部标题栏与菜单同色系保持视觉统一
- 响应式设计（高度100vh适应屏幕）

使用说明：

需要安装 Element Plus：

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

在 main.js 中引入：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'app.use(ElementPlus)

知乎蓝的色彩心理学：蓝色象征智慧与冷静，RGB(0,132,255) 中蓝色占比100%且不含红色干扰，符合知乎知识型平台定位。这种配色能提升用户专注度，适合管理系统使用。

需要补充的地方

Vue3项目创建

AI默认省略了这个过程，可执行如下代码实现：

npm create vue@latest

代码错误

main.js文件的写法还是不完整的，或者说，本身就不对，修正后如下：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

一些小BUG

比如说，AI列出了三个菜单，也给出了菜单的一些基础切换，但并不能实现切换功能，因为点击事件并没有响应，故：修改App.vue中对应的菜单点击代码：

    <!-- 左侧菜单栏 --><el-aside width="200px" class="sidebar"><el-menudefault-active="1"class="el-menu-vertical":background-color="zhihuBlue"text-color="#fff"active-text-color="#ffd04b"><!-- 三个菜单项 --><el-menu-item index="1" @click="activeIndex = '1'"><el-icon><HomeFilled /></el-icon><span>首页</span></el-menu-item><el-menu-item index="2" @click="activeIndex = '2'"><el-icon><Compass /></el-icon><span>发现</span></el-menu-item><el-menu-item index="3" @click="activeIndex = '3'"><el-icon><User /></el-icon><span>个人中心</span></el-menu-item></el-menu></el-aside>