一、先创建项目并进行一些安装配置
1、npm create vite@latest ->输入项目名称->选择vue->选择ts->根据提示进行
2、安装vue-router，输入命令npm install vue-router@4 -s
3、安装element-plus，输入命令npm install element-plus -s / npm install ant-design-vue --save
4、安装less，输入命令npm install less -s
5、安装icons，输入命令npm install @element-plus/icons-vue -s / npm install @ant-design/icons-vue --save
6、安装 Axios，输入命令npm install axios --save
7、安装pinia ，输入命令npm install pinia --save
二、进行项目配置
1、配置 Ant Design Vue
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'// 引入 Ant Design Vue
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'// 引入图标
import * as Icons from '@ant-design/icons-vue'const app = createApp(App)// 注册 Ant Design Vue
app.use(Antd)// 注册所有图标
const icons = Icons
for (const i in icons) {app.component(i, icons[i])
}app.use(router)
app.mount('#app')
2、配置 Vite（可选优化）
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],css: {preprocessorOptions: {less: {javascriptEnabled: true,}}},server: {port: 3000,open: true // 自动打开浏览器}
})
3、创建主布局组件
<!-- src/components/layout/MainLayout.vue -->
<template><a-layout class="layout"><!-- 头部导航 --><a-layout-header class="header"><div class="logo"><img src="@/assets/logo.png" alt="Logo" /></div><a-menuv-model:selectedKeys="selectedKeys"theme="dark"mode="horizontal":style="{ lineHeight: '64px' }"><a-menu-item key="home"><router-link to="/">首页</router-link></a-menu-item><a-menu-item key="about"><router-link to="/about">关于我们</router-link></a-menu-item><a-menu-item key="contact"><router-link to="/contact">联系我们</router-link></a-menu-item></a-menu></a-layout-header><!-- 主要内容 --><a-layout-content class="content"><router-view /></a-layout-content><!-- 页脚 --><a-layout-footer class="footer">© 2024 公司名称. All rights reserved.</a-layout-footer></a-layout>
</template><script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'const route = useRoute()
const selectedKeys = ref([route.name])
</script><style scoped>
.layout {min-height: 100vh;
}.header {display: flex;align-items: center;padding: 0 20px;
}.logo {margin-right: 50px;
}.logo img {height: 32px;
}.content {padding: 20px 50px;background: #fff;
}.footer {text-align: center;background: #f0f2f5;
}
</style>
4、配置路由
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import MainLayout from '@/components/layout/MainLayout.vue'const routes = [{path: '/',component: MainLayout,children: [{path: '',name: 'home',component: () => import('@/views/Home.vue')},{path: '/about',name: 'about',component: () => import('@/views/About.vue')},{path: '/contact',name: 'contact',component: () => import('@/views/Contact.vue')}]}
]const router = createRouter({history: createWebHistory(),routes
})export default router
5、创建页面组件
<!-- src/views/Home.vue -->
<template><div class="home"><!-- 轮播图 --><a-carousel arrows autoplay><div v-for="item in carouselItems" :key="item.id"><div class="carousel-item"><img :src="item.image" :alt="item.title" /><div class="carousel-content"><h2>{{ item.title }}</h2><p>{{ item.description }}</p></div></div></div></a-carousel><!-- 产品特色 --><div class="features"><a-row :gutter="[24, 24]"><a-col :xs="24" :sm="12" :md="8" v-for="feature in features" :key="feature.id"><a-card class="feature-card"><template #cover><img :src="feature.icon" :alt="feature.title" /></template><a-card-meta :title="feature.title" :description="feature.description" /></a-card></a-col></a-row></div></div>
</template><script setup>
import { ref } from 'vue'const carouselItems = ref([{id: 1,title: '欢迎来到我们的平台',description: '专业的解决方案，优质的服务体验',image: '/images/banner1.jpg'},{id: 2,title: '创新技术',description: '领先的技术架构，稳定的系统性能',image: '/images/banner2.jpg'}
])const features = ref([{id: 1,title: '高性能',description: '卓越的性能表现，快速响应',icon: '/images/feature1.png'},{id: 2,title: '安全可靠',description: '多重安全保障，数据安全可靠',icon: '/images/feature2.png'},{id: 3,title: '易于使用',description: '简洁直观的操作界面',icon: '/images/feature3.png'}
])
</script><style scoped>
.carousel-item {position: relative;height: 400px;
}.carousel-item img {width: 100%;height: 100%;object-fit: cover;
}.carousel-content {position: absolute;bottom: 50px;left: 50px;color: white;
}.features {margin-top: 50px;
}.feature-card {text-align: center;
}
</style>
6、修改 App.vue
<!-- App.vue -->
<template><div id="app"><router-view /></div>
</template><script setup>
// 这里可以添加全局逻辑
</script><style>
* {margin: 0;padding: 0;box-sizing: border-box;
}#app {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
</style>
7、创建 Axios 实例和拦截器
// src/utils/request.js
import axios from "axios"; import { message } from "ant-design-vue"; import { debounce } from "lodash"// 创建 axios 实例 const service = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,timeout: 20000, });// 请求拦截器 service.interceptors.request.use((config) => {// const token = localStorage.getItem("token");const token = sessionStorage.getItem("token");if (token) {config.headers["Authorization"] = `Bearer ${token}`;}return config;},(error) => Promise.reject(error), );// 响应拦截器 service.interceptors.response.use((response) => {const res = response.data;const isUploadApi = response.config?.url?.includes("upload");if (res.code === 401) {localStorage.clear();
message.error("请求失败，请稍后重试");
} if (isUploadApi) { return response.data; } if (res.code !== 200&&res.code!==401) { message.error(res.msg || "请求失败"); return Promise.reject(new Error(res.msg || "请求失败")); } return res; }, (error) => { const isUploadApi = error.config?.url?.includes("upload"); if (error.response?.status === 401) { localStorage.clear();
message.error("请求失败，请稍后重试");
} if (!isUploadApi&&error.response?.status !== 401) { message.error("请求失败，请稍后重试"); } return Promise.reject(error); }, ); // 封装请求方法 const createRequest = (method) => { return (url, dataOrParams, customConfig = {}) => { const config = { method, url, ...(method === "get" ? { params: dataOrParams } : { data: dataOrParams }), ...customConfig, }; const { debounce: debounceTime, ...restConfig } = config; if (typeof debounceTime === "number") { let resolvePromise; let rejectPromise; const promise = new Promise((resolve, reject) => { resolvePromise = resolve; rejectPromise = reject; }); const requestFn = () => { try { return service(restConfig) .then(resolvePromise) .catch(rejectPromise); } catch (err) { rejectPromise(err); } }; const debouncedRequest = debounce(requestFn, debounceTime, { leading: false, trailing: true, }); debouncedRequest(); return promise; } return service(config); }; }; // 导出方法（原有逻辑不变） export const get = (url, params, config = {}) => createRequest("get")(url, params, config); export const post = (url, data, config = {}) => createRequest("post")(url, data, config); export const put = (url, data, config = {}) => createRequest("put")(url, data, config); export const del = (url, data, config = {}) => createRequest("delete")(url, data, config); export default service;
8、配置环境变量
// .env.development VITE_API_BASE_URL=http://localhost:3000/api VITE_APP_TITLE=我的网站开发版// .env.production VITE_API_BASE_URL=https://api.yourdomain.com/api VITE_APP_TITLE=我的网站
9、创建 API 接口管理
// src/api/index.js
import { post, get, put, del } from "@/utils/request"; export default { getPolicyList(params) { return get('/policy/getList', params) }, }
10、创建全局状态管理（可选）
// src/store/user.js
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { api } from '@/api'export const useUserStore = defineStore('user', () => {const token = ref(localStorage.getItem('token') || '')const userInfo = ref(null)const permissions = ref([])// 登录const login = async (loginData) => {try {const response = await api.user.login(loginData)token.value = response.data.tokenuserInfo.value = response.data.userInfo// 存储tokenlocalStorage.setItem('token', token.value)return response} catch (error) {throw error}}// 获取用户信息const getUserInfo = async () => {try {const response = await api.user.getInfo()userInfo.value = response.datapermissions.value = response.data.permissions || []return response} catch (error) {throw error}}// 退出登录const logout = async () => {try {await api.user.logout()} catch (error) {console.error('退出登录失败:', error)} finally {token.value = ''userInfo.value = nullpermissions.value = []localStorage.removeItem('token')}}// 检查登录状态const checkAuth = () => {return !!token.value}return {token,userInfo,permissions,login,getUserInfo,logout,checkAuth}
})
11、配置 Pinia（状态管理）
// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'// 引入 Ant Design Vue
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'const app = createApp(App)
const pinia = createPinia()app.use(pinia)
app.use(Antd)
app.use(router)
app.mount('#app')
import axios from "axios";
import { message } from "ant-design-vue";
import { debounce } from "lodash";
// 1. 引入路由实例（若项目路由是单独配置的，需按实际路径引入）
import router from "@/router"; // 通常路由文件在src/router/index.js，根据项目结构调整路径
// 创建 axios 实例
const service = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL,
timeout: 20000,
});
// 请求拦截器（不再处理防抖！）
service.interceptors.request.use(
(config) => {
// const token = localStorage.getItem("token");
const token = sessionStorage.getItem("token");
if (token) {
config.headers["Authorization"] = `Bearer ${token}`;
}
return config;
},
(error) => Promise.reject(error),
);
// 响应拦截器
service.interceptors.response.use(
(response) => {
const res = response.data;
const isUploadApi = response.config?.url?.includes("upload");
// 2. 新增：判断业务码是否为401（若后端401通过data.code返回，走这里）
if (res.code === 401) {
handle401(); // 统一处理401逻辑
// return Promise.reject(new Error(res.msg || "身份已过期，请重新登录"));
}
if (isUploadApi) {
return response.data;
}
if (res.code !== 200&&res.code!==401) {
message.error(res.msg || "请求失败");
return Promise.reject(new Error(res.msg || "请求失败"));
}
return res;
},
(error) => {
const isUploadApi = error.config?.url?.includes("upload");
// 3. 新增：判断HTTP状态码是否为401（若后端401通过HTTP状态码返回，走这里）
if (error.response?.status === 401) {
handle401(); // 统一处理401逻辑
// return Promise.reject(new Error("身份已过期，请重新登录"));
}
if (!isUploadApi&&error.response?.status !== 401) {
message.error("请求失败，请稍后重试");
}
return Promise.reject(error);
},
);
const handle401 = () => {
localStorage.clear();
message.error("请求失败，请稍后重试");
};
// 封装请求方法（原有逻辑不变）
const createRequest = (method) => {
return (url, dataOrParams, customConfig = {}) => {
const config = {
method,
url,
...(method === "get" ? { params: dataOrParams } : { data: dataOrParams }),
...customConfig,
};
const { debounce: debounceTime, ...restConfig } = config;
if (typeof debounceTime === "number") {
let resolvePromise;
let rejectPromise;
const promise = new Promise((resolve, reject) => {
resolvePromise = resolve;
rejectPromise = reject;
});
const requestFn = () => {
try {
return service(restConfig)
.then(resolvePromise)
.catch(rejectPromise);
} catch (err) {
rejectPromise(err);
}
};
const debouncedRequest = debounce(requestFn, debounceTime, {
leading: false,
trailing: true,
});
debouncedRequest();
return promise;
}
return service(config);
};
};
// 导出方法（原有逻辑不变）
export const get = (url, params, config = {}) => createRequest("get")(url, params, config);
export const post = (url, data, config = {}) => createRequest("post")(url, data, config);
export const put = (url, data, config = {}) => createRequest("put")(url, data, config);
export const del = (url, data, config = {}) => createRequest("delete")(url, data, config);
export default service;
