20210926


前端 CLI 脚手架

一、开发原因

在创建项目时一般会使用cra,或者vue cli来创建,节约搭建项目的开发时间,但是很多时候并不能满足我们的需求,这个时候需要我们自己去创建一个脚手架

二、使用到的开发包
  • chalk[1] (控制台字符样式)
  • commander[2] (实现 NodeJS 命令行)
  • download[3] (实现文件远程下载)
  • fs-extra[4] (增强的基础文件操作库)
  • handlebars[5] (实现模板字符替换)
  • inquirer[6] (实现命令行之间的交互)
  • log-symbols[7] (为各种日志级别提供着色符号)
  • ora[8] (优雅终端 Spinner 等待动画)
  • update-notifier[9] (npm 在线检查更新)

可以参考地址开发前端 CLI 脚手架思路解析

三、部署地址

在lib/config下有一个,mirror地址链接,也就是一个发布服务的地址,使用的是vertel发布,这个地址我是关联的github的账号,所以他会映射到对应的github的项目地址,例如https://github.com/rookiewxy/xt-template-cli,所以在`download`时需要添加对应的文件名称

image-20210926111401894.png

image-20210926111856114.png

四、vertel简单操作

image-20210926111617010.png

例如登录github账号,在点击创建项目,点击你想要部署的项目

image-20210926110936454.png

省略了一些简单操作,最后你会看到,你创建的项目

image-20210926111422686.png

最后使用vercel --prod命令,千万不要在全局执行,这样会报错,你没有权限,管理员也不行,最好在你当前的目录下执行

image-20210926112035939.png

最后使用这个地址,就ok了


Author: wxy
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source wxy !
  TOC