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文件将被保留。

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

推荐阅读更多精彩内容