uniapp脚手架开发，集成eslint，ui库，request请求，ts，支持vue2， vue3

期望你的收获

• 前端工程化中脚手架的整体设计和结构

• 能够自己独立为企业定制一套前端脚手架

背景

开发新项目遇到的问题

• 开发时间短
  
• 要求技术栈完整
• 辅助功能完善
• 针对不同的项目需求和团队情况，搭建项目基础环境不能一成不变

目前工程的痛点

• 重复性工作过多
  
• 不便团队统一开发风格，及跨团队合作
• 不便插件扩展等功能

期望脚手架解决的问题

1. 快速搭建企业级项目框架

2. 减少重复性工作
3. 统一团队统一开发风格，便于跨团队开发及后期维护，降低新人上手成本
4. 提供一键前端项目的创建，配置，本地开发，插件扩展等功能，让开发者更多时间专注于业务

5. 规范项目开发目录

入门开发

基础架构

 站在前端研发角度分析必要性

• 提升前端研发效能【提炼通用代码、通用流程、构建发布上线】

• 脚手架核心价值：自动化、标准化、数据化

• 和自动化构建工具(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，一般不会独立使用

参考链接

　 npm  https://www.npmjs.com/package/grant-uniapp-cli

    github https://github.com/ForeverGuo/grant-uni-cli