拆箱即用的前端项目模板

1,337 阅读2分钟

背景

为了让开发者更加专注到业务的开发中,从繁琐的项目配置中抽离开来。本着做到新项目拿来就用的态度,沉淀出以下的项目脚手架,可以成为template。

1.vue-mobile-template(vue移动端H5项目template)

特性

  • UI框架基于vant,按需加载的调用方式
  • 基于standard风格的eslint代码风格校验
  • 为了更好的团队协作,git提交时自带eslintgit message校验
  • 基于viewport的移动端适配方案
  • production环境默认开启gzip
  • 测试环境自带vConsole,打包生产环境包是自动移除
  • 默认集成了flextbordermarginpadding相关css工具样式的className
  • 自带页面初始化“loading”
  • 相对完善的Axios封装(是否需要loading、是否需要错误提示、是否返回全部数据)

2.react-mobile-template(react移动端H5项目template)

特性

  • UI框架基于antd-mobile,按需加载的调用方式
  • 基于standard风格的eslint代码风格校验
  • 为了更好的团队协作,git提交时自带eslintgit message校验
  • 基于viewport的移动端适配方案
  • 测试环境自带vConsole,打包生产环境包是自动移除
  • 默认集成了flextbordermarginpadding相关css工具样式的className
  • 自带页面初始化“loading”
  • 相对完善的Axios封装(是否需要loading、是否需要错误提示、是否返回全部数据)
  • 使用类似Vuecssscoped的局部样式,只要css文件名类似xx.scoped.css即可(ps:css module和css in js 目前的解决方案感觉都用不惯)。
  • 基于react-app-rewiredcustomize-cra配置,再也不用eject了😊。
  • 已经和vue-mobile-template项目目录和基本功能(打包的目录,Vconsole,项目配置文件等)做了趋同,使开发者关注点分类,专注于业务的开发,而不必在关于项目的配置。

3.vue-admin-pro-template(vue中后台管理template)

特性

4.wechat-miniprogram-template(微信小程序template)

特性

  • 对项目目录做了一层封装,加入了eslintgit message校验
  • 使用时只要导入app目录到微信开发者工具即可。