Vue-Element-Admin快速上手指南

cch89182026-04-08 13:44

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

1. 环境准备

安装 Node.js（建议版本 ≥14.x）
安装包管理工具：
bash 复制代码
```
npm install -g yarn # 推荐使用 yarn
```

2. 项目初始化

bash 复制代码

# 克隆模板仓库
git clone https://github.com/PanJiaChen/vue-admin-template.git
cd vue-admin-template

# 安装依赖
yarn # 或 npm install

3. 启动开发环境

bash 复制代码

yarn dev # 或 npm run dev

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

4. 核心功能操作

路由配置

修改 src/router/index.js：

javascript 复制代码

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

API 请求

在 src/api/ 下新建模块：

javascript 复制代码

import request from '@/utils/request'

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

页面开发

在 src/views/ 创建 Vue 组件：

vue 复制代码

<template>
  <div>{{ message }}</div>
</template>

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

5. 构建生产环境

bash 复制代码

yarn build # 或 npm run build

生成文件位于 dist/ 目录

6. 自定义主题

修改 src/styles/variables.scss：

scss 复制代码

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

7. 调试技巧

使用 Vue Devtools 检查组件状态

在 vue.config.js 中配置代理解决跨域：

javascript 复制代码

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

注意事项

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

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