vue-cli 2.x 项目模板文件说明（一）整体结构篇

使用vue/cli 2.x脚手架搭建项目，为方便后续使用vue/cli脚手架开发，开此专栏记录模板常用项目结构，以及各文件模板

先展示完整版目录

├── build                       #webpack配置
    ├── build.js                # 打包配置
    ├── check-versions.js       # 检查版本配置
    ├── logo.png                # vue的logo
    ├── utils.js                # 开发环境
    ├── vue-loader.conf.js      # vue加载配置
    ├── webpack.base.conf.js    # webpack基础配置
    ├── webpack.dev.conf.js     # webpack开发配置
    ├── webpack.prod.conf.js    # webpack生产配置  
├── config                      # 项目配置
    ├── dev.env.js              # 开发环境
    ├── index.js                # 配置控制
    ├── prod.env.js             # 生产环境
├── dist                        # 打包目录（运行 npm run build后出现）
    ├── static                  # 资源目录                        
    ├── index.html              # 打包项目入口         
├── node_modules                # 依赖（运行npm install 后出现）
├── src/                         
    ├── assets                  # 存放项目图片
    ├── components              # 组件目录
        ├── Header.vue          # 示例组件一
        ├── Footer.vue          # 示例组件二
        ├── index.js            # 组件导出文件
    ├── http                    # 异步请求
        ├── api.js              # 封装axios
        ├── config.js           # 异步请求配置
        ├── index.js            # 导出异步请求
        ├── interface.js        # 接口管理
    ├── pages                   # 页面目录
    ├── router                   
        ├── router.js           # 路由配置
    ├── store                   # 状态管理目录
        ├── modules             # 状态模板
            ├──global.js        # 全局通用状态 
        ├── store.js            # 状态管理输出
    ├── App.vue                 # 主要App组件
    ├── main.js                 # App 入口文件
    ├── util.js                 # 公共函数文件   
├── static
    ├──common.css               #公共样式文件
├── .babelrc                    # babel 配置
├── .editorconfig               # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js                # eslint 配置
├── .eslintignore               # eslint 忽略设置
├── .gitignore                  # gitignore 忽略
├── .postcssrc.js               # postcss 配置
├── index.html                  # index.html 模板
├── package.json                # 构建 scripts 和 dependencies
└── README.md                   # README文件

本目录与初始化文件目录的相比，主要有以下几点不同：
1、多出dist目录，此目录为运行打包命令后自动生成的目录，初始化时不必新建
2、src下components文件夹只存放单独组件，设置index.js是为了方便将某些全局性组件统一导入main.js , 保持main.js整洁，便于维护，可根据项目需要使用
3、src下多出的http目录为异步请求封装，具体使用情况后续文章中会说明
4、src下pages目录为页面组件，本质与components下文件性质一致，主要是为了方便主观划分
5、src下store目录是状态管理，设置modules目录，是在项目中需要的状态控制比较多时，可按需求决定划分规则，比如按适用范围或者相关程度划分，store.js是输出文件。如果项目本身对状态管理不依赖，可删除此文件夹；如果项目本身状态管理较为简单，可将所有内容写入store.js中，当然这时module文件夹就可以舍弃了
6、src下util.js为公共函数文件