花生鼠的日常建站日志-002 实现注册登录模块的UI界面

笔记：

1、由于在路由映射的时候将

component多加了一个s 变成components导致路由映射一直出错

2、解决子组件占据整个body，并且通过子组件修改父组件的背景图片

  原理： 将父组件的App入口组件的div占据整个body

然后路由中的子组件的div占据父组件的全部，然后给子组件的div添加背景

父组件的样式：
<style>
  #app{
    height:100% ; width:100%;
    position:absolute;
  }
// 这个body是去边距
  body{
    margin: 0 auto;
  }
</style>

--------------------------------------------------
子组件样式
给最外层添加一个body类如<div class="body" ></div>
然后定义改类的样式
.body{
    height:100% ;
    width:100%;
    position:absolute;
    background-image: url('../../../static/img/bg_login.jpeg');// 背景图片
    background-repeat: no-repeat;    // 空间足够大时 图片默认平铺问题，出现多张图片占据body背景
  }

3、禁止页面通过ctrl+鼠标滑轮缩放页面

原理：警用鼠标滑轮实现，当然ctrl+ ‘+’键可以缩放

在div中添加 @mousewheel.prevent禁止鼠标滑轮

 

4、图片验证码的实现

安装identify模块实现图片验证码的实现

npm install identify

 

最终效果：