前端项目目录结构全解析

html5-boilerplate

复制代码
项目根目录/
├── css/                # 样式表目录
│   └── style.css       # 主样式文件
├── doc/                # 文档目录
├── img/                # 图片资源目录
├── js/                 # JavaScript目录
│   ├── app.js          # 主JS文件
│   └── vendor/         # 第三方库目录
├── .editorconfig       # 编辑器配置
├── 404.html            # 404错误页面
├── favicon.ico         # 网站图标
├── icon.png            # PNG格式图标
├── icon.svg            # SVG格式图标
├── index.html          # 首页模板
├── package.json        # 项目配置文件
├── robots.txt          # 搜索引擎爬虫指令
├── site.webmanifest    # PWA配置文件
└── webpack配置文件     # 构建工具配置

VueCMF项目目录结构

text 复制代码
├── node_modules                    # 依赖包所在目录
├── public                          # 项目首页及静态资源所在目录
├── src                             # 项目源码所在目录
|   ├── assets                      # 样式文件目录
|   ├── components                  # 组件目录
|   ├── model                       # 模型层文件目录
|   ├── router                      # 路由配置目录
|   ├── service                     # 服务层文件目录
|   ├── store                       # 状态管理配置目录
|   ├── typings                     # TypeScript类型配置目录
|   ├── views                       # 视图层文件目录
|   ├── App.vue                     # 模板首页
|   ├── main.ts                     # 项目入口文件
|   ├── registerServiceWorker.ts    # 资源缓存服务文件
|   └── shims-vue.d.ts              # TypeScript的.vue的适配定义文件
├── .browserslistrc                 # 浏览器兼容配置文件
├── .env.development                # 开发环境的后端API配置
├── .env.production                 # 生产环境的后端API配置
├── .env.test                       # 测试环境的后端API配置
├── .eslintignore                   # 代码规范检测忽略文件配置
├── .eslintrc.js                    # 代码规范检测配置
├── .gitignore                      # git忽略文件配置
├── auto-imports.d.ts               # 组件自动导入配置
├── babel.config.js                 # babel插件配置
├── components.d.ts                 # 组件自动导入配置
├── package.json                    # 项目依赖包配置
├── README.md                       # 使用说明文档
├── tsconfig.json                   # TypeScript配置
└── vue.config.js                   # webpack配置

vue项目目录结构

apis 写接口请求目录

assets 放静态资源目录

components 可复用组件目录

​ SvgIcon svg组件

​ Breadcrumb 面包屑导航组件

​ Hamburger 可点击的汉堡菜单图标组件

​ index.js 把components中的所有组件都进行全局化注册

icons 图标目录

​ svg svg图片目录

​ index.js 全局注册图标组件

composables 封装可复用的逻辑功能目录

​ useCountDown.js 封装倒计时逻辑

directives 全局自定义指令目录

router 路由目录

stores 状态管理目录

​ modules

​ getters.js

​ index.js 导入modules下的模块,统一导出

utils 工具目录

​ auth.js 封装cookie/token相关

​ request.js 封装axios

​ validate.js 封装校验

layout 布局目录

​ components 组件目录

​ sidebar 侧边栏目录

​ Navbar.vue 头部导航组件

​ AppMain.vue 主体内容组件

​ index.js 导出components下的组件

​ mixin 目录

​ index.vue 导入components/index.js导出的组件

views 视图目录

styles 样式目录

​ element

​ index.scss 覆盖默认主题变量文件默认的颜色配置

​ element-ui.scss 重写饿了么ui样式

​ common.scss 公共样式/浏览器默认样式重置

​ var.scss/variables.scss 全局变量

​ index.scss 样式入口/浏览器默认样式重置

​ mixin.scss CSS混入

​ sidebar.scss 侧边栏

​ transition.scss 动画

App.vue 一级路由出口组件

main.js 程序入口

settings.js 配置

permission.js 路由守卫权限相关

tests 测试目录

mock 接口模拟目录

public 公共目录

微前端项目目录结构

相关推荐
于慨1 天前
Lambda 表达式、方法引用(Method Reference)语法
java·前端·servlet
石小石Orz1 天前
油猴脚本实现生产环境加载本地qiankun子应用
前端·架构
从前慢丶1 天前
前端交互规范(Web 端)
前端
像我这样帅的人丶你还1 天前
别再让JS耽误你进步了。
css·vue.js
@yanyu6661 天前
07-引入element布局及spring boot完善后端
javascript·vue.js·spring boot
CHU7290351 天前
便捷约玩,沉浸推理:线上剧本杀APP功能版块设计详解
前端·小程序
GISer_Jing1 天前
Page-agent MCP结构
前端·人工智能
王霸天1 天前
💥别再抄网上的Scale缩放代码了!50行源码教你写一个永不翻车的大屏适配
前端·vue.js·数据可视化
小领航1 天前
用 Three.js + Vue 3 打造炫酷的 3D 行政地图可视化组件
前端·github
@大迁世界1 天前
2026年React大洗牌:React Hooks 将迎来重大升级
前端·javascript·react.js·前端框架·ecmascript