上一篇DeepSeek一键生成后端CRUD！展示了如何用ds生成后端restful api接口，感觉还不能更好地展示数据，这篇准备展示如何用ds生成vue3代码

安装vue3环境

由于我不是前端程序员，所以电脑上没有vue3环境，所以先要安装vue3

询问ds “如何构建vue3 环境”，它推荐我了三种方法，我选用了第一种使用vite创建vue3项目

1. 安装nodejs。（这个我已经安装，跳过。没有安装地话，可以参考官网https://nodejs.org/）

2. 使用npm创建项目

npm create vite@latest my-vue-app -- --template vue

3. 进入项目目录并安装依赖

cd my-vue-app

npm install

4. 启动开发服务器

npm run dev

生成vue3代码

我再次把上一篇生成的controller代码和已有的建表语句再次告诉ds，让它帮我生成相关的vue3代码。ds给我生成下面四部分代码

1. 创建员工管理页面组件

ds让我在 src/views 目录下创建 EmployeeView.vue 文件。由于这段代码太长，我无法贴出来

2. 配置路由

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

const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
// 其他路由...
{
path: '/employees',
name: 'employees',
component: EmployeeView
}
]
})
export default router

3. 安装必要依赖

运行以下命令安装 axios 、Bootstrap（用于样式）和vue-router@4：

npm install axios vue-router@4 bootstrap @popperjs/core

然后在 src/main.js 中导入 Bootstrap：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

const app = createApp(App)
app.use(router)
app.mount('#app')

4. 添加导航链接

在 App.vue 或您的导航组件中添加指向员工管理页面的链接：

<router-link to="/employees" class="nav-link">员工管理</router-link>

注意事项

ds提醒我要确保后端spring boot要正在运行，并允许CORS 配置允许前端访问。所以我又在后端的controller类头上添加@CrossOrigin(origins = "http://localhost:5173")

启动并测试代码

到指定目录下执行npm run dev命令启动了这个vue3工程。打开浏览器输入
http://localhost:5173/employees, 就可以看到刚才生成的页面

经过测试基本的crud还是没问题，但是有些细节还是有bug的。这也证明目前来看AI还替代不了程序员。

总结

这一篇展示了如何在上一篇生成后端代码的基础上，生成了简单的前端vue3代码。我本人并不是前端程序员，但是在ds的帮助下，也可以快速入门。这也表示可以利用ds快速生成原型代码，在深度讨论需求的时候，数据有了一个直观的展示。