Element Plus、Axios 与 ECharts

作者: luote (luote) · 个人主页 luote996.cn

Element Plus

是什么

Element Plus 是基于 Vue 3 的企业级 UI 组件库，提供按钮、表单、表格、对话框、消息提示等，脚手架登录注册页、布局均使用它。

常用组件

组件	用途
el-form / el-form-item	表单布局与校验
el-input / el-input-password	输入框
el-button	按钮与 loading 状态
el-message	顶部消息提示
el-dropdown	用户菜单下拉

表单校验示例：

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

await formRef.value?.validate()

主题

全局样式在 src/styles/global.css 定义 CSS 变量，覆盖 Element Plus 默认色为淡蓝灰白风格。可按设计稿调整 --el-color-primary 等变量。

Axios HTTP 客户端

是什么

浏览器 fetch 的增强版，支持拦截器、自动 JSON、超时等。脚手架在 src/api/request.ts 封装实例。

请求流程

封装要点

能力	实现
baseURL	import.meta.env.VITE_API_BASE_URL
请求拦截	从 Pinia 读 token 写入 Authorization
响应拦截	code !== 200 时 ElMessage.error 并 reject
401 处理	清 token，跳转登录

API 模块划分

文件	接口
api/auth.ts	登录、注册、验证码
api/user.ts	用户信息、用户管理

页面只 import 这些函数，不直接写 axios，便于统一改 URL 与错误处理。

ECharts 图表

是什么

Apache ECharts 是浏览器端图表库，适合折线图、柱状图、饼图、地图等数据可视化。脚手架 package.json 已依赖 echarts，业务首页可按需引入。

基本用法

<template>
  <div ref="chartRef" style="width: 100%; height: 400px"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref<HTMLDivElement>()
let chart: echarts.ECharts | null = null

onMounted(() => {
  if (!chartRef.value) return
  chart = echarts.init(chartRef.value)
  chart.setOption({
    title: { text: '示例' },
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    yAxis: { type: 'value' },
    series: [{ data: [120, 200, 150], type: 'bar' }]
  })
})

onUnmounted(() => {
  chart?.dispose()
})
</script>

与后端联调

图表数据通常来自后端统计接口，在 onMounted 中先 await fetchStats()，再 setOption。大数据量时注意分页聚合，不要一次拉取过多原始记录在前端计算。

登录页综合示例（串联）

1. el-form 收集用户名密码。
2. CaptchaInput 组件展示验证码并 v-model 验证码输入。
3. 点击登录调用 login()（api/auth.ts）。
4. request 拦截器不带 token；响应成功后 userStore.setToken。
5. router.push('/') 进入 MainLayout。
6. 首页可从 API 拉数据，用 ECharts 展示统计（自行扩展）。

与 luote 脚手架的关系

文件	说明
src/main.ts	注册 Element Plus
src/api/request.ts	Axios 核心封装
src/view/login/index.vue	表单 + API + 路由跳转
package.json	element-plus、axios、echarts 依赖

下一步

前后端零基础主线已学完，建议：

1. 快速开始 创建并运行项目
2. 实战：新增模块 完整走一遍 CRUD
3. 注意事项与踩坑 查阅常见问题

返回目录：零基础学习路线