Codex怎么给Vue项目添加新页面

风丽同学_2553

风丽同学_2553

2026-10-18

294人浏览

原创

codex cli可快速生成vue页面,自动创建文件、配置路由和菜单;需先安装/升级cli,执行codex page命令指定页面名、类型和api路径,生成结构化代码并按规范格式化。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

codex怎么给vue项目添加新页面

在现有Vue项目中用Codex工具链快速添加新页面,避免手动创建文件、配置路由、更新菜单等重复劳动,尤其适合中大型团队统一页面结构规范的场景。

确认Codex CLI已全局安装并可用

打开终端,执行 codex --version。若提示“command not found”,需先运行 npm install -g @codex/cli 安装;若版本低于 3.2.0,请升级到最新稳定版,旧版本不支持 page 子命令。

这一步必须完成,否则后续所有命令都会报错退出。

在项目根目录执行页面生成命令

进入你的Vue项目根目录(确保当前路径下有 package.json 和 src/),运行:

codex page user-profile --type=table --api=/api/users

其中 user-profile 是页面唯一标识名,将自动创建 src/views/user-profile/ 目录及全套文件;--type=table 指定使用预置的「带列表+增删改查」模板;--api 参数会注入对应请求路径到组件逻辑中。

【注意:页面名不能含大写字母或特殊符号,只允许小写字母、数字和短横线】

检查自动生成的文件结构

命令执行后,Codex会在 src/views/user-profile/ 下生成:

  • index.vue —— 主页面组件,含 Element Plus 表格 + 工具栏
  • api.js —— 封装了 getUsers、deleteUser 等方法,基于 axios
  • router.js —— 导出该页面的路由配置对象,含 path、name、meta 权限字段

这些文件全部按项目已有的 ESLint/Prettier 规则格式化,无需人工调整缩进或分号。

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Codex 应用程序简介
Codex 应用程序简介

共0课时 | 167人学习

Codex官方文档
Codex官方文档

共0课时 | 0人学习

uni-app快速上手
uni-app快速上手

共0课时 | 0人学习