1. 项目初始化与环境搭建第一次接触Element-UI时我像发现新大陆一样兴奋。这个基于Vue.js的组件库能让我们用搭积木的方式快速构建企业级后台系统。先带大家走通最基础的搭建流程后面再深入登录模块的实战。安装Vue CLI就像给电脑装了个乐高工具箱npm install -g vue/cli创建项目时建议选择Vue 2.x版本Element-UI目前对Vue 3支持尚不完善vue create ele-admin安装Element-UI时有个小技巧用-S参数会自动写入package.jsoncd ele-admin npm install element-ui -S在main.js中全局引入就像给项目注入灵魂import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css Vue.use(ElementUI)2. 登录页面基础搭建2.1 组件清理与结构准备新手容易犯的错误是保留脚手架默认组件。我建议清空views目录新建login.vuetemplate div classlogin-container !-- 这里将放置登录表单 -- /div /template script export default { name: Login } /script style scoped .login-container { height: 100vh; background: url(~/assets/login-bg.jpg) no-repeat; background-size: cover; } /style2.2 路由配置技巧在router/index.js中设置重定向让根路径自动跳转到登录页const routes [ { path: /, redirect: /login }, { path: /login, name: Login, component: () import(../views/login.vue) } ]3. 登录表单实现3.1 表单组件实战Element的el-form组件用起来像填表格一样简单el-form :modelloginForm :rulesrules refloginForm el-form-item propusername el-input v-modelloginForm.username placeholder请输入账号 i slotprefix classel-icon-user/i /el-input /el-form-item el-form-item proppassword el-input v-modelloginForm.password typepassword placeholder请输入密码 show-password i slotprefix classel-icon-lock/i /el-input /el-form-item el-button typeprimary clickhandleLogin :loadingloading 登录 /el-button /el-form3.2 表单验证配置验证规则写在data里比用正则表达式直观多了data() { return { loginForm: { username: , password: }, rules: { username: [ { required: true, message: 请输入账号, trigger: blur }, { min: 3, max: 10, message: 长度在3到10个字符, trigger: blur } ], password: [ { required: true, message: 请输入密码, trigger: blur }, { min: 6, max: 16, message: 长度在6到16个字符, trigger: blur } ] }, loading: false } }4. 登录接口对接4.1 Axios封装技巧在src下新建utils/request.js这是我常用的配置import axios from axios import { Message } from element-ui const service axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }) service.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.message || Error) return Promise.reject(new Error(res.message || Error)) } return res }, error { Message.error(error.message) return Promise.reject(error) } ) export default service4.2 登录方法实现在login.vue中添加登录逻辑methods: { handleLogin() { this.$refs.loginForm.validate(valid { if (valid) { this.loading true this.$store.dispatch(user/login, this.loginForm) .then(() { this.$router.push(/dashboard) }) .finally(() { this.loading false }) } }) } }5. 安全增强与用户体验5.1 防止重复提交在登录按钮上添加loading状态是最简单的防重复提交方案el-button :loadingloading clickhandleLogin 登录 /el-button5.2 密码加密处理安装jsencrypt进行RSA加密npm install jsencrypt -S在utils目录下新建encrypt.jsimport JSEncrypt from jsencrypt const publicKey 你的公钥 export function encrypt(password) { const encryptor new JSEncrypt() encryptor.setPublicKey(publicKey) return encryptor.encrypt(password) }6. 主题定制技巧很多企业需要定制主题色在src下新建styles/element-variables.scss$--color-primary: #1890ff; import ~element-ui/packages/theme-chalk/src/index;然后在main.js中替换原本的CSS引入import ./styles/element-variables.scss7. 响应式布局适配登录页在不同设备上的显示很重要我用的是这种适配方案.login-container { display: flex; justify-content: center; align-items: center; .login-form { width: 100%; max-width: 400px; padding: 20px; background: #fff; border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,.1); media (max-width: 768px) { width: 90%; } } }8. 完整登录模块代码最后给大家看下我的login.vue完整代码template div classlogin-container el-form classlogin-form :modelloginForm :rulesrules refloginForm h3 classtitle企业后台管理系统/h3 el-form-item propusername el-input v-modelloginForm.username prefix-iconel-icon-user placeholder账号 /el-input /el-form-item el-form-item proppassword el-input v-modelloginForm.password typepassword prefix-iconel-icon-lock placeholder密码 show-password keyup.enter.nativehandleLogin /el-input /el-form-item el-form-item el-button typeprimary :loadingloading clickhandleLogin stylewidth:100% 登 录 /el-button /el-form-item /el-form /div /template script import { encrypt } from /utils/encrypt export default { name: Login, data() { return { loginForm: { username: admin, password: 123456 }, rules: { username: [ { required: true, trigger: blur, message: 请输入用户名 } ], password: [ { required: true, trigger: blur, message: 请输入密码 }, { min: 6, max: 16, message: 长度在6到16个字符, trigger: blur } ] }, loading: false } }, methods: { handleLogin() { this.$refs.loginForm.validate(valid { if (valid) { this.loading true const loginParams { ...this.loginForm, password: encrypt(this.loginForm.password) } this.$store.dispatch(user/login, loginParams) .then(() { this.$router.push({ path: / }) }) .catch(() { this.loading false }) } }) } } } /script记得第一次实现这个登录模块时被表单验证折腾了好久。后来发现Element-UI的validate方法其实非常智能只需要按照规则配置就能自动处理各种校验场景。现在团队新项目都用这套方案开发效率至少提升50%。