设计一套前端项目组织结构

⭐️ 本文首发自 前端修罗场(点击加入)，是一个由 资深开发者 独立运行 的专业技术社区，我专注 Web 技术、Web3、区块链、答疑解惑、面试辅导以及职业发展。博主创作的 《前端面试复习笔记》（点击订阅），广受好评，已帮助多人提升实力、拿到 offer。现在订阅，私聊我即可获取一次免费的模拟面试机会，帮你评估知识点的掌握程度，获得更全面的学习指导意见！

public

components 组件目录

conponents目录存放组件，子文件夹名称按组件名称命名，组件包含的js\css\html文件同样要使用组件名命名

示例

• components/header:头部组件，包含头部组件使用到的header.js\header.css\header.html文件，使用组件时，只需加载该header.html文件

pages 页面目录

pages存放每个页面，子文件夹使用页面名称命名，其中包含该页使用到的js\css\html文件.

示例

• pages/index:表示首页，index目录下存放首页使用到的文件，文件命名和目录名称一致；

plugins 外部插件

plugins 存放从外部引入的插件，如bootstrap.js\bootstrap.css

示例

• plugins/bootstrap:表示存放bootstrap插件的目录，目录下存放bootstrap的文件

public 公共静态资源

public 存放页面使用的公共静态文件或是插件需要依赖的javascript库\css库，以及图片资源、字体文件；

示例

• public/javascript:表示存放公共的js文件，如jquery.js;
• public/stylesheets:表示存放公共的css文件，如common.css

bulid 构建目录

bulid 是使用构建工具(gulp\fis3等)打包生成后的目录

README.md 项目说明

在readme.md中描述项目的组织结构，项目用途等说明