vue2前端标准化项目架构搭建

1,814 阅读4分钟

git地址: github.com/Raj6666/vue…

设计思路

apis接口目录设计思路

  •  不希望在页面中一一手动引入多个api
  •  在api中按照模块划分
  •  api的封装需要有一定的可定制化传参

assets静态资源目录设计思路

  • 支持各种静态资源的存放,包含标准的图片目录
  • 全局的公共样式以及工具类样式在项目入口处注入的样式文件也作为静态资源封装在此

components组件目录设计思路

  • common公共组件的在项目入口处进行统一注册

request请求目录设计思虑

  • 希望可以把api(接口),axios(请求),callback(请求回调),interceptor(请求拦截)分开文件进行封装以及管理,避免冗余在一个文件中,增加代码可读性与可维护性
  • axios请求封装自动解析参数,在内部封装好全局的loading状态,后续组件中直接读取state中的loading即可展示隐藏loading样式,统一封装好请求成功以及请求失败的回调函数
  • 封装好的axios返回的必须是一个 Promise对象,方便后续代码中的所有请求均用async、await方式进行调用以及联调
  • interceptor 请求拦截器在项目入口进行注册,可在请求拦截中实现对请求的定制化需求,在响应拦截中直接对http状态码的基础判断实现统一处理以及管控,包括401、403、404、500
  • mock请求模拟,根据模块来区分不同模块的请求进行模拟,因为api也是按照模块能进行分包的,形成同级对比
  • 要求所有请求接口均实现mock返回,方便前期接口联调,以保证后续接口出错时,前端能有办法回溯标准返回结果,以展示以及调试页面
  • mock地址链接设计为后端定义的url前加上/mock来进行设计

router路由目录设计思路

  • 自动加载所有modules文件夹模块中的路由配置,无需手动import
  • 每个模块中的路由必须按照标准的由上至下路由模式进行编写
  • 添加路由守卫,为后续页面访问权限配置提供入口

utils工具类目录设计

  • 一级目录平铺项目常用的工具类js,组件/页面中再按需引入

views页面目录设计思路

  • 一级目录中,单页页面文件如home(首页)、login(登录页)、Error(异常处理页)等,与各个模块文件夹如userModule(用户模块)、shoppingCartModule(购物车模块)等进行平铺
  • 二级目录开始就是各个module模块文件夹中进行自己的逐级文件分布

vue.config.js 标准配置罗列

  • gzip压缩
  • css全局样式引入
  • devServer开发调试配置
  • 打包分析,每次打完包之后输出一个打包分析页面 image.png

\

新增配置规范

配置方式图例
api前往 src\apis\modules 路径中,新增你所需模块的文件夹,内部新增一个index.js文件index.js文件结构如右图,内部可再根据模块中的不同业务如home、ads再进行api的细分image.png
router前往 src\router\modules 路径中,新增所需路由的配置文件,路由配置文件需根据右图中标准的由上至下的逐级分层标准路由写法。当然也支持平级的多个路由添加,但不管使用哪种路由写法,为了实现自动引入路由,每个路由都必须配置name属性image.png
\

项目文件树\

.\
├─ .env.development                 —— 开发环境变量\
├─ .env.production                   —— 测试环境变量\
├─ .env.rc                          —— 预发布环境变量\
├─ .env.test                        —— 生产环境变量\
├─ src\
│    ├─ App.vue                     —— 项目根组件\
│    ├─ main.js                     —— 项目入口文件\
│    ├─ apis\
│    │    ├─ index.js               —— 对api请求对象的封装以及所有模块api的自动引入\
│    │    └─ modules                —— 请求api集合,内部必须遵循文件夹包含index.js的声明方式\
│    │           ├─ home\
│    │           └─ userModule\
│    ├─ assets                      —— 项目静态资源\
│    │    ├─ images\
│    │    │    └─ logo.png\
│    │    └─ styles                 —— 全局引用样式资源\
│    │           ├─ border.css      —— 重置border样式\
│    │           ├─ common.scss     —— 全局公共样式\
│    │           └─ variables.scss  —— 全局公共常用工具样式,代码中以@include方式进行引用\
│    ├─ components\
│    │    ├─ common                 —— 全局公共组件\
│    │    │    └─ HelloWorld.vue\
│    │    └─ index.js               —— 全局公共组件的全局注册\
│    ├─ request\
│    │    ├─ axios.js               —— axios请求封装,并添加公共的请求成功与请求失败回调函数(包含全局loading状态调整)\
│    │    ├─ interceptors.js        —— 请求拦截器,对请求返回不同状态码的统一处理\
│    │    └─ mock                       \
│    │           ├─ index.js        —— 请求数据模拟\
│    │           └─ mockAdapter.js  —— 需要模拟异常状态请求所需的请求\
│    ├─ router\
│    │    ├─ auth-guard.js          —— 路由守卫\
│    │    ├─ index.js               —— 自动引入所有modules模块中的路由,以及标准的单页路由配置\
│    │    └─ modules              \
│    │           └─ userModule.js   —— 标准模块路由示例\
│    ├─ store\
│    │    └─ index.js               —— store 仓库\
│    ├─ utils                       —— 工具类仓库\
│    │    ├─ date-util.js\
│    │    └─ types.js\
│    └─ views                       —— 页面\
│           ├─ Error.vue\
│           ├─ Home.vue\
│           └─ userModule\
│                  ├─ home.vue\
│                  └─ tradeManagement\
└─ vue.config.js                        —— 项目基础配置