【黑马JavaWeb+AI知识梳理】Web前端开发 - Vue3 / ElementPlus

好的！以下是你提供笔记的系统化整合与补充版复习资料 ，内容涵盖 Vue 核心概念、工程化实践、Element Plus 使用、开发流程、常见业务模块实现逻辑 ，并加入了面试高频问题及应答要点 ，便于你深入理解 + 快速复习 + 面试准备。

📚 Vue 全栈开发核心知识体系（含面试要点）

一、什么是 Vue？

官方定义 ：Vue 是一款用于构建用户界面的渐进式 JavaScript 框架 。

官网：https://cn.vuejs.org/

✅ 核心特点：

渐进式 ：你可以只用它的核心库（如 vue.js）做简单页面，也可以搭配路由（Vue Router）、状态管理（Pinia/Vuex）、构建工具（Vite）等组成完整 SPA。
响应式系统：数据变化自动更新视图。
组件化开发：将 UI 拆分为独立、可复用的组件。
虚拟 DOM：提升渲染性能。
轻量 & 易上手：API 设计简洁，学习曲线平缓。

💬 面试回答示例 ：

"Vue 是一个渐进式的前端框架，核心优势在于响应式数据绑定和组件化开发。它既可以用于小型项目快速开发，也能通过生态（如 Vue Router、Pinia、Vite）支撑大型单页应用。相比 React，Vue 的模板语法更贴近 HTML，对初学者更友好；相比 Angular，它更轻量、灵活。"

二、Vue 工程化开发

1. 为什么需要工程化？

小白开发	企业级开发
文件杂乱、全局变量	模块化、组件化
手动刷新看效果	热更新（HMR）
无规范、难协作	统一编码规范、Git 流程
手动打包部署	自动化构建（CI/CD）

2. 工程化四大支柱

模块化：按功能拆分 JS/CSS/资源。
组件化 ：.vue 单文件组件（SFC），封装逻辑+模板+样式。
规范化：ESLint、Prettier、Git Commit 规范。
自动化：Vite 构建、测试、部署。

3. 环境搭建（Vue 3 + Vite）

bash 复制代码

# 创建项目（使用官方脚手架 create-vue）
npm create vue@3.3.4

# 安装依赖
npm install

# 启动开发服务器
npm run dev

⚠️ Windows 常见报错解决 ：

若遇 无法加载 npm.ps1 错误 → 执行：
powershell 复制代码
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

4. 项目结构说明

复制代码

project/
├── src/
│   ├── assets/          # 静态资源（图片、字体）
│   ├── components/      # 通用组件
│   ├── views/           # 页面级组件（推荐新增）
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── public/              # 静态文件（不经过构建）
├── vite.config.js       # Vite 配置（代理、插件等）
└── package.json         # 依赖与脚本命令

💡 main.js 示例：

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

三、Vue API 风格对比

特性	选项式 API（Options API）	组合式 API（Composition API）
写法	`data`, `methods`, `mounted` 等选项	`ref`, `reactive`, `onMounted` 等函数
`this`	有，指向组件实例	无（避免 this 指向陷阱）
逻辑组织	按选项分散	按功能聚合（高内聚）
复用性	mixins（易冲突）	composables（函数复用，无命名冲突）
推荐	Vue 2 / 简单组件	Vue 3 官方推荐

✅ 组合式 API 核心要点：

<script setup> 是语法糖，自动处理 setup()。
ref() 创建响应式基本类型 → 读写需 .value。
reactive() 创建响应式对象 → 直接操作属性。
生命周期钩子：onMounted, onUnmounted 等。

💬 面试题 ：组合式 API 有什么优势？
答：

逻辑复用更清晰：可通过自定义 Hook（composable）复用跨组件逻辑，避免 mixins 的命名冲突和来源不明问题。

TypeScript 支持更好：函数式写法天然契合 TS 类型推导。

代码组织更灵活：相关逻辑集中在一起，而不是分散在 data/methods/computed 中。

四、Element Plus 快速上手

1. 什么是 Element Plus？

饿了么团队出品的 Vue 3 组件库。
提供丰富 UI 组件：表格、表单、对话框、分页、消息提示等。
官网：https://element-plus.org/zh-CN/

2. 安装与引入

bash 复制代码

npm install element-plus --save

全局引入（main.js）：

js 复制代码

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

✅ 按需引入（推荐生产环境） ：配合 unplugin-vue-components 插件自动导入。

3. 常用组件与场景

