Element Plus 组件库与页面开发实战2026-07-12|第三阶段 · AI 应用 Web 开发|预计阅读 25 分钟文章目录一、今日学习内容概览二、Element Plus 组件库入门与主题定制三、登录页面开发：表单验证与 JWT 鉴权四、文章列表页：Table 分页排序与搜索过滤五、创作页面：富文本编辑器与 AI 生成六、路由守卫与权限控制七、今日踩坑记录八、收获总结九、明日学习计划第三阶段的第三天，今天终于进入了最激动人心的环节——页面开发实战！前两天的基础工作（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-importJavaScriptvite.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 / h2AI 智能写手/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