【亲测免费】 Ant Design Vue 管理后台模板快速入门指南

本文将指导您了解并设置 Ant Design Vue 的管理后台模板，包括项目目录结构、启动文件介绍以及配置文件详解。

1. 项目目录结构及介绍

在开始之前，请确保已正确克隆项目到本地：

git clone https://github.com/nelsonkuang/ant-admin.git
cd ant-admin

以下是基本的项目目录结构：

├── public               # 静态资源文件夹
│   ├── favicon.ico      # 项目图标
│   └── index.html       # 入口HTML文件
├── src                  # 源代码文件夹
│   ├── api               # 接口请求文件
│   ├── assets            # 资源文件（如图片）
│   ├── components        # 自定义组件
│   ├── layouts           # 页面布局
│   ├── models            # 业务模型
│   ├── routes            # 路由配置
│   ├── service            # 服务层，封装通用功能
│   ├── utils             # 工具函数
│   ├── global.less       # 全局样式
│   ├── main.js           # 应用入口文件
│   ├── App.vue           # 主应用组件
└── ...

2. 项目的启动文件介绍

该项目使用npm脚本来管理和启动服务。主要的脚本有：

• npm run serve: 启动开发环境服务器，具有热更新功能。
• npm run build: 打包生产环境代码。
• npm run lint: 运行ESLint检查代码风格。

开发环境下，通过以下命令启动项目：

npm run serve

这将在http://localhost:3000打开浏览器预览页面。

3. 项目的配置文件介绍

• .env.development: 开发环境的配置，用于设置环境变量，如API地址。
• .env.production: 生产环境的配置，类似上文，但适用于部署后的设置。
• vue.config.js: Vue CLI 的自定义配置，用于设置公共路径、代理等。
• package.json: 项目的基本信息和npm脚本，用于安装依赖和执行命令。

例如，在.env.development中，您可以设置开发环境的API基础URL：

VUE_APP_API_BASE_URL=http://localhost:3001/api

如果您需要更改端口号或其他Vue CLI配置，可以在vue.config.js中进行调整：

module.exports = {
  publicPath: './', // 输出的基础路径
  devServer: {
    port: 3001, // 开发服务器端口
    proxy: { // API代理配置
      '/api': {
        target: 'http://localhost:3001',
        pathRewrite: { '^/api': '' },
        changeOrigin: true,
      },
    },
  },
};

至此，您已经对Ant Design Vue管理后台模板有了初步的了解。现在可以基于这个框架开始搭建自己的企业级应用了。祝您好运！