前端体系化快速进阶

面向已经入门 HTML + CSS + JS + Vue 的同学，用最快的时间搞懂前端工程化生态。

定位：把入门时那些”照着敲的命令”（npm install、npm run dev、import ...）彻底讲明白，做到知其然也知其所以然。

教程目录

章节	文件	内容
第一章	第一章-Node.js.md	Node.js — 让 JS 跳出浏览器
第二章	第二章-nvm.md	nvm — 管理 Node 版本
第三章	第三章-npm与包管理.md	npm — 看懂依赖从哪来
第四章	第四章-模块化.md	模块化 — import / export
第五章	第五章-Vite.md	Vite — 现代前端构建工具
第六章	第六章-手搭Vue-Demo.md	用 Vite 从零搭一个 Vue Demo
第七章	第七章-Vue-Router.md	Vue Router — 页面路由
第八章	第八章-Pinia.md	Pinia — 状态管理
第九章	第九章-Axios.md	Axios — 网络请求
第十章	第十章-组件库.md	组件库 — 别再手搓 UI 了

学习链路：Node（能跑 JS）→ nvm（管版本）→ npm（装依赖）
        → 模块化（拼项目）→ Vite（翻译+打包）→ Vue Demo（跑起来）
        → Router / Pinia / Axios / 组件库（实用生态）

以下是各章节大纲概览：

第一章：Node.js — 让 JS 跳出浏览器

1.1 一个疑问：JS 不是只能在浏览器里跑吗？

入门时写的 JS 都靠浏览器执行
但 npm、vite 这些命令是在终端里跑的，浏览器根本没打开
答案：因为有了 Node.js

1.2 Node.js 到底是什么

一句话：把浏览器里的 JS 引擎（V8）搬到了电脑上，让 JS 能脱离浏览器直接运行
一个类比：浏览器是”给用户看网页的 JS”，Node 是”给开发者干活的 JS”

1.3 前端为什么离不开 Node

跑构建工具（Vite / Webpack）
起本地开发服务器（npm run dev）
装第三方库（npm）
结论：Node 是现代前端的”发动机”，不写后端也必须装

1.4 安装与验证

先了解，下一章用 nvm 正式安装
node -v / npm -v 验证

1.5 小结

第二章：nvm — 管理 Node 版本

2.1 为什么不直接去官网装

不同项目要求不同 Node 版本，装一个固定版本会”打架”
nvm = Node Version Manager，一台电脑装多个版本随时切

2.2 安装 nvm

Windows 用 nvm-windows（附下载地址）
macOS / Linux 用官方 nvm 脚本
装完验证：nvm version

2.3 三条核心命令

nvm install lts — 安装长期支持版
nvm use <版本号> — 切换版本
nvm list — 查看已安装的版本

2.4 推荐做法

日常开发装 LTS（长期支持版）最稳
切换后用 node -v 确认

2.5 小结

第三章：npm — 看懂依赖从哪来

3.1 npm 是什么

Node 自带的”应用商店”（包管理器）
全世界开发者把写好的代码打包放上去，你一条命令就能装

3.2 package.json 逐行拆解

项目的”身份证 + 说明书”
name / version / scripts / dependencies / devDependencies
dependencies（上线也要用） vs devDependencies（只在开发时用）

3.3 node_modules 和 package-lock.json

node_modules：真正下载下来的代码，体积巨大，不用管、不上传
package-lock.json：锁定版本，保证团队装的完全一致

3.4 常用命令

npm install — 按 package.json 装齐所有依赖
npm install axios — 装一个新包
npm run dev — 运行 scripts 里定义的命令

3.5 npm / pnpm / yarn

都是同类工具，pnpm 更省空间更快，了解即可

3.6 小结

第四章：模块化 — import / export

4.1 为什么需要模块化

一个文件写几千行 = 灾难，改不动也没法复用
模块化：把代码拆成一个个小文件，各管各的，用到再拼

4.2 export 导出

命名导出：export const add = ...
默认导出：export default ...

4.3 import 导入

对应两种导出方式的导入写法
导入第三方包：import { ref } from 'vue'

4.4 回头看 .vue 文件

原来入门时写的 import { ref } from 'vue' 就是这么来的
对比入门时的 <script src="">，理解进化在哪

4.5 小结

第五章：Vite — 现代前端构建工具

5.1 一个痛点：浏览器看不懂 .vue

浏览器只认 HTML / CSS / JS，不认 .vue、不认某些新语法
需要有个工具在中间”翻译”

5.2 Vite 的两个身份

开发时：一个超快的本地开发服务器（npm run dev）
上线时：一个打包工具，把项目压缩优化成浏览器能跑的文件（npm run build）

5.3 Vite 为什么快

按需编译：你看哪个页面才编译哪个
和老工具 Webpack 的区别（一句话带过）
热更新（HMR）：改代码浏览器秒变，不用刷新

