# vue2-code-examples

**Repository Path**: wei-1030/vue2-code-examples

## Basic Information

- **Project Name**: vue2-code-examples
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-11
- **Last Updated**: 2026-08-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue2 代码示例集

面向 Java 后端开发者的 Vue2 学习代码，从基础语法到生产级工程化项目，循序渐进。

## 目录结构

```
vue2-code-examples/
├── 01-basics/          基础语法（浏览器直接打开即可运行）
├── 02-advanced/        进阶语法（浏览器直接打开即可运行）
├── 03-production/      生产级工程化项目（需 npm install 后运行）
└── README.md
```

## 01-basics 基础语法

使用 CDN 引入 Vue 2.7.16，双击 HTML 文件即可在浏览器中运行。

从 `index.html` 开始浏览，按顺序学习：

| 文件 | 主题 | 核心知识点 |
|------|------|------------|
| 01-template-syntax.html | 模板语法 | 文本插值、v-bind/v-on 简写、v-html、class/style 绑定 |
| 02-data-methods.html | 数据与方法 | data、methods、computed（含缓存）、watch、getter/setter |
| 03-event-handling.html | 事件处理 | @click、$event、事件修饰符、按键修饰符、鼠标修饰符 |
| 04-form-binding.html | 表单绑定 | v-model 各表单元素、.lazy/.number/.trim 修饰符 |
| 05-condition-list.html | 条件与列表渲染 | v-if/v-show、v-for、:key 重要性、v-for 与 v-if 不共存 |

## 02-advanced 进阶语法

同样使用 CDN，浏览器直接运行。

| 文件 | 主题 | 核心知识点 |
|------|------|------------|
| 01-components.html | 组件基础 | 全局/局部注册、data 必须是函数、模板多种写法 |
| 02-props-emit.html | 父子通信 | props 校验、$emit、.sync、$refs、.native |
| 03-slots.html | 插槽 | 默认插槽、具名插槽、作用域插槽、v-slot |
| 04-lifecycle.html | 生命周期 | 8 个钩子完整演示、与 Spring Bean 生命周期对照 |
| 05-custom-directive.html | 自定义指令 | v-focus、v-demo（参数+修饰符）、5 个钩子函数 |
| 06-mixins.html | 混入 | 全局/局部混入、选项合并策略、自定义合并 |
| 07-filters.html | 过滤器 | 全局/局部过滤器、串联、v-bind 中使用 |

## 03-production 生产级项目

模拟真实项目的 Vue2 工程化代码，使用 Vue CLI 结构和单文件组件（.vue）。

### 运行方式

```bash
cd 03-production
npm install
npm run serve
```

### 项目结构

```
03-production/
├── package.json              依赖配置
├── vue.config.js             构建配置（代理/别名）
├── .env.development          开发环境变量
├── .env.production           生产环境变量
├── public/
│   └── index.html            HTML 模板
└── src/
    ├── main.js               应用入口
    ├── App.vue               根组件
    ├── router/
    │   └── index.js          路由配置（懒加载/守卫/页面标题）
    ├── store/
    │   ├── index.js          Vuex 根 store
    │   └── modules/
    │       ├── user.js       用户模块（token/userInfo）
    │       └── app.js        应用模块（侧边栏状态）
    ├── utils/
    │   ├── request.js        Axios 封装（拦截器/401 处理）
    │   └── auth.js           Token 管理
    ├── api/
    │   ├── user.js           用户接口（login/CRUD）
    │   └── common.js         公共接口（验证码/上传）
    ├── components/
    │   ├── BasePagination.vue  分页组件
    │   ├── BaseDialog.vue      弹窗组件
    │   └── SearchForm.vue      搜索表单
    ├── layouts/
    │   └── DefaultLayout.vue  默认布局
    └── views/
        ├── Login.vue          登录页
        ├── Home.vue           首页
        ├── NotFound.vue       404 页面
        └── user/
            ├── UserList.vue   用户列表（完整 CRUD）
            └── UserDetail.vue 用户详情
```

### 核心设计

- **Axios 封装**：请求拦截器自动携带 Token，响应拦截器统一处理业务 code 和 401 跳转
- **路由守卫**：全局前置守卫检查 Token，未登录跳转登录页
- **Vuex 模块化**：user 模块管理登录状态，app 模块管理 UI 状态
- **组件复用**：BaseDialog、BasePagination、SearchForm 可配置化复用
- **API 模块化**：接口按业务模块集中管理，类似 Feign Client

## Java 开发者阅读指南

代码中所有关键概念处都标注了 **Java 类比** 注释，帮助你建立映射：

| Vue 概念 | Java 对应 |
|----------|-----------|
| Vue 实例 | SpringApplication |
| data | 类的实例字段 |
| computed | 缓存 getter |
| methods | Service 方法 |
| watch | 观察者 / PropertyChangeListener |
| 组件 | @Service Bean |
| props | 构造函数参数 / @Autowired |
| $emit | 回调函数 / 事件监听 |
| 生命周期钩子 | @PostConstruct / @PreDestroy |
| Vue Router | @RequestMapping |
| 路由守卫 | Spring Security Filter |
| Vuex | ApplicationContext / Redis |
| Axios 拦截器 | RestTemplate Interceptor |
| mutations | synchronized setter |
| actions | 异步 Service 方法 |