docker安装vue

apt-get update
apt-get install nodejs npm
npm install -g @vue/cli
vue --version
vue create my-vue-app
cd my-vue-app
npm run serve

git clone https://github.com/lin-xin/vue-manage-system.git
git clone https://github.com/PanJiaChen/vue-element-admin.git

在 Docker 中安装 Vue.js 项目可以通过以下步骤实现。这些步骤将帮助你创建一个 Vue.js 应用，并在 Docker 容器中运行它。

步骤 1: 安装 Docker

确保你已经安装了 Docker。可以参考 Docker 官方文档 安装 Docker。

步骤 2: 创建 Vue.js 项目

你可以使用 Vue CLI 创建一个新的 Vue.js 项目。如果你的系统上没有安装 Vue CLI，先安装它。

1. 安装 Vue CLI (如果还没有安装):
   bashCopy Code

   npm install -g @vue/cli
   

2. 创建 Vue 项目:
   bashCopy Code

   vue create my-vue-app
   

   按照提示选择你需要的配置（比如选择默认配置或者自定义配置）。

3. 进入项目目录:
   bashCopy Code

   cd my-vue-app
   

步骤 3: 创建 Dockerfile

在你的 Vue 项目根目录下创建一个 Dockerfile 文件，该文件描述了如何在 Docker 容器中构建和运行 Vue.js 应用。

Dockerfile 示例：

# 使用 Node.js 官方镜像作为基础镜像
FROM node:18 AS build

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json 文件
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制项目文件
COPY . .

# 构建 Vue 项目
RUN npm run build

# 使用 nginx 来提供静态文件
FROM nginx:alpine

# 复制构建后的文件到 nginx 的默认目录
COPY --from=build /app/dist /usr/share/nginx/html

# 暴露端口 80
EXPOSE 80

# 启动 nginx
CMD ["nginx", "-g", "daemon off;"]

步骤 4: 构建 Docker 镜像

在项目根目录下运行以下命令来构建 Docker 镜像。

docker build -t vue-app .

步骤 5: 运行 Docker 容器

运行构建好的 Docker 镜像：

docker run -p 8080:80 vue-app

这将启动容器，并将容器的 80 端口映射到本地的 8080 端口。

步骤 6: 访问应用

打开浏览器，访问 http://localhost:8080，你应该能够看到你的 Vue.js 应用运行在 Docker 容器中。

步骤 7: 可选 - 使用 Docker Compose

如果你需要管理多个服务（比如前端和后端），你可以使用 Docker Compose。首先创建一个 docker-compose.yml 文件：

version: '3'
services:
  vue-app:
    build: .
    ports:
      - "8080:80"

然后运行以下命令来启动服务：

docker-compose up --build

总结

通过以上步骤，你可以在 Docker 容器中构建并运行 Vue.js 项目。这对于开发、部署或者确保环境一致性是非常有用的。如果需要将 Vue.js 应用部署到生产环境，使用这种方式也是一种常见的做法。