vue3+vite学习日记之配置全新项目

一、先创建项目并进行一些安装配置

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;