企业官网建设流程全解析

Element Plus 组件库与页面开发实战

2026-07-12 | 第三阶段 · AI 应用 Web 开发 | 预计阅读 25 分钟

文章目录

1. 一、今日学习内容概览
2. 二、Element Plus 组件库入门与主题定制
3. 三、登录页面开发：表单验证与 JWT 鉴权
4. 四、文章列表页：Table 分页排序与搜索过滤
5. 五、创作页面：富文本编辑器与 AI 生成
6. 六、路由守卫与权限控制
7. 七、今日踩坑记录
8. 八、收获总结
9. 九、明日学习计划

第三阶段的第三天，今天终于进入了最激动人心的环节——页面开发实战！前两天的基础工作（Vue 3 语法、Pinia 状态管理、Axios 请求封装）都是为了今天能高效地搭建出"智能写手"前端项目的核心页面。

Element Plus 是 Vue 3 生态中最成熟的企业级 UI 组件库，背靠饿了么大前端团队，组件丰富、文档完善、社区活跃。今天我将用它来完成三个核心页面的开发：登录页、文章列表页、创作页。同时整合之前封装好的 Axios 和 Pinia，打通从前端到后端的完整链路。

一、今日学习内容概览

• Element Plus 组件库：安装与按需引入、主题定制、常用组件实战（Form / Table / Dialog / Pagination / Menu）
• 登录页面开发：表单验证规则、JWT Token 存储（Pinia + localStorage）、登录状态持久化
• 文章列表页：ElTable 数据展示、分页排序、搜索过滤、批量操作、数据导出
• 创作页面：富文本编辑器（wangEditor）集成、Markdown 预览、AI 文本生成调用
• 路由守卫：基于角色的权限控制、未登录拦截、动态路由加载

阶段里程碑：

今天是第三阶段第 3 天 / 共 20 天。经过今天的学习，"智能写手"前端项目已完成三大核心页面的 UI 开发与前后端联调，项目骨架基本成型。

二、Element Plus 组件库入门与主题定制

2.1 安装与按需引入

Element Plus 支持完整引入和按需引入两种方式。完整引入简单但打包体积大；按需引入通过 unplugin-vue-components 和 unplugin-auto-import 实现自动导入，既保证开发体验又控制包体积。

Bash终端

# 安装 Element Plus npm install element-plus # 安装自动导入插件（推荐） npm install -D unplugin-vue-components unplugin-auto-import

JavaScriptvite.config.js — 自动导入配置

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], // 自动导入 Vue 和 Element Plus 的 API imports: ['vue', 'vue-router', 'pinia'], dts: 'src/auto-imports.d.ts' }), Components({ resolvers: [ElementPlusResolver()], dts: 'src/components.d.ts' }) ] })

自动导入的好处：

配置完成后，你可以在组件中直接使用 ElButton、ElForm 等组件，无需手动 import；同时 ref、reactive、useRouter 等 API 也会自动可用。编译时插件会自动帮你插入 import 语句，既省心又减少代码冗余。

2.2 主题定制：打造品牌色系

Element Plus 默认是蓝色主题，但我们的项目主色调是青绿色（#06d6a0）。通过 CSS 变量覆盖和 SCSS 配置，可以快速定制一套符合品牌调性的主题。

SCSSstyles/element-theme.scss — 主题变量覆盖

// 覆盖 Element Plus 的主色变量 @forward 'element-plus/theme-chalk/src/common/var.scss' with ( $colors: ( 'primary': ( 'base': #06d6a0, ), 'success': ( 'base': #22c55e, ), 'warning': ( 'base': #f59e0b, ), 'danger': ( 'base': #ef4444, ), ) ); // 引入组件样式（按需引入时需手动导入样式） @use 'element-plus/theme-chalk/src/index.scss' as *;

JavaScriptmain.js — 引入自定义主题

import { createApp } from 'vue' import App from './App.vue' // 引入自定义主题（覆盖默认蓝色） import './styles/element-theme.scss' // 引入 Element Plus 图标 import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) // 注册所有图标组件 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.mount('#app')

2.3 暗黑模式适配

我们的博客和学习路线都使用深色主题，Element Plus 也原生支持暗黑模式。只需在 html 标签上添加 class="dark"，并引入暗黑样式变量即可。

JavaScriptcomposables/useDarkMode.js — 暗黑模式切换

import { ref, watch } from 'vue' const isDark = ref(localStorage.getItem('theme') === 'dark') watch(isDark, (dark) => { const html = document.documentElement if (dark) { html.classList.add('dark') html.classList.remove('light') localStorage.setItem('theme', 'dark') } else { html.classList.add('light') html.classList.remove('dark') localStorage.setItem('theme', 'light') } }, { immediate: true }) export function useDarkMode() { return { isDark } }

三、登录页面开发：表单验证与 JWT 鉴权

3.1 登录表单 UI 与验证规则

登录页是用户接触系统的第一个页面，既要美观又要安全。Element Plus 的 ElForm 组件内置了强大的表单验证能力，配合自定义校验规则可以实现复杂的验证逻辑。

Vue SFCviews/LoginView.vue — 登录页面

<template> <div> <div> <div> <img /> <h2>AI 智能写手</h2> <p>全栈 AI 内容创作平台</p> </div> <el-form ref="formRef" :model="loginForm" :rules="loginRules" @keyup.enter="handleLogin" > <el-form-item prop="username"> <el-input v-model="loginForm.username" placeholder="用户名 / 邮箱" :prefix-icon="User" size="large" /> </el-form-item> <el-form-item prop="password"> <el-input v-model="loginForm.password" type="password" placeholder="密码" :prefix-icon="Lock" show-password size="large" /> </el-form-item> <el-form-item> <div> <el-checkbox v-model="rememberMe">记住我</el-checkbox> <a>忘记密码？</a> </div> </el-form-item> <el-form-item> <el-button type="primary" size="large" :loading="loading" @click="handleLogin" > { { loading ? '登录中...' : '立即登录' }} </el-button> </el-form-item> </el-form> <div> <p>还没有账号？<router-link to="/register">立即注册</router-link></p> </div> </div> </div> </template> <script setup> import { ref, reactive } from 'vue' import { useRouter } from 'vue-router' import { useUserStore } from '@/stores/user' import { login } from '@/api/auth' import { ElMessage } from 'element-plus' import { User, Lock } from '@element-plus/icons-vue' const router = useRouter() const userStore = useUserStore() const formRef = ref(null) const loading = ref(false) const rememberMe = ref(false) const loginForm = reactive({ username: '', password: '' }) // 自定义验证规则 const validateUsername = (rule, value, callback) => { if (!value || value.trim() === '') { callback(new Error('请输入用户名或邮箱')) } else if (value.includes('@') && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) { callback(new Error('邮箱格式不正确')) } else { callback() } } const loginRules = { username: [ { required: true, validator: validateUsername, trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度需在 6-20 位之间', trigger: 'blur' }, { pattern: /^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/, message: '密码必须同时包含字母和数字', trigger: 'blur' } ] } const handleLogin = async () => { const valid = await formRef.value.validate().catch(() => false) if (!valid) return loading.value = true try { const res = await login({ username: loginForm.username.trim(), password: loginForm.password }) // 存储登录状态 userStor