前端开发文件组织结构

前言

目前前端开发一般遵循MVVM设计模式的组件式开发，除了明确各层之间的职责外，还需规划其各类文件的存放目录。目录设计合理将大幅提升代码的可维护性和可读性。以下根据VUE最佳实践，在脚手架生成目录的基础上进行调整，项目结构如下图所示。

在脚手架生成目录，开发主要目录是在src下，现对src下的目录进行规划和设计，主要的目录结构介绍如下

Assets

用于放置静态资源，包括公共的 CSS 文件、 js 文件、iconfont 字体文件、公共图片（images），公共CSS样式（styles）及其他静态资源类文件。可以在此目录下创建font、images和styles三个文件夹。之所以强调是公共的 CSS 文件，是因为要在组件的 CSS 标签里加入 ‘scoped‘ 标记，将其作用范围限制在此组件以及调用它的父级组件中，避免污染全局样式

Common

放置公用型的文件，具体包括公用函数的集合和公用小组件。公用函数的集合在组件中引用时，可以作用于组件而不必书写重复的方法，如common.js文件中包括一些公共函数，随机函数，时间格式化等。小组件message文件，页面上一些弹窗等小插件写在message文件，如：成功提示弹框，警告弹窗，错误信息弹窗，消息提示等

components

放置模块组件，在WEB开发中，由用户视角看是一个个完整的页面，如果以页面为单位进行开发，将所有的数据访问、操作逻辑放在页面中来写，就是典型的ALL IN ONE操作模式，这种模式开发的页面难以复用，维护性很差。组件式开发将独立的页面看成一种容器，它负责与后台之间通讯和各种组件的调度。组件与后台之间的通讯及分离，组件的操作与需要展示的数据分离，通过对外暴露的接口与主组件（页面）及组件之间进行交互，这样就将组件的布局、样式、操作独立的封装起来，体现面向对象的封装性及面向对象单一职责原则，大大提高了可维护性和可复用性。如弹出框、发送手机验证码、图片上传、头部组件weui-header、侧边栏组件weui-sidebar和录页面的验证码组件等

services

该目录主要存储Axios二次封装代码和与后台通信服务api文件。前者是axios 库的实例配置文件；后者后台接口配置文件和各个模块接口数据通信函数文件。尤其是api文件的使用，使得前端的开发与后端接口完全脱耦，是迪米特法则的一个典型应用

router路由

在单页面系统中前端路由是控制页面跳转的核心。其优点在于改变视图时不会向后端发出请求。该目录用于存储设定访问路径文件，该文件将路径和组件映射起来

store

Vuex状态管理文件，置 vuex 需要的状态关联文件，设置公共的 state、getters、mutations、actions和modules等

lang

放置国际化语言包，这个根据实际项目而定，如果我们实战项目需要多国语言切换，这时就把多国语言包方在此位置；这里主要包含en-US.js、Zh-CN.Js和index.js国际化对象三个文件。

view

用于存放针对终端用户具有独立功能的展示的页面文件，如登录页、用户信息页等。这些页面是使用通用模块组件，形成完整的页面的

plugins

存放项目通用插件

结语

前端开发文件组织结构是概要设计重要组成部分，在实际开发中还需进一步在此框架下创建二级目录、三级目录，本文给出目录结构供大家参考使用。