thalida/builders-guide

Vue.js应用开发镜像

镜像概述和主要用途

本镜像基于Node.js环境构建，集成Vue CLI工具，用于简化Vue.js应用的开发、构建、测试全流程。提供完整的项目初始化、开发热重载、生产打包、代码质量检查及单元测试能力，适用于Vue.js应用的快速开发与部署。

核心功能和特性

• 项目环境初始化：支持通过npm安装项目依赖，快速搭建Vue.js开发环境
• 开发热重载：提供开发模式下的热重载功能，实时预览代码变更
• 生产构建：支持将Vue.js应用编译并压缩为生产环境可用的静态资源
• 测试执行：集成测试命令，支持运行应用测试用例
• 代码检查：提供代码 lint 功能，自动检测并修复代码风格问题
• 单元测试：支持运行项目单元测试，确保代码质量

使用场景和适用范围

• Vue.js应用的本地开发环境搭建
• CI/CD流程中的应用构建与测试环节
• 前端团队统一开发环境配置
• 快速原型开发与演示

使用方法和配置说明

开发环境使用

1. 拉取镜像（假设镜像名称为vue-app-dev）：

   bash
   docker pull vue-app-dev
   

2. 运行开发环境（挂载当前项目目录，映射8080端口）：

   bash
   docker run -it --rm -v $(pwd):/app -p 8080:8080 vue-app-dev npm run serve
   

   • -v $(pwd):/app：将本地项目目录挂载到容器内/app目录
   • -p 8080:8080：映射容器内8080端口到本地，用于访问开发服务器
   • npm run serve：启动开发服务器，支持热重载

生产构建

执行生产构建命令，生成优化后的静态资源：

bash
docker run -it --rm -v $(pwd):/app vue-app-dev npm run build

构建产物将输出到项目目录下的dist文件夹。

测试与代码检查

1. 运行测试用例：

   bash
   docker run -it --rm -v $(pwd):/app vue-app-dev npm run test
   

2. 运行单元测试：

   bash
   docker run -it --rm -v $(pwd):/app vue-app-dev npm run test:unit
   

3. 代码 lint 检查与修复：

   bash
   docker run -it --rm -v $(pwd):/app vue-app-dev npm run lint
   

项目初始化

首次使用时，需先安装项目依赖：

bash
docker run -it --rm -v $(pwd):/app vue-app-dev npm install

自定义配置

项目配置可通过Vue CLI配置文件进行自定义，详细配置参考：Vue CLI配置参考

docker-compose配置示例

创建docker-compose.yml文件，简化开发流程：

yaml
version: '3'
services:
  vue-dev:
    image: vue-app-dev
    volumes:
      - ./:/app
    ports:
      - "8080:8080"
    command: npm run serve

启动命令：docker-compose up