2025-09-15 16:58:31 +08:00
|
|
|
|
# Onlook 启动模板
|
|
|
|
|
|
|
|
|
|
|
|
<p align="center">
|
|
|
|
|
|
<img src="app/favicon.ico" />
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
这是一个使用 [Next.js](https://nextjs.org/)、[TailwindCSS](https://tailwindcss.com/) 与 [shadcn/ui](https://ui.shadcn.com) 搭建的 [Onlook](https://onlook.com/) 项目模板。
|
|
|
|
|
|
|
|
|
|
|
|
## 快速开始
|
|
|
|
|
|
|
|
|
|
|
|
1. 安装依赖（PowerShell 示例，四选一）：
|
|
|
|
|
|
|
|
|
|
|
|
```powershell
|
|
|
|
|
|
# npm
|
|
|
|
|
|
npm install
|
|
|
|
|
|
|
|
|
|
|
|
# yarn
|
|
|
|
|
|
yarn install
|
|
|
|
|
|
|
|
|
|
|
|
# pnpm
|
|
|
|
|
|
pnpm install
|
|
|
|
|
|
|
|
|
|
|
|
# bun
|
|
|
|
|
|
bun install
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
2. 启动开发服务器（PowerShell）：
|
|
|
|
|
|
|
|
|
|
|
|
```powershell
|
|
|
|
|
|
# npm
|
|
|
|
|
|
npm run dev
|
|
|
|
|
|
|
|
|
|
|
|
# yarn
|
|
|
|
|
|
yarn dev
|
|
|
|
|
|
|
|
|
|
|
|
# pnpm
|
|
|
|
|
|
pnpm dev
|
|
|
|
|
|
|
|
|
|
|
|
# bun
|
|
|
|
|
|
bun dev
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
打开后在 Onlook 中查看：<http://localhost:3000>
|
|
|
|
|
|
|
|
|
|
|
|
## 目录结构（节选）
|
|
|
|
|
|
|
|
|
|
|
|
- `app/`：Next.js App Router 页面与布局
|
|
|
|
|
|
- `components/`：通用组件
|
|
|
|
|
|
- `hooks/`：自定义 Hooks
|
|
|
|
|
|
- `lib/`：工具与内容数据
|
|
|
|
|
|
- `public/`：静态资源
|
|
|
|
|
|
- `app/globals.css`：全局样式（TailwindCSS）
|
|
|
|
|
|
|
|
|
|
|
|
## 常用脚本
|
|
|
|
|
|
|
|
|
|
|
|
```powershell
|
|
|
|
|
|
# 开发
|
|
|
|
|
|
npm run dev
|
|
|
|
|
|
|
|
|
|
|
|
# 构建
|
|
|
|
|
|
npm run build
|
|
|
|
|
|
|
|
|
|
|
|
# 预览（如有 start 脚本）
|
|
|
|
|
|
npm run start
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
使用 `yarn`/`pnpm`/`bun` 时，将 `npm run XXX` 替换为对应命令即可。
|
|
|
|
|
|
|
|
|
|
|
|
## 环境变量
|
|
|
|
|
|
|
|
|
|
|
|
在项目根目录创建 `.env.local`，示例：
|
|
|
|
|
|
|
|
|
|
|
|
```dotenv
|
|
|
|
|
|
# 示例
|
|
|
|
|
|
NEXT_PUBLIC_APP_NAME=Onlook Starter
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Next.js 会在运行时自动加载 `.env.local`。请勿将敏感变量提交到版本库。
|
|
|
|
|
|
|
|
|
|
|
|
## 部署
|
|
|
|
|
|
|
|
|
|
|
|
- 推荐：Vercel（零配置支持 Next.js）。
|
|
|
|
|
|
- 自托管：
|
|
|
|
|
|
|
|
|
|
|
|
```powershell
|
|
|
|
|
|
npm run build
|
|
|
|
|
|
npm run start
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 许可证
|
|
|
|
|
|
|
|
|
|
|
|
本模板遵循其依赖库的各自许可证。根据你的项目需要添加 `LICENSE` 文件。
|
2025-09-15 16:51:41 +08:00
|
|
|
|
|
