企业官网建设流程全解析

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.json：

cd 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.vue：

<template> <div class="login-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; } </style>

2.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 :model="loginForm" :rules="rules" ref="loginForm"> <el-form-item prop="username"> <el-input v-model="loginForm.username" placeholder="请输入账号"> <i slot="prefix" class="el-icon-user"></i> </el-input> </el-form-item> <el-form-item prop="password"> <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password> <i slot="prefix" class="el-icon-lock"></i> </el-input> </el-form-item> <el-button type="primary" @click="handleLogin" :loading="loading"> 登录 </el-button> </el-form>

3.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 service

4.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 :loading="loading" @click="handleLogin"> 登录 </el-button>

5.2 密码加密处理

安装jsencrypt进行RSA加密：

npm install jsencrypt -S

在utils目录下新建encrypt.js：

import 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.scss'

7. 响应式布局适配

登录页在不同设备上的显示很重要，我用的是这种适配方案：

.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 class="login-container"> <el-form class="login-form" :model="loginForm" :rules="rules" ref="loginForm"> <h3 class="title">企业后台管理系统</h3> <el-form-item prop="username"> <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="账号"> </el-input> </el-form-item> <el-form-item prop="password"> <el-input v-model="loginForm.password" type="password" prefix-icon="el-icon-lock" placeholder="密码" show-password @keyup.enter.native="handleLogin"> </el-input> </el-form-item> <el-form-item> <el-button type="primary" :loading="loading" @click="handleLogin" style="width: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%。