2021-03-01《 vue+element 电商后台管理项目 Day1》

vue+element 电商后台管理项目 Day1

• scoped 单文件组件加上防止样式冲突
• 业务流程 ：
  1 访问 app.vue 自动 redirect 到 login.vue
  2 导入 global.css 全局style body,html.#app 的height 设置为 100% 并且清空 默认的 margin padding
  3 利用absolute position 使盒子居中（相对于body偏移）
  4 relative 相对于自己的当前位置 偏移
  5 avatar 头像 border-radius 圆角
  6 transform :translate(-50%,-50%)相对于自身向右向向上平移50%
• element ui 属性
  1 label-width label提示文本的占位宽度 =0时输入框全部变大
  2使用 el-form时可通过设置怪异盒模型（border-box）左右padding使盒子居中
  3 表单数据绑定 :moble
  4 表单数据预验证 :rules props
  5表单的重置 获取表单的实例对象 ref $refs ref的值是表单的实例对象
  6 登陆前的预校验 先获取表单的引用对象点击登录的时候调用 validate()函数 validate函数的第一个参数是一个布尔值，当数据符合验证规则时，参数的返回值是true，否则为false
  7 预校验为false时就返回 ,下次点击继续进行预校验
  8 预校验为true时，就发起登录的网络请求
  9 网络请求步骤 1.导包2.挂载在原型对象上3.配置请求的根路径
  10发起网络请求 解构赋值 async await
  11 message 弹框组件 全局挂载 Vue.prototype. $message=Message