前言

平常我想做一些页面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发包问题（尽量不鸽