vue项目结构

前言

我在 搭建vue项目环境 简单说明了项目初始化完成后的目录结构。

但在实际项目中，src目录下的结构需要跟随项目做一些小小的调整。

目录结构

├── src                          项目源码目录
│   ├── api                      所有请求
│   ├── assets                 静态资源
│   ├── components        全局公用组件
│   ├── filtres                   全局 filter
│   ├── router                  路由
│   ├── store                   全局 store管理
│   ├── styles                  全局样式
│   ├── utils                    全局公用方法
│   ├── views                  views
│   ├── App.vue              入口页面
│   ├── main.js                入口js文件

api 和 views

上图是我在项目api文件下截的图，只是众多模块中的一部分。随着项目的逐渐完善，模块可能会越来越多。

因此，根据业务模块来划分views，将views和api一一对应，更方便维护。

components

我在components里面放置的是全局公用的组件，如收费组件，上传组件等等。页面级的组件放在各自views文件下。如下图所示：

store

官网 Vuex 是什么？ 详细说明了Vuex的使用场景等。

使用场景说明：

1. 多组件依赖于同一个数据：例如有柱状图和条形图两个组件都是展示的同一数据；
2. 公用依赖的数据：一个组件的行为→改变数据→影响另一个组件的视图；
   
   如果有个别的需要从父组件传到子组件的数据或属性，可以使用Vue的props传递；使用Vue.$emit方法可以从子组件传值到父组件。
   
   个人建议不要为了使用Vuex而使用Vuex。

关于目录结构个说明，暂时只说到这里吧，如果有额外需要注意的地方，我会再来补充的。