portfolio_vue_3 镜像文档

镜像概述

portfolio_vue_3 是一个基于 Vue 3 框架的个人作品集项目镜像，旨在为开发者提供快速构建、开发和部署个人作品集网站的基础环境。该镜像集成了项目依赖管理、开发热重载、生产环境构建及代码质量检查等核心功能，适用于个人开发者展示作品集、前端开发学***及小型作品集网站的快速迭代。

核心功能与特性

• 项目依赖管理：支持通过 yarn 安装项目所需依赖包，确保开发环境一致性
• 开发热重载：提供开发环境热重载功能，修改代码后实时更新页面，提升开发效率
• 生产环境构建：可将项目编译并压缩为生产环境静态文件，优化性能用于部署
• 代码质量检查：集成代码检查工具，自动检测并修复代码风格及语法问题

使用场景

• 个人开发者构建和展示作品集网站
• 前端开发者学*** Vue 3 框架的实践项目
• 小型作品集网站的快速开发与迭代
• 需要快速部署个人作品展示页面的场景

使用方法与配置说明

基础命令

1. 项目依赖安装

安装项目所需的所有依赖包，首次使用或依赖更新时执行：

yarn install

2. 开发环境启动（热重载）

启动开发服务器，支持热重载，代码修改后自动刷新页面：

yarn start

执行后，通常可通过 http://localhost:8080 访问开发页面（具体端口以实际配置为准）。

3. 生产环境构建

将项目编译并压缩为生产环境静态文件，输出至 dist 目录，用于部署：

yarn build

构建后的文件可通过 Nginx、Apache 等 Web 服务器部署。

4. 代码检查与修复

对项目代码进行语法检查和风格校验，并自动修复部分问题：

yarn lint

部署示例（基于构建产物）

若需通过 Docker 部署构建后的静态文件，可结合 Nginx 镜像，示例 docker-compose.yml 配置：

version: '3'
services:
  portfolio:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./dist:/usr/share/nginx/html
    restart: always

说明：先执行 yarn build 生成 dist 目录，再通过上述配置启动 Nginx 服务部署静态文件。

注意事项

• 确保本地已安装 Node.js 和 yarn 环境（推荐 Node.js 14+，yarn 1.22+）
• 开发环境默认端口可能被占用，可通过修改项目配置文件自定义端口
• 生产构建前建议执行 yarn lint 确保代码质量，避免构建错误