前端项目目录结构全解析

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

微前端项目目录结构

相关推荐
咫尺的梦想0072 小时前
vue的生命周期
前端·javascript·vue.js
一口甜西瓜2 小时前
nuxt2.x部署到linux
前端·nuxt.js
Data_Adventure2 小时前
从 TypeScript 到 Java(2):从脚本执行到 main 方法 —— 理解 Java 的程序入口
前端·后端
Data_Adventure2 小时前
从 TypeScript 到 Java(1):理解类与包结构
前端·后端
Jseeza2 小时前
从零理解React Context:神奇的上下文机制
前端
Android疑难杂症2 小时前
一文讲透鸿蒙开发应用框架体系
前端·harmonyos
代码搬运媛2 小时前
前端使用 docx-preview 实现word解析实战
前端
有点笨的蛋2 小时前
JavaScript Promise 机制解析
前端·javascript
Qiuner3 小时前
2025汉化idea创建JSP项目
前端·tomcat·firefox·idea·jsp