理解真实开发环境下的vue开发：

理解真实开发环境下的vue开发：

 

目录结构：

一、Api文件结构：

Api文档分为三个部分：

1. qr对二维码相关的操作封装了一系列请求.  

2. 分别对不同种类的比赛和模块进行了和服务端数据操作的封装，包括了二维码的上传、删除、二维码域名地址的获取等。

3. qrCode是对二维码群的相应操作。目录结构大致和qr文件夹的功能相似。 

 

 

1. 用户模块的相关网络请求操作

 

ApiVO.ts是用户注册、登录、验证码相关的interface（接口），对对应的数据格式和类型限制。

Handle.ts是对用户模块执行的网络请求操作的baseURL的声明。

Index.ts是用户模块具体实现的操作，实现一系列的登录、注册等方法的封装。

整个api文件的所有方法被index.ts封装成一个api模块进行导出。

• Assets文件夹的内容
• 

• 开发所用的图片、css文件都在这里。、

  Assets和static文件目录的区别

  构建项目时，assets中的文件在经过webpack的打包后会重新编译，同时在组件动态绑定图片路径中，由于webpack使用的是CommonJS规范，所以说路径要改成require的格式。

  而static中的静态资源只是复制一遍到dist文件里，并不需要打包。适合放一些第三方插件或者字体文件。

   

• components文件夹封装了可以复用的各类小组件。

 

在该项目中封装了一个页面在未加载完成时候所展示的界面。

项目开发中将可以复用的组件或者公共组件封装在components中

• data站点数据层

对站点cookie和session的预设。和一些状态的设置（有的地方不是特别了解）

• lib公共类和方法（核心可复用模块）

 

Axios.proxy.ts设置了网络请求的各种配置。

（1）设置请求头中的数据格式。请求超时时间。

（2）在请求数据前读取存储在cookie的token，并将其加在headers中。

（3）在请求发出后，获取返回的数据状态码。如果为错误信息则进行路由跳转。并且使用promise.reject()抛出错误。

（4）然后创建代理，直接将axios请求进行封装，并且返回一个promise对象。并将封装好的代理进行export default。

 

cookies.ts定义导出了一个cookie类，可以对cookie进行设置、获取、删除、过期的操作。

• 其他文件

 

在main.ts中在全局引入了使用的包。