面经pc端项目

创建项目

安装脚手架-----创建项目------选择自定义

sass基础语法

https://www.sass.hk/

sass语法有两个：sass(旧) scss(新)

1.scss语法

和less语法类似，支持嵌套，支持变量…

scss： $变量名

less： @变量名

$color:orange;
.box{
  width: 400px;
  height: 400px;
  border: 2px solid $color;
  a{
    color: $color;
  }
}
1
2
3
4
5
6
7
8
9

sass(旧)和stylus类似，需要去掉; 和 {}

1
2
3
4
5
6
7
8
9
10

element-ui组件库

链接: https://element.eleme.cn/#/zh-CN/component/installation

axios二次封装–api

storage封装

登录模块

1.构建登录基本架子

控制组件的样式

• 给组件加类名，添加的类名会直接渲染到组件的根元素上

1

• 通过组件标签名作为类名控制样式

组件的根元素，有一个和组件名同名的类名

     .el-card
1

• 渗透选择器

加上scoped后，所有的样式只会作用于当前组件模板

但是 有时候我们也需要向下渗透，影响内组件内部的一些内容样式—深度作用选择器

 去掉scoped
 （1） less   /deep/  选择器前面添加  /deep/
 （2） scss  ::v-deep 选择器前面加  ::v-deep
1
2
3

2.美化样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3.表单基础校验

在向后端发请求，调用接口之前，我们需要对所要传递的参数进行验证，把用户的错误扼杀在摇篮之中

element-ui的校验

• el-form model属性 rules规则
• el-form-item 绑定prop属性
• el-input 绑定v-model

正则校验

 password: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { pattern: /^\w{5,11}$/, message: '长度在5~11个字符', trigger: ['blur', 'change'] }
        ]
1
2
3
4

4.提交表单和重置功能

每次点击按钮，进行ajax登录钱，对整个表单内容校验，通过校验才发送请求

//ref

//添加点击事件

    登录
    重置

//调用组件方法  验证
methods: {
    login () {
      //   登录的时候 需要先校验 校验通过才能发请求
      // 校验 通过ref和$refs 拿到el-form组件  调用组件的方法
      // console.log(this.$refs.loginRef)
      this.$refs.loginRef.validate((isOk) => {
        if (isOk) {
          console.log('成功')
        } else {
          console.log('error ')
          return false
        }
      })
    },
    reset () {
      this.$refs.loginRef.resetFields()
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

5.登录功能

封装API登录请求模块，vuex构建user模块存token

• token存入vuex的好处 ，易获取 响应式
• vuex需要分模块----user模块
• vuex刷新会重新初始化，缓存的数据会丢失----本地存储也要存
  
  登录功能代码
  

6.错误统一处理

• 登录成功，需要给提示，错误提示通过响应拦截器统一处理
• 未登录的用户，不可以访问首页，需要登录访问拦截