前言
平常我想做一些页面demo的时候，都会执行以下步骤：
- 使用create-vite创建一个vite工程
- 创建一个git repository，把vite工程上传到github
- 在vercel中引入vite工程，然后执行构建，生成在线页面
这几个步骤其实并不繁琐，甚至也足够的便利
但是，足够懒的我，有没有更懒的方法，让我一键执行以上三个步骤呢
于是，我就做了这个脚手架
脚手架使用前提
- 使用git
- 使用vercel
- 脚手架属于玩具级别，如有兼容问题，麻烦提issue告知，有时间的最好是提PR帮忙解决~
使用说明
安装
脚手架已发布至npm，可以通过npm执行安装，最好是能全局安装
npm install -g create-vite-vercel-y
yarn add -g create-vite-vercel-y
pnpm add -g create-vite-vercel-y
命令说明
脚手架有三个主要命令：create-vite-vercel-y create-vite-vercel-y project create-vite-vercel-y token，使用的时候也可以使用缩写:cvvy
还可以通过cvvy --help 查看帮助, cvvy --version查看版本
下面分别介绍三个命令
create-vite-vercel-y / cvvy
该命令是用于展示插件使用文档，命令行中空缺的部分在这份说明发布之后再填补
create-vite-vercel-y token / cvvy token
该命令用于保存github和vercel的token
这步非常重要!
这步非常重要!
这步非常重要!
如果不执行这步，后续的工程创建操作将无法进行
创建github token步骤
- 打开github，点击头像打开菜单，点击
Setting
-
点击
Setting - Developer settings - Personal access tokens - Tokens (classic)注意，文章写于
2023-03-23，目前的github添加token是在这个位置，不确定以后会不会更改操作
- 点击
Generate new token - Generate new token (classic)
我一般创建token，都会选no expiration不过期，但需要注意的是这是一件有风险的操作，各位酌情处理
创建好的github token记得首先在本地留一个备份(拷贝到txt或者其他)，因为这个token只会展示一次，以后不会再展示了，所以先保存起来会比较好操作
创建vercel token步骤
- 打开vercel，点击右上角头像打开菜单，点击
Setting
- 点击
Token菜单即可创建token
需要注意的是，这里也是跟github一样token只展示一次，所以也可以先进行备份
执行命令保存token
执行命令cvvy token 保存这两个token
可以通过以下命令，检查本地配置中是否已保存好token
git config --get --global createViteVercel.githubToken
git config --get --global createViteVercel.vercelToken
选项
cvvy token还有两个选项：--no-github --no-vercel
--no-github: 不保存github token--no-vercel: 不保存vercel token
create-vite-vercel-y project / cvvy project
执行该命令，开始创建工程并提交部署
每个步骤都会回显当前的url，使用者可以直接复制url到浏览器打开查看
这是本次执行构建好的应用的url：cvvy-create-project.vercel.app
使用步骤总结
- 对于初次使用者，需要先执行
cvvy token保存token，然后通过cvvy project创建工程 - 对于非初次使用者，相信你本地已经有token信息，直接执行
cvvy project即可
脚手架命名说明
我相信很多人都会奇怪，为什么命名会加上一个-y
那是因为，这个脚手架本来是使用的pnpm，但后来部署之后发现pnpm patch有问题，而插件需要使用patch来修改create-vite，这问题也咨询过颜海镜大哥，貌似确实是有点问题
于是我就新建一个仓库，用yarn + patch-package组合拳，最终发布成功，为了做区分加了个-y
立个flag，尝试用别的办法解决pnpm patch发包问题（尽量不鸽
