uniapp脚手架开发,集成eslint,ui库,request请求,ts,支持vue2, vue3
期望你的收获
-
前端工程化中脚手架的整体设计和结构
-
能够自己独立为企业定制一套前端脚手架
背景
开发新项目遇到的问题
- 开发时间短
- 要求技术栈完整
- 辅助功能完善
- 针对不同的项目需求和团队情况,搭建项目基础环境不能一成不变
目前工程的痛点
- 重复性工作过多
- 不便团队统一开发风格,及跨团队合作
- 不便插件扩展等功能
期望脚手架解决的问题
-
快速搭建企业级项目框架
- 减少重复性工作
- 统一团队统一开发风格,便于跨团队开发及后期维护,降低新人上手成本
- 提供一键前端项目的创建,配置,本地开发,插件扩展等功能,让开发者更多时间专注于业务
-
规范项目开发目录
入门开发
基础架构
站在前端研发角度分析必要性
-
提升前端研发效能【提炼通用代码、通用流程、构建发布上线】
- 脚手架核心价值:自动化、标准化、数据化
-
和自动化构建工具(jenkins、travia)区别:自动化构建工具在服务端执行,无法覆盖本地操作且定制自动化的构建工具需要用到Java等后端语言,对前端不友好
从使用角度理解
脚手架的本质是一个操作系统的客户 端,通过命令行执行
从应用角度看CLI过程
- 首先是个npm项目,项目中有一个bin/vue.js的文件,且这个项目发布到了npm上
-
将npm项目安装到了lib/node_modules
-
在node的bin目录下配置软链接到lib/node_modules/@vue/cli/bin/vue.js
从广义和狭义角度分析
执行原理
快速实现你的脚手架
项目流程设计与开发
基础工作流程
流程设计与执行
预备知识
- commander: 强大的node命令行处理工具。能轻松的获取命令行的参数
- Inquire:命令行交互工具,让你能以“问答”的交互方式来完成一系列的命令行操作
- download-git-repo:git仓库下载工具,通常用来下载模板代码
- ora:终端loading美化工具
-
chalk:命令行输入/输出美化工具
目录结构设计
commander小试
核心代码讲解
常见脚手架工具
-
Yeoman:强健的工具,库,及工作流程的组合
-
Create-React-App:构建 ReactJs 框架
-
Vue CLI:构建 VueJs 框架
-
Plop:主要用于创建项目中特定文件类型的小工具,类似于 Yeoman 中的sub generator,一般不会独立使用
参考链接
深度思考,全面总结,综合发展!!