abcnull 的博客

el-form 中每个 el-form-item 都是一个单独的小项目，默认 el-form-item 都是换行的，除非加上。通过 vue + elementUI 实现 form 表单中输入框还有 label 统一对齐。属性 right 表示右对齐，即可对齐，但是不想都弄成 1 列，可以让他们都是 1 行，属性表示前面每个 label 宽度是多少，然后设置。有的输入框长度不一致，前端谷歌调试后，通过。想设置对齐的话，先可以设置。属性，就是表示弄成一行。

就能找到这个 ref，然 ref 自己有一个 resetFields() 函数，它的执行可以清空 ref 所在的这个 el-form 中的表单数据，依据 el-form-item 的 prop 来清空，这个 prop 需要和 v-model 相匹配。具体可以看下下放代码，点击「重置」btn 触发 resetForm() 函数。重置 btn 的作用是为了清空前面 form 表单中的数据。我们使用 elementUI + vue 来做。我们在 el-form 组件中加上。页面上可能会有「搜索」按钮。

swiper 是可以给 vue3 提供支持轮播图组件官网也有介绍怎么在 vue 中安装使用它。

最流行的前端框架之一，本篇博文期望快速阅览 vue3 的知识点，1 天内看完，剩下就是熟练加综合应用了npm 是包管理工具，相当于可以用它从中央仓库中拿到依赖包node.js 实际上就是 js 的运行环境其实就是子组件 script 脚本中如果通过 $emit 给某个 key 赋值 value，然后在父组件中就能自定一个事件，这个事件就是@key，然后函数名中的(data)就是反向传过来的 value 了看栗子，子组件foo() {

比如说，左侧有众多菜单栏，当点击一个菜单栏，进入一个页面，要保证左侧此页面对应的菜单栏 item 是高亮的。

默认已经安装了 vue-router 路由依赖已经写好了 src/router/index.js 和 src/views/login.vue 组件了。

需要引入 vue-cookies，element-plus 依赖，并且确保 src/main.js 中已经 use 了 ElementPlus，这个可以看我前面的教程。这里 js 实现的效果是，如果勾选了记住我，那么下次再打开这个界面时候，能发现 form 表单中已经保存了上次用户密码（实际就是 cookies）如果没有勾选记住我，那么下次打开这个登录页面，会发现用户密码 form 表单还是空的，还需要你输入一遍。使用 element plus 样式。

还有比如说，想要实现登录失败时候验证码图片更换，思路也很简单，就是登录时候判定如果失败就调用下 changeCheckCode 这个函数即可。这里是图片验证码，找到图片验证码地方，设置 src，由 js 控制，设置 click 事件，由 js 函数控制。点击图片触发 changeCheckCode 函数执行。

所以在登录请求前需要额外判定 formData pwd 和 cookies 中 pwd 是否一致，不一致需要 md5(pwd)，一致就直接 pwd，不需要套 md5。登录后 cookies 中直接赋 formData.pwd，因为它已经是 md5 后的了，这样再下次请求时候，从 cookies 能直接拉到 md5 后的 pwd，然后将其赋给 formData，同样这里有一个判定，如果formData.pwd 和 cookies 中一致，就不需要再给其套 md5 了。我们这里可以按照想法 2 来实现。

所以一旦之前已经登录有这个 loginInfo 的 cookies 数据的话，formData 会从 cookies 中拿数据，这时候拿到的 formData 的 pwd 数据可是加密后的（要知道手输 input 的 pwd 可是未加密的数据），所以一般在登录 request 之前先要判定下，formData 中的数据和 cookies 中不一致的话就要给 formData 加密，来确保 formData 一定加密后的数据，一致的话那肯定就是 cookies 中的 pwd 数据（即被加密后到数据）

未登录下，访问一些页面是不被允许或者说也没什么作用，所以需要自动导向/login页面。

vue 常常使用 axios 包来调用请求。

使用 vue3 + element plus。

同时在 src 下创建 views 文件夹，其中主要是 vue 组件，来和 index.js 中的路由对应。vue3 项目中 src 下创建 router/index.js，其中主要声明路由。vue3 一般使用 vue-router，npm 下载 vue-router 包。在 App.vue 这个根组件中的 template 中添加。在 src 下的 main.js 中添加使用路由，新增。最后 run 起来查看是否生效即可。index.js 中有。

最后在 views 文件夹中（这里是专门存放 component 的地方）的某一个 component 的 template 中使用上 elmentPlus 即可。然后 vue3 项目的 main.js 中初始化。