前端项目目录结构全解析
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项目目录结构
├── 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 公共目录
微前端项目目录结构
