# vue-ev-72

**Repository Path**: leetc/vue-ev-72

## Basic Information

- **Project Name**: vue-ev-72
- **Description**: 牛逼的大事件!
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2022-03-21
- **Last Updated**: 2023-10-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 大事件项目纪要

## 项目初始化

1. 使用脚手架 vue-cli (手动选择要安装的功能) 创建项目
2. 梳理项目结构
   - 删除 `router/index.js` 的路由规则
   - 删除 `assets` 和 `components` 下所有的文件
   - 清空 `App.vue` 的结构
3. 复制资料下的 `assets` 到项目中, 引入全局样式
4. 下载并安装 `Element-UI` (参考官网)
5. 下载并配置 `axios` (参考官网)
6. 将代码提交到远程仓库



## 注册功能

### 使用路由切换登录注册组件

1. 创建注册和登录组件
2. 配置路由规则实现两个组件的切换
3. 在 App.vue 中使用 router-view 组件占位

### 渲染注册组件

1. 复制笔记的静态页面到项目中
2. 根据需求修改样式
3. 去官网复制 form 组件到项目中进行修改

### 表单校验

1. 定义校验规则对象

2. 检查 3 个属性是否定义

   - form 的 model
   - form 的 rules
   - form-item 的 prop

3. 兜底校验

   `表单对象.validate()`

### 实现注册功能

1. 给注册按钮绑定点击事件进行兜底校验
2. 兜底校验通过后发请求拿结果
3. 根据结果提醒用户
4. 注册成功后跳转至登录页

## 登录功能

### 渲染登录组件

1. 复制笔记的静态页面到项目中
2. 根据需求修改样式
3. 去官网复制 form 组件到项目中进行修改

### 表单校验

1. 定义校验规则对象

2. 检查 3 个属性是否定义

   - form 的 model
   - form 的 rules
   - form-item 的 prop

3. 兜底校验

   `表单对象.validate()`

### 登录注册页面的切换

1. 给两个 el-link 绑定点击事件
2. 使用编程式导航跳转到对方页面

### 实现登录功能

1. 给登录按钮绑定点击事件, 进行兜底校验
2. 校验通过后发请求拿结果
3. 根据结果提醒用户
4. 登录成功跳转到首页

### 将 token 存入 vuex

1. 定义 user 子模块并注册
2. 定义 token 数据, 并编写修改 token 的 mutations
3. 当用户登录成功后将 token 存入 vuex

### vuex 持久化

1. 下包

   ```bash
   yarn add vuex-persistedstate
   ```

2. 导入到 `store/index.js`

   ```js
   import createPersistedState from 'vuex-persistedstate'
   ```

3. 安装插件

   ```js
   const store = new Vuex.Store({
     plugins: [createPersistedState()],
     ...
   })
   ```

### 渲染首页组件

1. 在 views 下创建 Main/Main.vue 组件
2. 配置路由实现首页的跳转

### 退出登录

1. 在首页中找到退出登录按钮并绑定点击事件
2. 用户点击后使用 `$confirm` 提醒用户是否确认退出登录
3. 当用户点击确认后, 清空 token 并跳转至 `/login`

## 渲染用户信息

1. 渲染静态页面
2. 用户信息在项目中很多地方都需要使用, 所以存放在 Vuex 中
3. 在 actions 中定义异步获取用户信息的方法
4. 在 Main.vue 的 created 中调用 actions 获取用户信息
5. 获取到用户信息后, 调用 mutations 存储到 state 中
6. 在 Main.vue 中引入 userInfo 用户信息并渲染

### 渲染侧边栏

## 权限控制

### 请求拦截器优化 token 携带

1. 去 axios 官网复制请求拦截器的代码
2. 在 main.js 中设置请求拦截器, 每次发请求携带 token 到请求头

## 渲染首页

1. 新建组件: views/Menus/Home/Home.vue
2. 下包: yarn add echarts
3. 配置路由, main 的二级路由
4. 在 Main.vue 中写一个 router-view 占位符