docs: README 改为中文项目文档,补充技术栈、开发、构建部署与 i18n 说明
This commit is contained in:
@@ -1,75 +1,108 @@
|
|||||||
# Nuxt Minimal Starter
|
# Arcticnewone 个人网站
|
||||||
|
|
||||||
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
北极新一(Arcticnewone)的个人网站,提供个人介绍、作品集、工作室服务、动态资讯、工具箱与联系页面,是一个现代化的展示型站点。
|
||||||
|
|
||||||
## Setup
|
## 技术栈
|
||||||
|
|
||||||
Make sure to install dependencies:
|
- [Nuxt 4](https://nuxt.com/) — 应用框架(服务端渲染 + 静态生成)
|
||||||
|
- [Vue 3](https://vuejs.org/) — 视图层
|
||||||
|
- [Tailwind CSS](https://tailwindcss.com/) — 样式方案(通过 `@nuxtjs/tailwindcss` 集成)
|
||||||
|
- [GSAP](https://gsap.com/) — 页面动画(配合 Lenis 平滑滚动)
|
||||||
|
- [Pinia](https://pinia.vuejs.org/) — 状态管理
|
||||||
|
- [@nuxtjs/i18n](https://i18n.nuxtjs.org/) — 国际化(中/英双语)
|
||||||
|
- [@nuxt/icon](https://nuxt.com/modules/icon) — 图标
|
||||||
|
- [pnpm](https://pnpm.io/) — 包管理器
|
||||||
|
|
||||||
|
## 本地开发
|
||||||
|
|
||||||
|
### 环境要求
|
||||||
|
|
||||||
|
- Node.js ≥ 20(推荐 22,与 Docker 构建镜像一致)
|
||||||
|
- pnpm ≥ 9
|
||||||
|
|
||||||
|
### 安装与启动
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# npm
|
# 1. 安装依赖
|
||||||
npm install
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm install
|
pnpm install
|
||||||
|
|
||||||
# yarn
|
# 2. 启动开发服务器(默认 http://localhost:3000)
|
||||||
yarn install
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun install
|
|
||||||
```
|
|
||||||
|
|
||||||
## Development Server
|
|
||||||
|
|
||||||
Start the development server on `http://localhost:3000`:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# npm
|
|
||||||
npm run dev
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm dev
|
pnpm dev
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn dev
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun run dev
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Production
|
开发服务器启动后访问 http://localhost:3000,代码修改会热更新生效。
|
||||||
|
|
||||||
Build the application for production:
|
### 常用命令
|
||||||
|
|
||||||
|
| 命令 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `pnpm dev` | 启动开发服务器 |
|
||||||
|
| `pnpm build` | 构建生产版本(生成 `.output/`) |
|
||||||
|
| `pnpm generate` | 静态站点生成(输出到 `dist/`) |
|
||||||
|
| `pnpm preview` | 本地预览生产构建 |
|
||||||
|
| `pnpm start` | 以 Node 方式启动 `.output/server/index.mjs` |
|
||||||
|
|
||||||
|
## 项目结构
|
||||||
|
|
||||||
|
```text
|
||||||
|
.
|
||||||
|
├── app/ # 应用源码(Nuxt 4 约定目录)
|
||||||
|
│ ├── app.vue # 应用入口(全局 SEO / Meta)
|
||||||
|
│ ├── assets/ # 静态资源(样式、图片等)
|
||||||
|
│ ├── components/ # 组件(common / home)
|
||||||
|
│ ├── composables/ # 组合式函数
|
||||||
|
│ ├── layouts/ # 布局
|
||||||
|
│ ├── pages/ # 页面(首页、工作室、作品、动态、工具、联系)
|
||||||
|
│ ├── plugins/ # 插件(如 Lenis 平滑滚动)
|
||||||
|
│ ├── stores/ # Pinia 状态
|
||||||
|
│ └── types/ # 类型定义
|
||||||
|
├── i18n/
|
||||||
|
│ └── locales/ # 国际化文案(zh.json / en.json)
|
||||||
|
├── public/ # 公开静态文件(favicon、robots.txt 等)
|
||||||
|
├── Dockerfile # 容器镜像构建
|
||||||
|
├── Jenkinsfile # CI/CD 流水线(构建、推送镜像、部署容器)
|
||||||
|
├── build-and-push.sh # 手动构建并推送镜像脚本
|
||||||
|
├── docker-compose.yml # 本地容器编排
|
||||||
|
├── nuxt.config.ts # Nuxt 配置(模块、i18n、Tailwind 等)
|
||||||
|
├── tailwind.config.js # Tailwind 配置
|
||||||
|
└── package.json # 项目依赖与脚本
|
||||||
|
```
|
||||||
|
|
||||||
|
## 构建与部署
|
||||||
|
|
||||||
|
生产构建:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# npm
|
|
||||||
npm run build
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm build
|
pnpm build
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn build
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun run build
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Locally preview production build:
|
构建产物输出到 `.output/`,可直接通过 `pnpm start` 或容器运行。
|
||||||
|
|
||||||
|
部署相关文件集中在仓库根目录(部署文件位于仓库根目录,issue 中提到的 `deploy/` 目录暂不存在):
|
||||||
|
|
||||||
|
- `Dockerfile` — 多阶段构建:安装依赖 → 构建 → 仅保留 `.output/` 运行产物
|
||||||
|
- `Jenkinsfile` — Jenkins 流水线:构建镜像 → 推送到镜像仓库 → 部署容器
|
||||||
|
- `build-and-push.sh` — 手动构建并推送镜像,凭据通过环境变量 `REGISTRY_USERNAME` / `REGISTRY_PASSWORD` 提供
|
||||||
|
- `docker-compose.yml` — 本地容器编排,宿主机 3100 端口映射容器 3000 端口
|
||||||
|
|
||||||
|
手动构建并推送镜像:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# npm
|
REGISTRY_USERNAME="<用户名>" REGISTRY_PASSWORD="<密码>" ./build-and-push.sh
|
||||||
npm run preview
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm preview
|
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn preview
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun run preview
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
> 注意:不要在命令中明文写入密码,凭据请通过环境变量或 CI 的凭据管理注入。
|
||||||
|
|
||||||
|
## 国际化(i18n)
|
||||||
|
|
||||||
|
项目使用 `@nuxtjs/i18n` 实现中/英双语:
|
||||||
|
|
||||||
|
- 语言文件位于 `i18n/locales/`:`zh.json`(中文)、`en.json`(英文)
|
||||||
|
- 默认语言为中文(`defaultLocale: 'zh'`),URL 不包含语言前缀(`strategy: 'no_prefix'`),不自动探测浏览器语言
|
||||||
|
- 组件中通过 `useI18n()` 的 `t()` 方法读取文案,例如 `t('nav.home')`
|
||||||
|
|
||||||
|
新增文案时,在 `zh.json` 和 `en.json` 中同步添加对应键即可。
|
||||||
|
|
||||||
|
## 说明
|
||||||
|
|
||||||
|
本项目不含任何密钥或敏感信息;本地环境变量请使用 `.env` 文件(已被 `.gitignore` 忽略)。
|
||||||
|
|||||||
Reference in New Issue
Block a user