day1电商管理系统跟连笔记——项目初始配置、登录界面样式

项目准备

项目使用技术

前端初始化

• 可视化面板用脚手架创建项目(同时安装路由)
• 添加Element-ui插件（vue-cli-pligin-element）配置中，不引入完整组件，改成按需导入
• 配置axios依赖
• 创建仓库
  • 本地仓库git到云端
  • 找到项目文件通过PowerShell检查项目状态（将没有提交的文件git add . git commit -m “add files”）on branch master就是在主分支了，干净。这些都是本地操作
    • git add.加入缓存区
    • git commit -m "add files"提交
    • git status查看状态
    • 最后两行是和云端仓库做链接，将本地仓库上传到码云中
    • 

后台项目环境配置

安装Mysql，导入数据库脚本

• 项目实战视频已经给出数据库脚本（sql文本），把表直接拿来用就行（还原数据库）。
• 

运行API以及测试

• 这个目录就是后台api项目
• 先安装依赖包，才能运行（在当前api项目目录下用PowerShell npm install安装）
• node 命令执行文件夹中app.js 把api接口项目跑起来，通过接口文档查看接口
• postMan（这是一个接口测试工具）测试接口==（测试时一定不要关闭跑起来的api接口，因为对后端还不太了解 最开始没理解这个接口的作用配运行接口 现在懂了）==

登录

token原理

• 前后端存在跨域问题使用token
  登录验证之后，客户端请求服务器接口都必须携带token值，因为token是保障身份验证成功唯一令牌

创建分支

• git chekout -b login 创建分支 login是创建的分支名
• git branch 查看分支

项目结构

• main.js
• App.vue

• index.js 路由文件
  

实现Login组件

• 先在components中创建一个登录组件Login
  
  == scoped:只在当前组件内生效 否则全局生效 防止组件冲突 ==
• 导入路由：

1. 先import
2. 再在路由数组中加入路由规则，path设置路径，component展示引入的组件
3. 重定向路由规则：当用户访问斜线根路径自动跳转到/login

• 用路由占位符 < routwe-view > 渲染到app根组件中

登录界面布局

• 首先需要添加Less依赖
  
  less-loader报错 好像是因为版本过高
  

看了这篇文章解决了

设置登录界面头像样式 transform:translate()

transform: translate(-50%, 50%)
以上属性，元素会以自身的左上角为原点，往上往左分别移动自身长宽的50%，以使其居于中心位置。
与负的margin-left和margin-top实现居中不同，margin-left和margin-top必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中。参考文章

引入Element-UI表单

element-ui通过按需导入的方式引入，需要的组件需要导入之后才能使用。
在plugins文件的element.js中引入注册组件

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度
IE盒模型 box-sizing: border-box
border-box:
width = border + padding + content width
heigth = border + padding + content heigth
参考文章