Vue-Element-Admin快速上手指南

以下是使用vue-admin-element的详细操作步骤（基于最新版本）：

1.环境准备

• 安装 Node.js（建议版本 ≥14.x）
• 安装包管理工具：

  npm install -g yarn # 推荐使用 yarn

2.项目初始化

# 克隆模板仓库 git clone https://github.com/PanJiaChen/vue-admin-template.git cd vue-admin-template # 安装依赖 yarn # 或 npm install

3.启动开发环境

yarn dev # 或 npm run dev

浏览器访问：http://localhost:8080

4.核心功能操作

路由配置

修改src/router/index.js：

{ path: '/custom', component: Layout, children: [{ path: 'page', name: 'CustomPage', component: () => import('@/views/custom/index.vue'), meta: { title: '自定义页面' } }] }

API 请求

在src/api/下新建模块：

import request from '@/utils/request' export function fetchData(params) { return request({ url: '/api/data', method: 'get', params }) }

页面开发

在src/views/创建 Vue 组件：

<template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello World' } } } </script>

5.构建生产环境

yarn build # 或 npm run build

生成文件位于dist/目录

6.自定义主题

修改src/styles/variables.scss：

$--color-primary: #FF6A00; // 更改主色调 $--menu-background: #304156; // 菜单背景色

7.调试技巧

• 使用 Vue Devtools 检查组件状态
• 在vue.config.js中配置代理解决跨域：

  devServer: { proxy: { '/api': { target: 'http://your-backend.com', changeOrigin: true } } }

注意事项

1. 数据模拟：开发阶段可使用src/mock/下的模拟数据
2. 权限控制：通过src/permission.js实现路由守卫
3. 图标扩展：在src/icons/svg/添加自定义 SVG 图标

提示：建议定期同步官方更新，通过git pull获取最新优化。完整文档参考：vue-element-admin 文档