前端项目目录结构全解析

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

微前端项目目录结构

相关推荐
guxuehua11 小时前
Monorepo Beta 版本发布问题排查与解决方案
前端
猫头虎-前端技术11 小时前
小白也能做AI产品?我用 MateChat 给学生做了一个会“拍照解题 + 分步教学”的AI智能老师
前端·javascript·vue.js·前端框架·ecmascript·devui·matechat
b***666111 小时前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
栀秋66611 小时前
ES6+新增语法特性:重塑JavaScript的开发范式
前端·javascript
爱分享的鱼鱼11 小时前
Vue动态路由详解:从基础到实践
前端
未来之窗软件服务11 小时前
幽冥大陆(三十七)文件系统路径格式化——东方仙盟筑基期
前端·javascript·文件系统·仙盟创梦ide·东方仙盟
维维酱11 小时前
Vite 构建中的两个典型问题:代码分割命名与循环依赖
前端
VaJoy11 小时前
Cocos Creator Shader 入门 (21) —— 高斯模糊的高性能实现
前端·cocos creator
前端加油站11 小时前
使劲折腾Element Plus的Table组件
前端·javascript·vue.js
ze_juejin11 小时前
Angular的Service创建多个实例的总结
前端