# vue3-antd-admin

**Repository Path**: zerobit/vue3-antd-admin

## Basic Information

- **Project Name**: vue3-antd-admin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-17
- **Last Updated**: 2025-08-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-adnt-admin

Vue3 + Vie + Ant Design Vue + Vue Router + Pina

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

## Customize configuration

See [Vite Configuration Reference](https://vite.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Compile and Minify for Production

```sh
npm run build
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```



# 一、搭建工程

## 开发工具

- nodes 20+
- IntelliJIDEA



## npm配置国内源

```bash
npm config set registry https://registry.npmmirror.com
```



## 使用Vue3搭建前端工程

- 官网：https://cn.vuejs.org/guide/quick-start.html

- 搭建工程：

  ```bash
  $ npm create vue@latest
  ```

  ![image-20250617224842056](./assets/image-20250617224842056.png)
  
- 安装`scss`依赖：

  ```bash
  npm install -D sass-embedded
  ```




# 二、集成Ant Design Vue

- 官网：https://www.antdv.com/docs/vue/introduce-cn/



## 使用Antd

- 安装
  ```bash
  npm i --save ant-design-vue@4.x
  // 图标组件
  npm install --save @ant-design/icons-vue
  ```

- 全局完整注册
  ```js
  import { createApp } from 'vue';
  import Antd from 'ant-design-vue';
  import App from './App';
  import 'ant-design-vue/dist/reset.css';
  
  const app = createApp(App);
  
  app.use(Antd).mount('#app');
  ```

- 图标组件的使用

  ```vue
  import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';
  
  <star-outlined />
  <star-filled />
  <star-two-tone two-tone-color="#eb2f96" />
  ```



# 三、前端项目配置

- 解决问题

  1. 配置路径别名
  2. 反向代理解决跨域问题
  3. 配置项目运行端口
  4. 环境变量

- 项目环境变量

  项目根目录`.env.dev`文件(如无则新建)，表示开发环境，配置示例如下：

  ```
  # 开发环境
  NODE_ENV='dev'
  
  # 为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。
  # js中通过`import.meta.env.VITE_APP_BASE_API`取值
  VITE_APP_PORT = 8002
  VITE_APP_BASE_API = '/dev-api'
  VITE_APP_BASE_FILE_API = '/dev-api/web/api/system/file/upload'
  
  # 后端服务地址
  VITE_APP_SERVICE_API = 'http://127.0.0.1:8001'
  ```

- 修改`package.json`文件在项目运行时使用环境变量

  ```json
    "scripts": {
      "dev": "vite --mode dev",
      "build": "vite build --mode prod",
      "prod": "vite --mode prod",
      "lint": "eslint . --fix",
      "format": "prettier --write src/"
    },
  ```

- 安装依赖用于获取Node.js的全局变量

  ```bash
  npm install vite-plugin-static-copy --save-dev
  ```

- `vit.config.js`中进行配置环境

  ```js
  import { fileURLToPath, URL } from 'node:url'
  
  import { defineConfig, loadEnv } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import vueDevTools from 'vite-plugin-vue-devtools'
  import { viteStaticCopy } from 'vite-plugin-static-copy'
  
  // https://vite.dev/config/
  export default defineConfig(({ mode }) => {
    // 获取`.env`环境配置文件
    // eslint-disable-next-line no-undef
    const env = loadEnv(mode, process.cwd())
    return {
      define: {
        'process.env': {}
      },
      plugins: [
        vue(),
        vueDevTools(),
        viteStaticCopy({
          targets: [
            {
              src: '.env*',
              dest: ''
            }
          ]
        })
      ],
      resolve: {
        // 路径别名配置
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        },
      },
      css: {
        preprocessorOptions: {
          less: {
            javascriptEnabled: true,
            modifyVars: {
              'primary-color': '#1890ff',
            },
          },
        },
      },
      server: {
        host: '0.0.0.0',
        port: Number(env.VITE_APP_PORT),
        proxy: {
          [env.VITE_APP_BASE_API]: {
            target: env.VITE_APP_SERVICE_API,
            changeOrigin: true,
            rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), ''),
          },
        },
      },
    }
  })
  
  ```



# 四、整合Axios

1. 安装依赖

   ```bash
   npm install axios
   ```

2. 导入全局变量：`main.js`

   ```js
   import axios from 'axios'
   app.config.globalProperties.$axios = axios
   ```

3. 配置跨域

   在`vite.config.js`配置文件中添加如下config

   ```js
     server: {
       proxy: {
         // 带选项写法：
         '/api': {
           target: 'http://127.0.0.1:8800', // 后端请求地址
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
         },
       },
     },
   ```

4. 封装axios请求，新建 `utils/request.js`工具类

   ```js
   import axios from 'axios'
   // 导入antd的message组件做为信息提示
   import { message } from 'ant-design-vue'
   
   // 创建axios实例
   const ajax = axios.create({
     baseURL: import.meta.env.VITE_APP_BASE_API,
     timeout: 10000, // 请求超时时间：10s
     headers: { 'Content-Type': 'application/json;charset=utf-8' },
   })
   
   // 添加请求拦截器
   ajax.interceptors.request.use(
     function (config) {
       // 在发送请求之前做些什么
       return config
     },
     function (error) {
       // 对请求错误做些什么
       return Promise.reject(error)
     },
   )
   
   // 添加响应拦截器
   ajax.interceptors.response.use(
     function (response) {
       // 2xx 范围内的状态码都会触发该函数。
       // 对响应数据做点什么
       let res = response.data
       if (typeof res === 'string') {
         res = res ? JSON.parse(res) : res
       }
       return res
     },
     function (error) {
       // 超出 2xx 范围的状态码都会触发该函数。
       // 对响应错误做点什么
       message.error('服务器请求失败！' + error)
       return Promise.reject(error)
     },
   )
   
   export default ajax
   
   ```

5. 模块化api使用示例

   - 登录功能模块：`api/login/index.js`

     ```js
     import ajax from '@/utils/request'
     
     /**
      * 获取验证码
      *
      * @returns {Promise<any>} 返回一个Promise对象，该对象在成功时解析为验证码数据
      */
     const getCaptcha = () => {
       return ajax.get('/captcha')
     }
     
     export { getCaptcha }
     ```

   - 在vue组件中使用

     ```js
     import { getCaptcha } from '@/api/login'
     
     // 获取验证码图片
     const loadCaptcha = () => {
       getCaptcha().then((res) => {
         codeUrl.value = res.data
       })
     }
     ```