学习目标

在这里，你将系统学习了解 Ant Design Vue 脚手架的相关知识

我们将以最简单直接的方式为您呈现内容！

🔥 推荐阅读：浴火重生：从挫败到成功，前端框架的疑难杂症解决之道 - Memory's blog (gitee.io) (opens new window)

🍚 简介

想要深入学习 Ant Design Vue 脚手架，可以跳转至官网学习：

🍗 官网地址：开始使用 - Ant Design Vue (opens new window)

当然，在使用 Ant Design Vue、Ant Design Pro和Vite 等前端框架的过程中，我也积累了诸多经验技巧和踩坑经历，这些内容均记录在了我的个人博客当中。

有兴趣的朋友，可以点击此处跳转学习：前端框架踩坑与技巧总结：Ant Design、Vite，助您无忧编程 (opens new window)，希望对您的学习有帮助！

🍜 快速搭建

框架初始化

• 在任意目录下执行以下命令，快速安装脚手架工具：

npm install -g @vue/cli
OR
yarn global add @vue/cli

• 执行以下命令，一键初始化 Ant Design Vue 项目：

vue create antd-demo  #项目名

-按需选择，按我那样的设置就行，引入 TS、Router 等

• 注意这里同意保存预设的话，之后构建项目就会按照这次的配置直接构建了，如果要修改项目构建配置，则需执行以下代码：

npm uninstall -g @vue/cli

• 然后执行以下命令，重新构建项目

npx @vue/cli create antd-demo	#在临时目录中执行 @vue/cli 命令，而不依赖于全局路径设置

引入 Ant Design 组件

• 在构建完成的 Ant Design Vue 项目目录下，执行以下命令，引入组件：

npm i --save ant-design-vue

• 在 main.ts 文件中按如下配置，引入 Ant Design Vue 组件库：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Antd from "ant-design-vue";

createApp(App).use(router).use(Antd).mount("#app");

• 执行以下命令，启动项目：

npm run serve

配置路由

• 初始化 route.ts 文件，在 route.ts 文件中编写如下代码：

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "index",
    component: IndexPage,
  },
  {
    path: "/about",
    name: "about",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
];

封装全局 axios

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:8102/api",
  timeout: 10000,
  headers: {},
});

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    const data = response.data;
    if (data.code === 0) {
      return data.data;
    }
    console.error("request error", data);
    return response.data;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default instance;