相信大家都对前端的手脚架有所了解吧 下面我会分别说说我对项目结构的理解 首先先上图
在这里我只介绍src目录下的文件 首先说明一下 这是vite加vue3创建了项目目录
1.apis
apis目录下 放的是后端接口的地址 方便接口管理 我个人比较喜欢在此目录下创建一个js文件 作为接口总的管理
文件模板如下
/* eslint-disable max-params */
import axios from 'axios';
import { message } from 'antd';
// 接口地址
const PREFIX = '/api';
const instance = axios.create({
baseURL: PREFIX,
});
// 封装接口
export const request = (url, method, data = {}, disableErrorTip = false) => {
return new Promise((resolve, reject) => {
instance
.request({
url,
method,
data,
withCredentials: true,
})
.then((res) => {
resolve(res.data);
})
.catch((err) => {
if (disableErrorTip) {
reject(err);
} else {
message.open({
type: 'error',
content:
err?.response?.data?.message || '服务器内部错误，请稍后再试',
});
}
});
});
};
// 接口路径
export const URL = {
login: '/user/login',
};
2 assets
这部分没什么好说的 就是放静态资源的 比如图片 字体图标等
3 components
components这个文件夹是重点 ！！！
这里是放一下公共组件的 例如导航栏 这里要记住 拆分组件的方法 方法如下
遵循这个规则来拆分组件 然后看公共的部分就可以放在components里面
4 router stores styles
这三个就没什么好说的
- router 路由文件夹 放一个index.js作为路由文件
- styles 公共样式文件夹 可有可无
- stores 存放vuex 或者pinia 可以分可以合 看需求
5 utils
放一些工具函数
6 directive
全局指令文件夹 这样减少main.js 文件的代码量
7 composables
组合函数文件夹
8 views
页面文件夹 一般一个页面一个文件夹 文件夹下面 会创建一个components组件文件夹 专门存放该页面的相关组件 遵循一个就近原则 举个例子
虽然我举例图中的文件很少 但是足以来说明问题
首先home是首页 car是购物车页面
我在首页中要用一个独有的弹窗 别的地方没有 这种情况就可以按照就近原则来创建一个components文件夹 在里面创建弹窗组件
再例如 购物车里面的列表 也是购物车独有的 所以还是按照就近原则来创建组件
以此 src的目录我已经介绍完毕了 如果有错误的地方 希望大家指点一二
