Ant Design Vue 脚手架
学习目标
在这里,你将系统学习了解 Ant Design Vue 脚手架
的相关知识
我们将以最简单直接
的方式为您呈现内容!
🔥 推荐阅读:浴火重生:从挫败到成功,前端框架的疑难杂症解决之道 - Memory's blog (gitee.io) (opens new window)
# 🍚 简介
想要深入学习 Ant Design Vue 脚手架,可以跳转至官网学习:
当然,在使用 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;