AI大模型带我学前端：零基础入门必备提示词合集

在AI大模型的助力下，前端学习变得更高效、更智能。本文专为零基础学习者整理了一份实用提示词合集，涵盖HTML、CSS、JavaScript、Vue等基础知识，帮助你通过AI快速理解前端逻辑、生成代码模板，提升学习效率，轻松迈入前端开发大门。

1. 第一阶段：HTML基础

我是一名具备基本编程能力的开发者，正在学习HTML基础。请作为我的前端导师，帮我系统学习HTML知识。

学习需求：
1. 详细讲解HTML文档的基本结构，包括DOCTYPE、html、head、body等标签的作用
2. 介绍常用的语义化标签（header、nav、main、section、article、aside、footer）及其使用场景
3. 讲解表单相关标签（form、input、select、textarea等）及其属性
4. 说明如何正确使用图片、音频、视频等多媒体标签
5. 介绍HTML5的新特性和API

请通过实际代码示例来说明每个知识点，并给出最佳实践建议。最后请提供一个综合练习项目，让我能够实践所学知识。

2. 第二阶段：CSS基础与布局

我已经掌握了HTML基础，现在要学习CSS样式和布局。请系统地教我CSS知识。

学习需求：
1. 详细讲解CSS选择器（基础选择器、组合选择器、伪类、伪元素）及优先级计算
2. 深入解释盒模型（content、padding、border、margin）和box-sizing
3. 讲解定位方式（static、relative、absolute、fixed、sticky）的区别和应用场景
4. 详细介绍Flexbox布局，包括容器属性和项目属性
5. 讲解Grid布局系统，包括网格容器和网格项目的属性
6. 说明如何实现响应式设计（媒体查询、相对单位、弹性图片）
7. 介绍CSS3的动画（transition、animation、transform）

请为每个知识点提供实际案例，并设计一个响应式网页布局练习，包含导航栏、侧边栏和内容区域。

3. 第三阶段：JavaScript基础

我已经掌握了HTML和CSS，现在要学习JavaScript编程。请帮我系统学习JavaScript基础知识。

学习需求：
1. 讲解JavaScript的变量声明（var、let、const）和数据类型（原始类型和引用类型）
2. 详细说明控制流语句（if、switch、for、while）和函数（声明式、表达式、箭头函数）
3. 深入讲解对象和数组的操作方法，包括常用的数组方法（map、filter、reduce等）
4. 讲解DOM操作，包括元素选择、创建、修改和删除
5. 详细介绍事件处理机制，包括事件监听、事件对象、事件冒泡和委托

请通过实际代码示例说明每个概念，并设计一个包含用户交互的小项目（如待办事项列表），让我练习所学知识。

4. 第四阶段：JavaScript进阶

我已经掌握了JavaScript基础，现在要深入学习JavaScript高级特性。请帮我理解JavaScript的核心概念。

学习需求：
1. 深入讲解作用域（全局、函数、块级）、作用域链和闭包的原理与应用
2. 详细解释原型链、继承机制和class语法
3. 讲解异步编程，包括回调函数、Promise、async/await的使用和原理
4. 介绍ES6+的重要特性：解构赋值、模板字符串、默认参数、扩展运算符等
5. 讲解模块化系统（CommonJS、ES Modules）的使用和区别

请通过代码示例和图解帮助我理解这些抽象概念，并设计一个使用这些高级特性的实战项目。

5. 第五阶段：前端工程化基础

我已经掌握了JavaScript，现在要学习前端工程化相关知识。请教我如何搭建现代化的前端开发环境。

学习需求：
1. 介绍Node.js的基本概念和npm包管理器的使用（安装、发布、版本管理）
2. 讲解构建工具的作用，重点介绍Webpack或Vite的基本配置和使用
3. 详细说明Git版本控制的基本操作和工作流程
4. 介绍ESLint、Prettier等代码规范工具的配置和使用
5. 讲解Chrome DevTools的调试技巧

请提供具体的配置示例，并指导我搭建一个包含热更新、代码规范检查的前端项目脚手架。

6. 第六阶段：Vue.js基础

我已经具备了扎实的前端基础，现在要学习Vue.js框架。请系统地教我Vue 3的核心概念。

学习需求：
1. 详细讲解Vue实例的创建、选项API和生命周期钩子
2. 介绍Vue模板语法，包括插值、指令（v-if、v-for、v-model等）的使用
3. 深入讲解计算属性（computed）和侦听器（watch）的区别和应用场景
4. 讲解组件的定义、注册、props传递和自定义事件
5. 说明事件处理和表单输入绑定的最佳实践

请通过实际代码示例演示每个概念，并指导我创建一个包含多个组件交互的Vue应用（如购物车功能）。

7. 第七阶段：Vue.js进阶

我已经掌握了Vue基础，现在要深入学习Vue的高级特性和生态系统。请帮我掌握Vue的进阶知识。

学习需求：
1. 详细讲解Vue 3的组合式API（setup、ref、reactive、computed、watch等）
2. 深入解释Vue的响应式原理（Proxy、依赖收集、触发更新）
3. 讲解Vue Router的配置和使用，包括动态路由、导航守卫、路由懒加载
4. 介绍Pinia状态管理的核心概念和最佳实践
5. 讲解Vue应用的性能优化技巧（组件懒加载、虚拟列表、缓存策略）

请提供完整的代码示例，并指导我开发一个包含路由、状态管理的中型Vue应用（如博客系统或管理后台）。

8. 第八阶段：Vue项目实战

我已经系统学习了Vue框架，现在要通过实战项目巩固知识。请指导我完成一个完整的Vue项目。

项目需求：
1. 帮我设计一个电商网站的前端架构，包括目录结构、路由规划、状态管理方案
2. 指导我实现以下核心功能：
   - 用户认证（登录、注册、权限控制）
   - 商品列表（分页、筛选、搜索）
   - 购物车功能（增删改查、本地存储）
   - 订单管理（创建订单、订单列表）
3. 讲解如何与后端API进行集成（axios封装、请求拦截、错误处理）
4. 介绍单元测试和E2E测试的基本方法
5. 指导项目的构建优化和部署流程

请提供详细的实现步骤和代码示例，帮助我完成这个项目的开发。