5.4 dev 和 build 分别在干嘛

npm run dev：开发用，边写边看
npm run build：生成 dist/ 文件夹，交给服务器部署

5.5 小结

第六章：用 Vite 从零搭一个 Vue Demo

6.1 创建项目

npm create vite@latest my-demo
选 Vue、选 JavaScript
cd 进去 → npm install → npm run dev

6.2 目录结构讲解

index.html — 唯一入口 HTML
src/main.js — 程序总开关（挂载 App）
src/App.vue — 根组件
vite.config.js — Vite 的配置文件
package.json — 依赖和脚本

6.3 把它们串起来

index.html 里有个 <div id="app">
main.js 把 App.vue 挂到这个 div 上
一条清晰的启动链路

6.4 动手改一改

改 App.vue 里一行文字，看浏览器热更新秒变
加一个 ref 计数器，回顾响应式

6.5 小结

第七章：Vue Router — 页面路由

7.1 一个痛点：单页应用怎么”切页面”

SPA（单页应用）整个网站只有一个 index.html
怎么实现点菜单切换”首页 / 关于 / 聊天页”？靠路由

7.2 路由是什么

一张”URL 路径 ↔ 组件”的对应表
/ 显示首页组件，/chat 显示聊天组件

7.3 三步用起来

安装：npm install vue-router
配置 routes 表
在页面放 <router-view> 占位

const routes = [
  { path: '/', component: Home },
  { path: '/chat', component: Chat }
]

7.4 页面跳转的两种方式

标签跳：<router-link to="/chat">
代码跳：router.push('/chat')

7.5 小结

第八章：Pinia — 状态管理

8.1 一个痛点：数据在组件间传得太累

登录状态、用户信息很多组件都要用
靠 props 一层层往下传，非常痛苦（举例说明）

8.2 Pinia 是什么

一句话：一个全局的”数据仓库”，任何组件都能直接取、直接改

8.3 核心三件套

state：存数据
getters：基于数据的计算（类似计算属性）
actions：修改数据的方法

8.4 一个最小示例

定义一个 store（如用户信息 / 计数器）
在两个不同组件里读同一份数据

8.5 什么时候才需要它

小项目可以不用，数据一多、跨组件共享多了再上
不要为了用而用

8.6 小结

第九章：Axios — 网络请求

9.1 回顾入门用的 fetch

入门时用 fetch 取数据，能用但有点糙

9.2 Axios 好在哪

自动把响应转成 JSON（不用手动 .json()）
报错更友好、能设超时
有”拦截器”，能统一处理请求和响应

9.3 基础用法

axios.get(url) / axios.post(url, data)
配合 async / await

9.4 实用技巧

统一配置 baseURL，接口地址不用每次写全
用拦截器统一加 token / 统一处理错误

9.5 结合 Vue

在 onMounted 里请求数据，填充页面

9.6 小结

第十章：组件库 — 别再手搓 UI 了

10.1 组件库是干嘛的

一套现成的、好看又好用的 UI 零件：按钮、弹窗、表格、日期选择器、消息提示……
拿来即用，不用自己写样式和交互逻辑

10.2 为什么要用

省时间：一行代码一个精致组件
样式统一：整个项目风格一致
细节到位：键盘操作、无障碍、各种边界情况都帮你处理好了

10.3 手写 vs 组件库（示意）

<!-- 手写一个按钮：还得自己写一堆 CSS -->
<button class="my-btn">提交</button>

<!-- 用组件库（Element Plus）：一行搞定，自带样式和交互 -->
<el-button type="primary">提交</el-button>

10.4 主流选择

Element Plus — 生态成熟，后台管理系统首选
Ant Design Vue — 企业级，设计规范完善
Naive One / Naive UI — 轻量、好看、TS 友好
每个一句话特点，选一个用即可

10.5 三步用起来

安装：npm install element-plus
main.js 里注册
模板里直接用 <el-xxx>

10.6 小结

附录：进阶学习建议

学完这套你会了什么

看得懂任何 Vue 项目的目录结构和启动流程
能独立从零搭建并运行一个工程化的 Vue 项目
理解前端生态各个工具”解决什么问题”

继续深入的方向（选学）

方向	关键词
语言增强	TypeScript
样式方案	Tailwind CSS / Sass
代码规范	ESLint / Prettier
服务端渲染	Nuxt
部署上线	Nginx / Vercel

学习建议

每章都动手跑一遍，光看不练等于没学
善用 AI，命令报错、概念不懂直接问
够用就好，这套内容足够支撑 AI 应用的前端开发
官方文档是最好的老师：Vite（cn.vitejs.dev）、Vue Router / Pinia（官方中文站）

本教程是「零基础前端入门」的进阶篇，目标是快速打通前端工程化生态，为 AI 应用开发扫清工具链障碍。