随着前端工程化的概念越来越深入人心，脚手架的出现就是为减少重复性工作而引入的命令行工具，让开发不太需要关注构建工具webpack，babel这些怎么配置，怎么起前端服务，怎么热更新；为了在编写过程中让编辑器帮我们查错以及更加规范，我们还需要引入ESlint；甚至，有些项目还需要引入单元测试（Jest）。对于一个更入门的人来说，这无疑会让人望而却步。而前端脚手架的出现，就让事情简单化，一键命令，新建一个工程，再执行两个npm命令，跑起一个项目。在入门时，无需关注配置什么的，只需要开心的写代码；另外，对于很多系统，他们的页面相似度非常高，所以就可以基于一套模板来搭建，虽然是不同的人开发，但用脚手架来搭建，相同的项目结构与代码书写规范，是很利于项目的后期维护的；以上就是为什么脚手架存在的意义， 让项目从"搭建-开发-部署"更加快速以及规范。
如今市面上的开源的脚手架项目已经很多了，基于vue的有vue-cli，基于react的有create-react-app，但是很多时候我们基于这些构建一个基础项目，还是免不了配置webpack，babel，css等等，而且可能每个项目为达到共同的目的，可能最后的配置也不全一样，而在团队技术栈稳定的情况下，统一固化一些基本配置就显得极为重要，能够提高开发效率，提升开发体验。参考通用的脚手架工具，步骤大概以下几步：
- 解析用户输入的命令；
- 生成一些配置化文件，如package.json， 或webpack.config.js等；
- 根据用户的输入生成对应的模板项目；
- 安装该模板所需要的环境
首先，创建一个脚本文件，名字为 hello。至于为什么不使用后缀，这个应该是为了更容易阅读，毕竟很多执行脚本都是没有后缀的。 在 hello 中写入需要执行的脚本代码 :
#!/usr/bin/env node
console.log('hello world');#!/usr/bin/env node 必须要写在脚本文件的第一行，目的是用来指定该脚本文件执行的环境。在这里指定执行环境为 Node.js 环境；然后，修改 hello 的权限
$ chmod 755 hello现在，hello 就可以执行了
$ ./hello
hello world如果想把 hello 前面的路径去除，可以将 hello 的路径加入环境变量 PATH。但是，另一种更好的做法，是在当前目录下新建 package.json ，写入下面的内容。
{
"name": "hello",
"bin": {
"hello": "hello"
}
}然后执行 npm link 命令
$ npm linknpm link命令可以将一个任意位置的npm包链接到全局执行环境，从而在任意位置使用命令行都可以直接运行该npm包。 那么，当运行npm link时发生了什么？下面就以Windows平台为例来展示它的处理过程。简要地讲，这个命令主要做了两件事：
- 为npm包目录创建软链接，将其链到{prefix}/lib/node_modules/
- 为可执行文件(bin)创建软链接，将其链到{prefix}/bin/{name} 现在再执行 hello ，就不用输入路径了。
$ hello
hello world
之后就是自定义命令的解析,这个可以借助commander实现；详细可参考https://www.npmjs.com/package/commander
主要是基于模板文件，进行文件的增删改查操作，可借助于fs-extra
这个是项目技术栈的沉淀，要达到麻雀虽小，五脏俱全的效果，要达到可以灵活配置，但是又有一些基础而不能缺少的一些配置，要在灵活性和全面性之间做一个折中与取舍；整个流程步骤
整体功能初步规划：
- 快速构建electron+vue2+ts+sqlite+webpack项目，和vue3+electron+ts+sqlite+vite项目的能力；
- 提供快速构建不同vue版本的page的能力；
- 提供快速构建不同vue版本的组件的能力；