开源项目 `ant-design-vue-jeecg` 使用教程

最新推荐文章于 2024-09-03 07:09:05 发布

杜璟轶Freda

最新推荐文章于 2024-09-03 07:09:05 发布

阅读量399

点赞数 4

本文链接：https://blog.csdn.net/gitblog_01089/article/details/141010957

版权

开源项目 `ant-design-vue-jeecg` 使用教程

ant-design-vue-jeecgJeecgBoot—Vue2版前端源码，基于 Vue2+AntDesignVue 实现的 Ant Design Pro，提供强大代码生成器的低代码平台。前端页面代码和后端功能代码一键生成，不需要写任何代码，保持jeecg一贯的强大！！项目地址:https://gitcode.com/gh_mirrors/an/ant-design-vue-jeecg

1. 项目的目录结构及介绍

ant-design-vue-jeecg 是一个基于 Vue2 和 Ant Design Vue 实现的低代码平台前端项目。以下是该项目的目录结构及其介绍：

ant-design-vue-jeecg/
├── public/                  # 公共资源文件
│   ├── index.html           # 主页面模板
│   └── ...
├── src/                     # 源代码目录
│   ├── assets/              # 静态资源文件
│   ├── components/          # Vue 组件
│   ├── config/              # 配置文件
│   ├── layouts/             # 页面布局组件
│   ├── locales/             # 国际化文件
│   ├── pages/               # 页面组件
│   ├── router/              # 路由配置
│   ├── store/               # Vuex 状态管理
│   ├── utils/               # 工具函数
│   ├── App.vue              # 根组件
│   └── main.js              # 入口文件
├── .gitignore               # Git 忽略文件配置
├── babel.config.js          # Babel 配置文件
├── package.json             # 项目依赖和脚本配置
├── vue.config.js            # Vue CLI 配置文件
└── README.md                # 项目说明文档

2. 项目的启动文件介绍

项目的启动文件是 src/main.js，它是整个应用的入口点。以下是 main.js 的主要内容和功能：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './config/axiosConfig';
import './config/antdConfig';
import './assets/styles/index.less';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

import Vue from 'vue'：引入 Vue 框架。
import App from './App.vue'：引入根组件 App.vue。
import router from './router'：引入路由配置。
import store from './store'：引入 Vuex 状态管理配置。
import './config/axiosConfig'：引入 Axios 配置。
import './config/antdConfig'：引入 Ant Design Vue 配置。
import './assets/styles/index.less'：引入全局样式。
new Vue({...}).$mount('#app')：创建 Vue 实例并挂载到 DOM 元素 #app 上。

3. 项目的配置文件介绍

项目的配置文件主要位于 src/config 目录下，以下是几个关键配置文件的介绍：

`src/config/axiosConfig.js`

该文件用于配置 Axios，包括设置请求的基地址、请求拦截器和响应拦截器等。

import axios from 'axios';
import { message } from 'ant-design-vue';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
});

service.interceptors.request.use(
  config => {
    // 请求前的处理
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  response => {
    // 响应数据处理
    const res = response.data;
    if (res.code !== 200) {
      message.error(res.message || 'Error');
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    // 响应错误处理
    message.error(error.message || 'Error');
    return Promise.reject(error);
  }
);

export default service;