一个项目,有一个好的目录结构那是必不可少的。当我们项目越来越大时或者多人协作开发时,我们就更应该有一个清晰的目录结构。
好的项目目录结构能够给我们带来诸多的好处,比如:
- 每个功能或模块单独管理
- 代码的可读性增强
- 代码的可维护性增强
- 易于多人协作之间的沟通 接下来我将分享一下我在平时项目中总结的目录结构,当然这只是我个人的实践,如果大家有更好的意见,请在评论区留言,我们一起交流。
整体结构
首先我们先来看整体结构,我们再逐一介绍每个目录是干什么的。
目录结构
- assets: 静态资源文件
- icons:项目中使用的图标
- images:项目中使用的图片
- 还可以拓展,项目中使用都的音频,视频等等
当然放在assets最终会被webpack打包,如想资源不被打包,可以放在public文件夹下。
- bus: 总线传值(eventBus) 如果项目需要共享的状态不多,或者不想依赖于bus传值,当然我们在这不对bus做过多的介绍,个人觉得是非常好用的。
index.js文件,然后index.js的内容如上,最终我们只需要在main.js引入bus文件夹(默认找index.js文件),我们就可以使用this.$bus来实现总线传值了
- components: 一般组件文件夹
.vue文件。
- config: 项目配置
在config文件夹下,创建一个
index.js文件,在index.js当中使用export或者export default导出项目所需要的配置项。 - directives: 自定义全局指令
index.js文件,最后我们只需要在main.js引入directives文件夹,就可以使用自定义的全局指令了。 - filters: 自定义全局过滤器
index.js文件,最后我们只需要在main.js引入filters文件夹,就可以使用自定义的全局过滤器了。
- global: 自定义全局组件
index.js文件,最后我们只需要在main.js引入global文件夹,就可以使用自定义的全局组件了。
- http: 网络请求和api封装
index.js,用来封装axios(项目当中使用的ajax库为axios),再创建一个api.js,用来封装所有的请求,如果项目使用的接口过多,我们也可以创建api文件夹,然后分模块来单独管理接口。
- mock: mock数据 如果项目会使用mock数据,我们可以单独来管理我们的mock数据。
- pages(views): 路由组件
原本生成的项目叫views,我改了一个名字(个人习惯),在这个文件夹里,我们和components一样,每个路由组件有单独的文件夹包起来,也是避免出现过多的
.vue文件,影响可读性。 - router: 路由配置
这个文件夹可以创建需要动态添加的路由为单独的一个js文件,基础的路由配置还是放在
index.js文件中。 - store: vuex配置
如果项目当中使用到的共享数据不多,可以单独写在
index.js,如果数据过多,我们当然还是分模块单独管理。
- styles:公共样式和修改组件库样式 这个文件夹,我们用来存放公共的样式文件和修改组件库样式的文件。
- utils: 工具方法 这个文件夹我们用来存放所有的工具方法。
总结
以上就是我在平时项目当中的文件结构划分,当然是个人愚见,希望大佬能够指正错误和一起交流。
