Vue CLIで新規プロジェクトを作成する

環境は以下で作成

• node
  • 14.15.0
• vue cli
  • 4.5.8

事前準備

docker-compose.yaml と Dockerfile を準備

docker-compose.yaml

version: '3'
services:

  sample-front:
    build: <path-to-dockerfile>
    container_name: sample-front
    tty: true
    volumes:
    - ./../sample-front/:/app
    ports:
      - "8080:8080"

Dockerfile

FROM node:14.15.0-alpine3.12

ENV VUE_CLI_VERSION 4.5.8

RUN yarn global add @vue/cli@${VUE_CLI_VERSION}

WORKDIR /app

コンテナ立ち上げ

⛄ docker-compose up

確認

⛄ docker ps

コンテナに入る

⛄ docker exec -it sample-front ash

インストールしたもののversion確認(スキップ可)

/app # node -v
v14.15.0
/app # vue --version
@vue/cli 4.5.8

プロジェクト作成

今回はカレントディレクトリに作成

vue create .

カレントに作らない場合は、以下のコマンドを使用

vue create <app-name>

設定は好みがあると思うのでお好きなように

Vue CLI v4.5.8
? Generate project in current directory? (Y/n) -> Y

? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
  Use NPM

今回自分はVue 3とYarnを選択

🎉  Successfully created project app.
👉  Get started with the following commands:
 $ yarn serve

docker-composeに以下の部分を足して、サーバーが立ち上がるか確認してみる

command: >
  ash -c "yarn install &&
  yarn serve"

立ち上げ

⛄ docker-compose up
sample-front    |   App running at:
sample-front    |   - Local:   http://localhost:8080/

ブラウザで以下のURLを叩いて確認してみると...

http://localhost:8080/

以下の画像のような画面になっていたらOK!