94 lines
1.5 KiB
Markdown
94 lines
1.5 KiB
Markdown
# 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` 文件。
|
||
|