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-menu
        default-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>

核心功能说明：

1. 知乎蓝色主题：

   • 主色调使用知乎蓝 #0084FF（RGB: 0,132,255）
   • 左侧菜单栏采用深蓝底色 #001529 增强层次感

2. 三个菜单项：

   • 首页（带🏠图标）
   • 发现（带🧭图标）
   • 个人中心（带👤图标）
   • 点击菜单右侧显示对应内容

3. 视觉设计特点：

   • 激活菜单项使用半透明蓝底色 rgba(0,132,255,0.25)
   • 悬停效果使用浅蓝过渡 rgba(0,132,255,0.15)
   • 内容区采用浅灰蓝背景 #f6f9fb 降低视觉疲劳
   • 白色内容卡片+微阴影提升层次感

4. 布局结构：

   • 经典左右布局（左侧固定200px菜单）
   • 顶部标题栏与菜单同色系保持视觉统一
   • 响应式设计（高度100vh适应屏幕）

使用说明：

1. 需要安装 Element Plus：

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

2. 在 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-menu
        default-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>

运行效果

运行以下命令，可以编译生成，并执行开发版本。

npm install
npm run dev

总结

使用AI，为我们开发代码提供了很大的方便，特别是我这种没啥美感的直男，有AI的帮助，可以写出一些不错的前端页面，当然在使用的过程中也是有各种纰缪，需要在实践的过程中注意避坑，感谢这个美好的时代，让很多东西变得更加便利。