手动搭建vue2项目结构-CSDN博客

本文链接：https://blog.csdn.net/weixin_42150719/article/details/126778033

本文介绍了如何从零开始手动搭建一个vue2项目，包括初始化项目、删除默认视图文件、移除多余路由、创建config目录用于配置以及建立api文件夹以组织请求逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2项目搭建结构

文章目录

vue2项目搭建结构
从0到1 自己搭建vue项目骨架
一、vue2项目搭建结构

从0到1 自己搭建vue项目骨架

自己在vue开发过程中，熟悉开发总体架构

一、vue2项目搭建结构

1.初始化项目

可以使用vue ui的工具在图形化界面进行项目的搭建，选择要使用的vuex、vue-router、babel、less、hash等初始化项目结构。
在这里插入图片描述

2.删除不需要的所有的view文件夹的文件，然后删除App.vue 中的文件，如下

在这里插入图片描述

3.删除router/index.js 文件中的路由和引用的组件

在这里插入图片描述

4.创建文件夹config，做地址配置文件

在这里插入图片描述

5.创建api文件夹

建立request.js 文件

import axios from "axios";
import config from "@/config";
import store from "@/store";
import router from "../router"

// 创建 axios 请求实例
const serviceAxios = axios.create({
  baseURL: config.baseURL, // 基础请求地址
  timeout: 10000, // 请求超时设置
  // withCredentials: false, // 跨域请求是否需要携带 cookie
});
console.log("config: ", config);

serviceAxios.interceptors.request.use(
  (config) => {
    if (store.state.token) {
      config.headers["token"] = store.state.token;
    }

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

serviceAxios.interceptors.response.use(
  (res) => {
  if (response.status === 200) {
            if (response.data.code === 200) {
                return Promise.resolve(response.data.data);
            } else if (response.data.code === 403) {
                store.commit("loginOut");
                store.commit('emptyUserInfo')
                router.push('/login')
                return Promise.reject(response.data);
            } else {
                return Promise.reject(response.data);
            }
        } else {
            return Promise.reject({message: "网络错误"});
        }
  },
  (error) => {
    console.log(error);
    return Promise.reject({ message: "网络错误" });
  }
);

export default serviceAxios;

建立index.js 文件

// 导入modules中的模块的api请求；所有模板的请求数据
export * from "@/modules/test.js";

在这里插入图片描述
vue中使用