先明确一个前提：使用问小白生成 Vue 项目页面代码，本地环境必须提前装好 Node.js（版本不低于 16.0.0）和 Vue CLI。这两个条件缺一不可，否则后续操作会卡在第一步。验证方法很简单，在终端里输入两行命令即可确认。

整个流程分为三步：环境确认、项目创建、调用问小白生成页面。下面逐步拆解，每个环节都有容易踩坑的地方，值得仔细留意。

确认环境是否满足前提条件

打开终端，依次运行 node -v 和 npm -v，确认输出的版本号分别高于 16.0.0 和 8.0.0。如果尚未安装 Vue CLI，执行 npm install -g @vue/cli 安装全局命令。这一步千万别跳过，【缺少 Vue CLI 会导致后续 create 命令无法识别】，很多新手都在这里卡住。

创建空白 Vue 项目

在目标目录下执行：vue create my-vue-app → 按方向键选择“Manually select features” → 按空格键勾选 TypeScript、Router、Pinia、ESLint → 回车确认 → 选择 TS 语法风格（例如 Class-style） → 选择 ESLint 配置（例如 Standard） → 选择 lint-on-save → 选择是否将配置存放为单独文件 → 输入项目名。等待依赖安装完成，终端出现“? Successfully created project”提示即表示项目初始化成功。

接入问小白生成页面

有两种方式可以调用问小白的能力，选一种顺手的方式即可。

方法一：使用问小白 VS Code 插件

在 VS Code 中安装“Wen XiaoBai”官方插件 → 打开刚创建的项目 → 在 src/views 目录上右键 → 选择“Generate Vue Page with Wen XiaoBai” → 输入描述，例如：“一个带搜索框的商品列表页，点击商品跳转详情，底部有分页器” → 等待生成完成，新页面会自动出现在 views 目录下，包含 .vue 文件及配套的路由注册代码。

方法二：调用命令行工具

进入项目根目录，运行 npx wenxiaobai@latest generate --prompt "用户登录表单，含邮箱、密码、记住我复选框和提交按钮" → 工具将自动生成 Login.vue 并放入 src/views → 同时更新 router/index.ts，添加对应的路由路径。注意：首次运行会自动下载模型缓存，耗时约 20 秒，期间不要关闭终端。

验证生成结果

第一步：检查 src/views 下是否出现新的 .vue 文件，打开确认结构包含