全栈快速开发
文章会有一个 todo 的例子快速搭建项目，全程只需要点点，复制粘贴，耗时不过10min。
背景
最近对独立开发很感兴趣，关注了idoubi ，开发很多出海产品。他分享他使用的技术栈是next.js + vercel + supabase，开发了很多投入生产的 AI 产品。考虑到 next.js / React 在国内使用的不多。我简单使用 vue + vercel + supabase 搭建一个简单模板（快速搭建教程）。
国内开发太卷且用户付费意愿比较低，手续也很复杂，越来越多独立开发转向海外。
我简单总结这样搭配的优劣
优势：
- 快速开发：自动化的 CI/CD 流程，无需后端，快速部署
- 白嫖（免费）：Vercel 和 Supabase 都有免费计划，适合小型项目和个人开发。
- 技术简单：vue，不用倒腾服务器
劣势
- 可能不太灵活
- 网络问题（cdn加速）
面向不想折腾后端，服务器部署的，尽快搭建起项目演示，初期项目验证。
前提: 注册 vecel，github，supabase 电脑装有node，git 环境
Vercel 创建项目
使用 verce l中自带的模板创建vue-vite
新项目 --- New Project (vercel.com) 在里面搜索，选用 vue-vite
点击 deploy 部署
选择github：vercel是和github深度绑定的，当进行一次git提交，vercel会自动deploy，非常方便。
点击创建 create
等待不到20s，就部署完成了。
网页成功部署起来，非常简单迅速
在我们的github账号中，会显示该项目
直接将项目clone到本地
git clone your-project.git
安装依赖，运行项目
npm i
npm run dev
vercel中默认选择的是pnpm ，建议安装，个人觉得比npm好用些
npm install -g pnpm
集成 Supabase
回到项目面板 dash --> 点击存储 storage -->再点击create database vercel已经为我们提供好现成的方案，我们直接在vercel中 集成 supabase。（我这里以前配置过，会显示）
这里我们就选新加坡，网络可能是问题，supabase免费项目只能创建两个，好在开源，后面自己部署也是非常简单。
注意这里的环境变量前缀 prefix，一定要带上使用的框架，VITE，不然框架会找不到环境变量的
具体其他框架部分，可以直接查看文档，这里是vite。
下面界面，就是成功连接上supabase
Open in supabase,进入supabase的管理页面
在supabase的SQL Editor中 执行这段 sql 命令
创建一个带id，title等字段的todos表，和规定访问权限，插入些数据。 如果你不喜欢这样写代码，supabase也有丰富点的可视化操作。
create table todos (
id bigint generated by default as identity primary key,
title text,
is_complete boolean default false,
created_at timestamp with time zone default timezone('utc'::text, now()) not null
);
alter table todos enable row level security;
create policy "Anyone can view todos" on todos for
select using (true);
create policy "Anyone can add new todos" on todos for
insert with check (true);
insert into todos(title)
values
('Create Supabase project'),
('Create Vercel project'),
('Install Supabase integration');
项目开发
前置工作
全局安装 vercel cli
npm i -g vercel
登陆vercel
vercel login
连接我们刚刚创建的vercel项目
vercel link
拉取环境变量,环境变量中存储一些连接supabase的信息，在我们在vercel中连接supbase时，已经自动创建了，可以在vecel中的项目面板setting中的environment中查看（记得环境变量需要VITE的前缀,否则vite不能识别环境变量） 如果你还不知道环境变量是什么，为什么使用环境变量，建议先问AI。
vercel env pull
拉取完环境变量后，文件中出现.env.local,在我们本地连接调试时候有用，.gitignore中自动忽略它，不会上传到云端。
接下来我们，
下载supabase-js
pnpm add @supabase/supabase-js
写代码
创建文件夹和文件 src/utils/supabase.js，在supabase中编写
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
import.meta.env.VITE_SUPABASE_URL,
import.meta.env.VITE_SUPABASE_ANON_KEY
)
export default supabase
创建 src/components/Todo.vue
<script setup>
import { ref,onMounted } from 'vue'
import supabase from '../utils/supabase'
const list = ref([])
async function getTodoList() {
const { data } = await supabase.from('todos').select('*')
list.value = data
}
onMounted(() => {
getTodoList()
})
</script>
<template>
<ul>
<li v-for="n in list" :key="n.id" > {{ n.title }}</li>
</ul>
</template>
更多操作，可以查看非常详细的官方文档
App.vue
<script setup>
import Todo from './components/Todo.vue'
</script>
<template>
<Todo></Todo>
</template>
运行项目
npm run dev
本地，正确渲染
git 提交代码（直接vscode的图形化操作），vercel 会自动部署，非常方便
打开网页就行了
如果你部署失败，错误信息，可以在这查看日志 一般可能错误：
- 环境变量
- 依赖安装
本项目开源public，已上传 github 项目地址 ：jihe520/vite-vue-vercel-supabase-template (github.com)
如果有什么不懂的，可以问我，也可以直接查阅官方文档，文档很详细。 文章有问题，请指正。
扩展阅读
