#Vue #Front-End

README · Vue

Vue

Vue 3 主线笔记。前置要求: 三件套、工具链和文件架构已读完。

技术基线

  • 主线: Vue 3、Composition API、<script setup>、Vite、Vue Router 4、Pinia
  • 兼容: Vue 2、Options API、Vuex (存量项目要读得懂)
  • 工程: TypeScript、组件封装、请求层、权限、表单、表格、测试

阅读顺序

代码块PLAINTEXT · 17 行收起展开
Node / npm 环境 (00)
    ↓
快速上手全景 (Vue3)
    ↓
写法演进史 (两种写法对比)
    ↓
响应式深入 (01)
    ↓
组件与数据流 (02)
    ↓
Router · 权限 (03)
    ↓
Pinia / Vuex (04)
    ↓
工程化 · 请求层 · CRUD (05)
    ↓
问题清单与项目表达 (06)

笔记

顺序笔记内容
0Node / NVM / npm装环境, Java 工具链对照, npm create 逐词拆解
1Vue3 快速上手全景速览: 项目、响应式、路由、Pinia 各到能跑通
2两种写法对比Options API 到 setup() 到 script setup 的演进
301 核心与响应式.value 的原因、computed/watch、生命周期、Proxy
402 组件设计与数据流组件边界、props/emits、插槽、provide/inject、useXxx
503 Router 与权限路由路由从零讲起、守卫、token 失效、动态权限
604 Pinia 与 Vuex状态归属判断、Setup Store、竞态、Vuex 迁移
705 工程化与请求层CRUD 链路、axios 拦截器、Element Plus 实战
806 问题清单与项目表达自检清单、故障复盘、项目表达模板
附常用工具库Lodash、Day.js、VueUse、ECharts 地图

应用结构

flowchart LR
    U[用户操作] --> C[组件]
    C --> S[状态]
    S --> R[响应式更新]
    R --> D[DOM]
    C --> RT[Router]
    C --> API[请求层]
    API --> BE[后端]

组件负责界面, Router 负责页面切换, Pinia 负责跨页面共享状态, 请求层负责和后端的协议。

目录约定

Vue 项目 src 目录约定

延伸阅读