👽 概论
封装脚手架可能是每个前端都会去考虑的问题，毕竟每个公司都有各自的差异性开发需求，这些开发需求单凭vue-cli、create-react-app是解决不了的，要想进一步提升开发速度，二次封装的工作脚手架不可或缺。
脚手架的封装虽非易事，但只要学会目标拆解，一步步朝着目标走下去就总会成功。今天我们就来聊聊万里长征的第一步：我们需要怎样的模板？
👽 模板内容
就我司而言，目前主要的开发任务都集中在Web后台系统与小程序两大领域上，这两块的模板自然是我们必须的。结合团队开发经验，我们选中了如下库作为我们模板的主要内容，供大家参考：
🙋 1. Web模板（偏后台）
（1）基础框架：Vue+Vuex+Vue-router；
（2）请求库：axios；
（3）CSS预处理器：less；
（4）时间处理库：dayjs；
（5）滚动条美化库：vuescroll；
（6）样式库：ElementUI；
（7）图表库：Echarts(建议CDN引入)【不会封装，仅做推荐】；
（8）xlsx处理库：SheetJS【不会封装，仅做推荐】;
🙋 小程序模板
（1）基础框架：UniApp；
（2）样式库：Uview；
（3）图表库：echarts-for-weixin(Echarts小程序版)【不会封装，仅做推荐】；
部分库的使用频率不是很高，所以不会预装如模板之中。这点大家根据自己结合实际情况做调整，模板的内容是什么其实并不重要，重要的是要知道自己需要什么。
👽 模板功能
预期要实现的基础功能如下：
（1）Api封装：Token鉴权，请求类型区分，请求环境区分，出错提醒；
（2）Loading封装：请求伴随；
（3）router封装：子router提取，动态菜单生成，哈希模式，鉴权白名单；
（4）404跳转；
（5）EditorConfig统一；
（6）可选链?.支持；
（7）生产环境优化：注释移除、sourceMap移除、现代模式打包支持；
（8）Eslint+Preitter+Stylelint统一配置；
👽 总结
对于我们来说，或许更习惯的是直接动手去做，但这有可能恰恰会成为我们发展的绊脚石。洞悉工作背后的真正需求或者意义，有时要更为重要。知其原理则万事通达。学技术是这样，做产品亦如此。
