4.1.4 登录功能的实现
在实际开发中,要开发一个新功能,先创建一个新分支,开发完成后再合并到主分支上
git status
git checkout -b login
git branch
4.1.5 配置路由
如果出现以下类似报错
Component name "Login" should always be multi-word.意思是说组件名"Login"应该总是多个单词,其实就是eslint报出我的组件名称命名不规范,应该采用驼峰命名法
解决方法就是在vue.config.js文件中写入lintOnSave:false,修改完毕后重启项目即可
4.1.6 在/assets/css文件夹下编写全局样式文件,并在main.js引入
4.1.7 安装开发依赖 less-loader和less
终端运行 npm install less-loader@4.1.0 --save-dev 就能安装低版本开发依赖less-loader,不打-dev安装的是项目依赖
4.1.8 登录盒子在页面水平垂直居中,使用CSS3的tansform:translate和子绝父相定位实现
4.1.9 登录logo在盒子中居中,并且压在盒子的线上
4.1.10 表单通过定位的方式在合适的位置显示,注意在添加padding时需要设置
box-sizing:boder-box; 才不会撑大原来的盒子,按钮右对齐用到了flex布局,flex-end属性
4.1.11 使用elementUI的字体图标,通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标 和引入iconfont字体图标