Vue CLIチュートリアル

https://cli.vuejs.org/guide/prototyping.html

Docker環境構築

https://cli.vuejs.org/guide/prototyping.html を参考に

Dockerfile

FROM node:16
#ENV http_proxy http://xxx:3128/
#ENV https_proxy http://xxx:3128/
WORKDIR /app

docker-compose.yml
※commandのところをコメントアウトしておく

version: '3'
services:
  node:
    build:
      context: .
    tty: true
    environment:
      - NODE_ENV=development
    volumes:
    - ./:/app
    #command: sh -c "cd hello-world && npm run serve"
    ports:
    - "8054:8080"

コンテナを起動してVueCLIをインストールしてサンプルプロジェクトをつくる

※ create時に色々聞かれるけど、読んで適当に選ぶ

docker-compose up -d
docker exec -it vuecli_docker_node_1 /bin/bash
npm install -g @vue/cli
vue create hello-world

起動！

cd hello-world
npm run serve

ブラウザからアクセスするとトップページが表示される

docker-compose.ymlのコメントアウトしてるところを戻すと、
次回起動時にvueも起動する

どんなファイルができてるか確認してみる。

public/index.html
src/main.js
src/App.vue
src/components/HelloWorld.vue