2.登录模块—表单和粒子效果

目录

1.表单组件的创建

 2.粒子效果

---

1.表单组件的创建

此项目使用的组件库是element plus，是基于Vue2、Vue3所开发的一个给我们所使用的组件库。

1.搭建最原始的element plus

2.使用element plus

 

 

 

 3.实现登录跳转功能

 4.写样式

 

•  在这里我们样式上遇到了一个问题，就是我们在formContainer里明明设置了color: white，为什么我们的用户名和密码的颜色是黑色呢？那么我们去寻找一下原因。首先可能是因为它本身被一些标签所包裹的，我们可以直接去深入到这个标签内部给它设置一下它的背景的一个颜色。

 我们会发现这样改变样式并没有用，原因呢？其实也是我们vue的一个知识点。

 因为我们现在用的scoped局部作用域，它其实为什么能局部影响，它的原理就是会为我们的组件生产一个唯一的一个属性，这样的话我们就可以在这里这个css做唯一的属性选择器，有这段css

只会对于有这个属性的会被选择上我们所设置的这样一些样式。然后我们在head中这里所写的style可以看到formContainer是有这个属性才会选择，

同样label是有这些属性它才会进行一个选择，那么我们去看一下label有这个属性吗？

我们可以看到label本身的话它是没有这个属性的。因为这个vue系统我们用的是别人的组件，它只能给这个组件这一层给它加上对应的这些特殊属性，

 但是对于这个组件内部可能有很多的标签组成的就是加不上这个唯一属性的，所以就会导致这样一个问题的产生。那没有了这个唯一属性，我们所写的样式就影响不了这个标签了，这就造成了scoped不好用的一个原因了。解决方案就是直接让它变成全局影响。

 加上scoped了就不行，因为这个时候的样式它是要唯一属性选择器，就我们这个用的别人的组件而且别人的组件内部那些标签是加不上我们外面这个属性的，那这该怎么办呢？这就要用到外面vue3的一个深度的样式选择，在我们这个标签外面包上一个deep，就可以了。

 2.粒子效果

一个非常经典的粒子库网站 https://particles.js.org/

 在这里你可以用纯JS来引用，也可以基于vue、react等等的所有前端框架都可以集成这样一个particles这样一个库去使用。效果是基于canvas所绘画的这些粒子，其实主要是让我们的登陆页面好看。

在这里我们用的是vue3的版本。

 1.引入安装粒子库组件

2.使用粒子库

复制粘贴官方文档里的第一个配置

 这里还要安装个tsparticles，虽然官方文档没有，但是不安装就会报错。它需要通过tsparticles进行loadFull调用，这样粒子库才能启动起来。

 

 我们把options里面的东西拿出来，因为太多了，在那里放这一堆太难看了，我们就弄一个单独的一个叫粒子配置文件，我们在src文件夹下创建一个util文件夹，里面放工具代码工具逻辑的工具文件夹，再在里面创建config.js。

 我们可以在官方文档里找其他的效果来使用

 

 

 然后我们直接复制粘贴把之前的给替换掉就可以了。

 看到效果之后发现它把我们的表单给覆盖了，所以我们得调整一下我们自己的层级。

 我们在弄一个背景图片，其实它本身也有一张背景图片，只不过它的背景图片加载可能会出问题，我的项目图片加载就没有问题。

我们换自己的背景图片。照片放在public文件夹中，路径直接"/xxx.jpg"就能找到了,因为public就是我们的资源文件夹，直接"/"就能根路径访问它的内容了。图片按照自己需要安排在什么位置。