vue入门：vue项目架构设计起步

    在之前已经熟悉了如何使用vue-cli进行新建项目，具体见vue入门：使用vue-cil新建vue项目。现在我们对具体开发中项目的整体架构进行设计，在这之前我们需要学习并掌握vue的基础知识，详细可见vue官方文档。

首先看下我们的项目结构图。

项目整体结构

本vue项目结构，在vue-cli所生成的默认结构上有所调整，具体每个文件模块的功能将在以后的文档中进行具体讲解。

1、在根目录下新建了mock文件夹，文件夹中增加了index.js和util.js。主要是用于前端项目提供测试接口及数据。

2、在src文件夹下新建了api文件夹，文件夹中增加了index.js和api.js。主要是用于将项目中的所有api接口进行封装统一管理。

3、在src文件夹下新建了axios文件夹，文件夹中增加了index.js。主要是用于对请求进行一些拦截和封装处理。

4、在src文件夹下新建了common文件夹，主要用来存放公用的组件及方法等。

5、在src文件夹下新建了pages文件夹，主要用于存放构建页面的组件。

6、src下的router文件夹，主要用来管理项目中的所有路由，及对路由拦截的封装等。

7、src文件夹下新建了store文件夹，主要用来进行vuex项目的状态管理。

8、static文件夹中增加config.js，主要是用来进行vue项目中的配置，如api接口地址等，在打包发布后，static文件将被保留。

新建好结构之后，我们在后面将分别对各个结构中的功能进行补充完善。