Day1 | 登录界面

登录界面

1、背景图轮播

写了BgAnimation的模块，封装了背景图轮播的功能，并在App.vue中导入并使用。

主要技术点：
css3动画属性animation的使用

【注】用到了带前缀的关键帧定义，好奇查了一下前缀的作用，原来是用来兼容各个浏览器的。

前缀名	兼容浏览器	说明
-webkit-	Chrome、Safari、Opera	前缀-webkit-用来兼容Chrome4.0至43.0以下版本、Safari4.0至9.0以下版本、Opera15.0至30.0以下的版本的@keyframes属性，也就是说从Chrome43.0、Safari9.0、Opera30.0版本开始，就不需要写这个前缀了
-o-	Opera	兼容Opera12.0至某个版本的@keyframes属性
-moz-	用来兼容Firefox	用来兼容Firefox5.0至16.0以下的@keyframes属性，16.0版本开始，就不需要写这个前缀了
无前缀	IE	用来兼容IE的@keyframes属性，从IE10.0开始就支持@keyframes属性了

CSS 关键帧动画：
1.用 @keyframes 定义关键帧
定义名字和每个关键帧的状态。

值	描述
value	规定不透明度。从 0.0（完全透明）到1.0（完全不透明）。
inherit	应该从父元素继承 opacity 属性的值。

2.用 animation 应用关键帧，到具体元素，创建动画效果

animation: 关键帧名字 动画完成时间 匀速变化 无限循环 动画在启动前的延迟间隔

---

背景搞好之后，添加页面元素，即登录表单—美化样式—再给背景加上vue-particals的动画。

---

2、vue-particals的应用（粒子动效）

实际上是别人写好的一个插件。
Vue-particals使用方法

但跟着文档写之后发生了报错，原因是文档里使用插件的方法是Vue2的格式，Vue3引用插件应该这样：
引入好后在Login.vue中插入组件，并传入参数。

3、路由的应用

点击 登录按钮，利用路由跳转到Home页面。

路由的作用：实现SPA应用，方便页面跳转和组件更新
路由工作流程：通过路径更改与之前设置的key value对比，跳转组件。


什么是路由：
一个路由就是一组key-value映射关系，key为路径，value可能是function（后端路由发请求）或component。
路由使用方法

最后在项目中的效果：在“登录”页点击按钮将登录组件切换为首页。