前端项目目录结构全解析

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 公共目录

微前端项目目录结构

相关推荐
敲代码的玉米C14 分钟前
我修的那个 bug,制造了另一个 bug
前端·人工智能·架构
gis开发之家23 分钟前
《Vue3 从入门到大神50篇》Vue3 源码详解(二十):生命周期钩子源码解析 —— onMounted / onUpdated 如何实现?
前端·javascript·前端框架·vue3·vue3源码
Narrastory26 分钟前
我用 Claude Code 写代码不到 2 小时,却花了 3 天做完这个软件—Vibe Coding 的正确姿势,是设计不是生成
前端·人工智能·github
Enaium27 分钟前
我实现了KMP的SDL绑定并编写了高性能软光追
前端·kotlin
古夕32 分钟前
本地正常线上白屏:一次路由切换后刷新恢复问题的排查与修复
前端·ai编程
栀鸢ouo38 分钟前
解决Element Plus表格展开行横向溢出、滚动截断问题(项目实战方案)
前端·vue.js
用户390513321928843 分钟前
写了5年JS,才发现这10个方法能少写一半代码
前端
平凡的阿泽43 分钟前
我用TRAE Work手搓了一个「谁是卧底」小游戏
前端·javascript
一心只读圣贤书1 小时前
AI 辅助前端视觉回归治理:从截图基线到变更解释
前端·人工智能
嘟嘟07171 小时前
用单例模式管理弹窗:从一段原生 JS 理解 Singlet
前端·javascript·代码规范