vue3-001新建项目

这门课解决什么问题

很多开发者在拿到npm create vite@latest的空白提示后，面对一堆未配置的工程选项，往往不知道从何下手，最终只能沿用默认结构，导致后续维护时缺乏统一的规范约束。这门课聚焦于 Vue 3 工程化的“骨架搭建”，解决的是从“能跑页面”到“能规范开发、高效排错”之间的工具链断层问题，让开发者直接获得一套具备 ESLint 代码规范检查和 Vue DevTools 调试支撑的前端工程基础。

适合什么基础

具备前端基础概念，了解 Vue 3 核心 API 与响应式原理，但尚未建立工程化意识与工具链配置经验的开发者。不需要会写复杂的业务逻辑，但需要能看懂控制台报错信息并理解基本的状态流转。

建议先看哪几块

• 项目脚手架与初始化：用命令生成项目结构，理解 Vite 的工作机制与目录约定。
• 代码规范与工具链配置：安装 ESLint、配置规则、接入vite-plugin-eslint，让工具在开发阶段自动拦截不符合规范的代码。
• 调试与可观测性：安装浏览器插件 Vue DevTools，掌握如何追踪响应式数据与组件层级。

学完能独立做什么

能独立完成一个具备基础响应式组件的 Vue 3 项目，在开发过程中遵循 ESLint 规则避免低级语法错误，并利用 DevTools 快速定位数据与渲染异常，将“配置”与“运行”串成一条可复用的工程链路。

资料怎么配合练习

不要停留在“看”的层面，必须跟着资料跑命令。生成项目后，按步骤执行 ESLint 安装与配置，自己写几行代码触发规范报错并修复，同时在浏览器中打开 DevTools 观察数据流向，把“配置工具链”和“用工具链排错”这两件事在真实代码中结合起来验证。