# vue3-antd-frontend

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

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-13
- **Last Updated**: 2025-06-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-antd-frontend

- 技术架构：Vue 3 + Vite + Vue-Router + Pinia + Ant Desing Vue.

## 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
```



---

# 一、创建项目

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

![image-20250613211503083](./assets/image-20250613211503083.png)



# 二、整合ant design vue

- 安装依赖

  ```bash
  npm i --save ant-design-vue@4.x
  npm install --save @ant-design/icons-vue // 图
  ```

- 全局注册：`main.js`

  ```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');
  ```



# 三、插件安装与配置

1. VSCode安装开启`volar`，禁用`Vetur`

2. 安装`ESLint`插件

   ![image-20250613214714598](./assets/image-20250613214714598.png)

   VSCode左下角点`设置`->`扩展`->`ESLint`->`Eslint > Format: Enable`

3. VSCode左下角点`设置`输入`onsave`勾选`Format On Save`

4. 安装`scss`依赖：

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

   

# 四、整合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/, ''),
         },
       },
     },
   ```

   

# 五、Vite项目配置

- 解决问题

  1. 配置路径别名
  2. 反向代理解决跨域问题
  3. 配置项目运行端口
  4. 环境变量
  5. 解决 `import { ref , reactive ..... } from 'vue'` 大量引入的问题

- 安装所需要依赖

  ```bash
  // 解决 `import { ref , reactive ..... } from 'vue'` 大量引入的问题
  npm i -D unplugin-auto-import
  ```

- 项目环境变量

  项目根目录`.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 AutoImport from 'unplugin-auto-import/vite'
  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(),
        // 解决 `import { ref , reactive ..... } from 'vue'` 大量引入的问题
        AutoImport({
          imports: ['vue', 'vue-router'],
        }),
        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), ''),
          },
        },
      },
    }
  })
  
  ```



# 六、Mixin混入

全局混入是一种在多个组件中共享相同逻辑的方式，可以将一些通用的方法、生命周期钩子等混入到所有页面和组件中，以简化代码的编写和维护。

> 相当于后端提取公共属性、方法为一个工具类

- 创建公共方法`utils/mixin.js`，示例如下

  ```js
  import { message } from 'ant-design-vue'
  
  export default {
    data () {
      return {
        // 状态列表
        statusList: [
          { name: '停用', value: 0 },
          { name: '正常', value: 1 },
        ],
        // 登录状态
        loginStatus: [
          { name: '成功', value: 0 },
          { name: '失败', value: 1 },
        ],
        // 菜单类型
        menuType: [
          { name: '菜单', value: 1 },
          { name: '按钮', value: 2 },
        ],
        // 操作类型
        operatorType: [
          { name: '其它', value: 0 },
          { name: '后台用户', value: 1 },
          { name: '手机端用户', value: 2 },
        ],
      }
    },
    methods: {
      /**
       * 显示成功通知并执行回调函数
       *
       * @param {string} [msg] - 成功消息内容，如果未提供则默认显示'操作成功！'
       * @param {Function} callback - 通知关闭时执行的回调函数
       */
      submitOk (msg, callback) {
        message.success(msg || '操作成功！', 3, callback)
      },
  
      /**
       * 提交失败的处理函数
       *
       * @param {string} msg - 提示信息，如果为空则使用默认提示信息
       * @param {Function} callback - 回调函数
       */
      submitFail (msg, callback) {
        message.error(msg || '操作失败！', 3, callback)
      },
    },
  }
  
  ```

- 全局混入

  修改`src/main.js`加入如下代码

  ```js
  // 混入 -- 抽取公用的实例（操作成功与失败消息提醒内容等）
  import mixin from '@/utils/mixin';
  app.mixin(mixin);
  ```

- 使用示例

  ```vue
  <template>
    <h1>{{ sexList }}</h1>
    <button @click="handleClick">click</button>
  </template>
  
  <script setup>
  import { getCurrentInstance } from 'vue';
  const { proxy } = getCurrentInstance();
  
  async function handleClick() {
    proxy.submitOk('保存成功');
    proxy.submitFail('操作失败');
  }
  </script>
  ```

  

# 七、全局过滤器

当后端返回的数据格式不是前端想要的时候，可以将返回的数据处理成自己需要的格式

- 创建过滤器`utils/filters.js`

  ```js
  export const filters = {
    // 获取状态列表值
    getStatus: (val) => {
      // eslint-disable-next-line no-undef
      const { proxy } = getCurrentInstance()
      // 拿到mixin混入的属性值
      let result = proxy.statusList.find((obj) => obj.value === val)
      return result ? result.name : '数据丢失'
    },
  }
  
  ```
  
- 全局加入过滤器

  修改`src/main.js`加入如下代码

  ```js
  // 全局过滤器
  import { filters } from '@/utils/filters.js';
  app.config.globalProperties.$filters = filters;
  ```

- 使用示例

  ```vue
  <template>
    <h1>{{ proxy.$filters.getStatus(1) }}</h1>
  </template>
  
  <script setup>
  import { getCurrentInstance } from 'vue';
  const { proxy } = getCurrentInstance();
  </script>
  ```

  

# 八、封装Axios的api请求

- 封装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 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response.data
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    message.error("服务器请求失败！" + error)
    return Promise.reject(error)
  })
  
  export default ajax
  ```

- 模块化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
      })
    }
    ```