Vue+element搭建后台管理系统-四、文件目录结构详解

上一章我们讲到了编码规范和关于Vue的配置文件，继上一章的内容，我们继续完善项目架构-src目录。

系统代码的编写都是src下进行，所以这个的目录也一定是要清晰，这也是代表了整个项目开发流程和分工的清晰。

src目录结构如下：

 

│  App.vue
│  main.js
│  
├─api
│      login-api.js
│      
├─assets
│  │  logo.png
│  │  
│  ├─css
│  ├─font
│  └─images
├─components
│  │  HelloWorld.vue
│  │  
│  └─sass-table
│          sass-table.vue
│          
├─config
│      config.index.js
│      
├─libs
│      qq-map.min.js
│      
├─request
│      index.js
│      
├─router
│      index.js
│      routers.js
│      
├─store
│  │  index.js
│  │  
│  └─modules
│          common.js
│          user.js
│          
├─utils
│      index.js
│      
└─views
    └─login
        └─home
                index.vue

一、创建api目录

api顾名思义，接口嘛，那肯定就是用于存放请求服务器端接口的方法，无论是在小型项目还是大型企业级项目，都应该把所有的接口请求统一起来，方便管理和维护。大大减少后期维护费用。接口少了怎么写都不影响，但是实际开发中接口太多，像你的那种写法就得一个文件一个文件的改。麻烦。单页面写接口的话，要是你接口变动了，你还得一个一个页面去找，或者全局搜索接口找，你想一哈，光是找接口就得花大半天时间，得不偿失。具体实现看后续的篇章。

二、assets下子目录

assets目录用于存放的静态资源，比如全局的CSS样式文件、静态资源图片、字体文件等。有的同学会疑惑，静态文件存放目录不是static吗？

其实assets目录和根目录下的static目录都是存放静态文件的，那什么样的静态文件应该放在assets目录，什么样的静态文件应该放在static目录下呢？

assets里的文件编译过程中会被webpack处理理解为模块依赖，只支持相对路径的形式（也就是可以使用~@/assets/）。assets放可能会变动的文件。
static里的文件不会被webpack解析，会直接被复制到最终的打包(默认是dist/static)下，必须使用绝对路径引用这些文件。static放不会变动的文件。

三、components目录

顾名思义-组件目录。主要用于存放各式各样的全局组件，比如后台管理系统常用到的表格、表单等。引用到其他模块可以通过"@/components/sass-table/sass-table.vue"的方式。

四、config目录

config即配置文件，同样是为了方便统一管理。比如常用的服务器域名、地图key、城市静态数据等。

/* eslint-disable no-undef */
const CONFIG = {
    //开发环境
    development: {
        url: 'https://getman.cn/mock',
    },
    //生产环境
    production: {
        url: 'https://getman.cn/mock'
    }
}

export default CONFIG[process.env.NODE_ENV]

一般的话，都有配套有开发环境和生产环境，在项目运行或者打包的过程中，通过process.env.NODE_ENV返回的命令来判断用哪个环境的数据。

五、router

路由配置文件存放目录。

六、store

存放的是全局状态内容。

七、views

存放的是各模块页面文件，路由配置的也基本从这里导出的模块。

八、libs

存放的是外部库文件，主要是一些不支持npm安装的库。如：腾讯的地图插件。

九、request

存放的是请求接口的封装方法，如何具体实现后面会讲到。

十、utils

存放的是开发中自行编写的工具类。

目前我们开发的后台管理系统暂定现在的目录，后续如果应用到需求变化，肯定是可以自行添加的，只是需要记住，一定要做到高内聚、低耦合，遵循面向对象的开发方法，只有什么是高内聚、面向对象这些，相信读书的时候老师应该都教过了，我就不重复了。

好了，这章内容就讲到这里吧，下一章我们将学习如何封装接口请求方法。