前端项目目录结构全解析

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 小时前
从 Navigation State 反推架构腐化
前端·架构·react
前端程序猿之路2 小时前
Next.js 入门指南 - 从 Vue 角度的理解
前端·vue.js·语言模型·ai编程·入门·next.js·deepseek
大布布将军2 小时前
⚡️ 深入数据之海:SQL 基础与 ORM 的应用
前端·数据库·经验分享·sql·程序人生·面试·改行学it
川贝枇杷膏cbppg2 小时前
Redis 的 RDB 持久化
前端·redis·bootstrap
D_C_tyu3 小时前
Vue3 + Element Plus | el-table 表格获取排序后的数据
javascript·vue.js·elementui
JIngJaneIL3 小时前
基于java+ vue农产投入线上管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
天外天-亮3 小时前
v-if、v-show、display: none、visibility: hidden区别
前端·javascript·html
jump_jump3 小时前
手写一个 Askama 模板压缩工具
前端·性能优化·rust
hellotutu3 小时前
vue2 从 sessionStorage 手动取 token 后,手动加入到 header
vue.js·token·session·header
be or not to be3 小时前
HTML入门系列:从图片到表单,再到音视频的完整实践
前端·html·音视频