Vue项目目录架构

前端开发规范之Vue项目目录架构
概述
Vue项目开发的目录结构保持一致，容易理解并方便构建与管理，方便往后的维护和其余同事的阅读。
1、Vue目录结构

2、主要项目目录介绍
1.build目录是webpack主要的配置目录

其中比较重要是 webpack.base.conf.js
兼容ES6配置

配置地址常量

配置自定义loader

2.config目录是对webpack和node最基础的配置，定义了当前所属环境，监听的端口号，生成静态文件目录位置等

其中比较重要是 index.js
配置node监听端口、静态文件位置，静态文件引用前缀、node代理等

3.js目录是项目开发过程当中的自行开发或引用的小型js库

其中比较重要的是 http.js，封装了axios库的常见用法，能够配置统一的request拦截器和response拦截器，其余的有相似日期类库，echarts封装类，vue的mixin库等

4.stylus目录是css预处理语言目录

主要的样式文件
base --- 基础组件样式
mixin --- 混合函数库
reset --- 重置样式库
variable --- 全局变量声明

5.其余components、router、store目录
这三个目录结构是vue项目开发过程当中独有的，分别表明vue组件目录，vue-router配置目录、以及vuex配置目录。
具体规范见
vue组件开发规范
vue-router配置规范
vuex配置规范

3、结语目前开发vue项目的前端目录结构大体与此文大档介绍的架构一致，可能因为不一样项目有具体需求会进行微量修改，但大致目录骨架与此一致，若后续进行vue项目开发，需遵循此目录架构，以方便各位同事快速在不一样项目间开展工做。后续若因为技术栈更新会适当调整此文档