需先安装node.js（≥16.0.0）和vue cli（npm install -g @vue/cli），再用vue create创建项目并选typescript、router等特性，最后通过vs code插件或npx wenxiaobai命令输入自然语言生成vue 3 composition api页面代码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用问小白生成Vue项目页面代码，需要先确保本地已安装Node.js和Vue CLI，再通过命令行创建项目并调用问小白插件或API接口输入自然语言描述，让工具自动输出符合Vue 3 Composition API规范的页面代码文件。
确认环境是否满足前提条件
打开终端，运行 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文件，打开确认结构含<script setup><style scoped>三块。</script>
第二步：运行 npm run serve 启动开发服务器。
第三步：访问 http://localhost:8080/ 对应路由路径，观察页面渲染是否与描述一致；若样式错乱，检查生成代码中是否遗漏defineProps或useRouter调用——这是常见漏点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