组件	用途	关键属性/方法
`el-table`	数据表格	`:data`, `v-for in columns`
`el-form`	表单	`:model`, `:rules`, `ref`
`el-dialog`	弹窗	`v-model` 控制显示
`el-pagination`	分页	`total`, `@size-change`, `@current-change`
`ElMessageBox`	确认框	`confirm()`, `alert()`

4. 表单校验实战

vue 复制代码

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-button @click="submit">提交</el-button>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({ name: '' })
const rules = ref({
  name: [
    { required: true, message: '必填', trigger: 'blur' },
    { min: 2, max: 10, message: '2-10字符', trigger: 'blur' }
  ]
})
const formRef = ref()

const submit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 调用 API 提交
    }
  })
}
</script>

💬 面试题 ：如何实现表单校验？
答：Element Plus 的 el-form 通过 rules 定义校验规则，prop 绑定字段名，ref 获取表单实例调用 validate() 方法。支持同步/异步校验，可自定义 validator。

五、前后端分离开发流程

1. 开发模式

前端：独立开发 UI + 调用 Mock API
后端：独立开发接口 + 提供 Swagger/API 文档
联调：前后端约定接口（URL、参数、返回格式）

2. 接口请求封装（最佳实践）

步骤 1：创建 request.js（统一 axios 实例）

js 复制代码

// utils/request.js
import axios from 'axios'

const request = axios.create({
  baseURL: '/api', // 代理前缀
  timeout: 10000
})

// 响应拦截器：统一处理返回数据
request.interceptors.response.use(
  res => res.data, // 直接返回 data 层
  err => Promise.reject(err)
)

export default request

步骤 2：API 模块化（api/dept.js）

js 复制代码

// api/dept.js
import request from '@/utils/request'

export const getDepts = () => request.get('/depts')
export const addDept = (data) => request.post('/depts', data)
export const updateDept = (id, data) => request.put(`/depts/${id}`, data)
export const deleteDept = (id) => request.delete(`/depts/${id}`)

步骤 3：Vite 代理配置（解决跨域）

js 复制代码

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

💬 面试题 ：前端如何解决跨域？
答：开发阶段用 Vite/Webpack 代理；生产环境由 Nginx 反向代理或后端开启 CORS。

六、核心业务模块实现逻辑

1. 部门管理（CRUD）

功能	实现要点
列表查询	`onMounted` 调用 `getDepts()`，赋值给 `ref([])`
新增	表单校验 → 调用 `addDept()` → 成功后刷新列表
编辑	点击"编辑" → `getDept(id)` 回显 → 弹窗显示 → 修改后调用 `updateDept()`
删除	`ElMessageBox.confirm()` 确认 → 调用 `deleteDept(id)` → 刷新列表

2. 路由与布局（Vue Router）

动态菜单 ：根据用户权限生成 router-link
核心组件 ：
- <router-link to="/dept">部门管理</router-link>
- <router-view />：渲染匹配的组件

💬 面试题 ：Vue Router 有几种模式？区别？
答：

hash 模式：URL 带 #，兼容性好，无需后端配置。

history 模式：URL 美观（如 /dept），但需后端配置 fallback 到 index.html。

七、面试高频问题汇总

Q1：Vue 2 和 Vue 3 的主要区别？

响应式原理 ：Vue 2 用 Object.defineProperty，Vue 3 用 Proxy（支持数组索引、动态属性监听）。
API 风格：Vue 3 推出 Composition API。
性能：Vue 3 更快、更小（Tree-shaking 支持）。
TypeScript：Vue 3 源码用 TS 重写，TS 支持更好。

Q2：ref 和 reactive 的区别？

ref：用于基本类型（string/number），访问需 .value。
reactive：用于对象/数组，直接操作属性。
建议：模板中直接用 ref（Vue 自动解包），逻辑中按需选择。

Q3：如何优化 Vue 项目性能？

路由懒加载：() => import('@/views/Dept.vue')
组件按需引入（Element Plus）
虚拟滚动（大数据列表）
v-memo（Vue 3.2+）缓存子树
避免在模板中写复杂表达式

八、总结：你的技术栈全景图

Vue 3
组合式 API
单文件组件 SFC
响应式系统
Vue Router 路由
Element Plus UI
工程化
Vite 构建
ESLint + Prettier
Mock / Apifox
业务
部门/员工管理
登录认证
表单校验 + CRUD

✅ 复习建议：

动手重写一个"部门管理"模块（含增删改查 + 表单校验）。
熟记 ref/reactive/onMounted 用法。
理解 Axios 封装 + Vite 代理配置。
能口述工程化价值和开发流程。