# vue-ev-75-twice

**Repository Path**: coderxg/vue-ev-75-twice

## Basic Information

- **Project Name**: vue-ev-75-twice
- **Description**: 大事件第二遍
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-17
- **Last Updated**: 2022-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# demo-ev-again

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

### 知识点回顾

1.手动创建vue脚手架

2.删除不用的组件和代码

3.下载ElementUI包、axios包

4.在main.js中导入ElementUI包，并挂载到Vue实例上

5.导入axios并添加到Vue的原型上

6.设置axios的根路径

7.在asset里添加image、global.less文件、logo图片等

8.在router文件夹index.js的路由中添加reg、和login的路径

9.在App.vue的template里添加占位符router-view

10.在Reg.vue组件里完成注册功能

（1）在ElementUI官网赋值表单验证模板

（2）表单校验的三步：

​        1.准备校验规程对象

​        2.检查做校验的三个元素

​        3.当用户点击是做兜底校验

​        检查必要的三要素：

​        1.el-form的model属性

​        2.el-form的rules属性

​        3.el-form-item的prop属性，必须和校验规则名称一致

​        注意事项: 所有的校验的表单数据，必须放在一个对象中

（3）完成注册点击功能

```js
regHandler() {
      this.$refs.regForm.validate(async(valid) => {
        // console.log(valid)
        if (!valid) return
          // 如果接口里所传参数名与this.regForm对象里的属性名相同则可以直接传this.regForm对象
 		const { data: res } = await this.$axios.post('/api/reg', this.regForm)
        console.log(res)
          // 趁早返回
        if (res.code !== 0) return this.$message.error(res.message)
        this.$message.success(res.message)
        this.$router.push('/login')
      })
    }
```