LearningSky.io

【 Tool 】透過 Docker 建立 Vue 開發環境

Archer -

內容

  • 學習目標
  • 前置準備作業
  • 建置開發環境
  • 測試與驗證

學習目標

  • 如何在本地端電腦透過 Docker 建立 Vue 開發環境

前置準備作業

  • 本地端電腦已安裝 Docker

建置開發環境

Step 1. 下載 Node.js 版的 Docker Image

  • 請在終端機輸入下方指令
docker pull node:14.18.2-buster

  • 請在終端機輸入下方指令以確認所下載的 Docker Image
docker images

Step 2. 建立 Dockerfile 與 src 資料夾

  • 請在專案目錄建立名為 Dockerfile 的檔案並輸入下方資訊
  • 在 Dockerfile 所有位置建立名為 src 的資料夾

Step 3. 依 Dockerfile 要求建立 Docker Image

  • 請在終端機切換目錄到 Dockerfile 所在位置並輸入下方指令
docker image build -t vue-test/vuecli4:0.1 .

  • 請在終端機輸入下方指令以確認 Docker Image
docker images

Step 4. 啟動 Docker Image 並設定 Port

  • 請在終端機輸入下方指令
docker container run -it --name vuecli4 -v `pwd`/src:/app -p 8080:8080 -p 8000:8000 -d vue-test/vuecli4:0.1

  • 請在終端機輸入下方指令以確認啟動狀態
docker ps -a

Step 5. 初始化 Vue 專案

  • 請在終端機輸入下方指令
docker exec -it vuecli4 /bin/bash

  • 確認 Vue 版本
vue -V
  • 透過 vue ui 指令建立專案
vue ui --headless --port 8000 --host 0.0.0.0

  • 透過瀏覽開啟 http://0.0.0.0:8000

  • 點選上方 新增 > 再點選下方 + 在此新增新專案

  • 輸入 專案資料夾 與 包管理器 後點選下方的 下一步 →
    • 本範例專案名稱設定為 vue-web-test
    • 本範例包管理器設定為 npm

  • 選擇模版後再點選下方的 新增專案

  • 專案初始化完成

Step 6. 啟動專案

  • 切換目錄到 專案資料夾 ( 本範例專案資料夾為 vue-web-test )
cd vue-web-test

  • 啟動專案
npm run serve

測試與驗證

Step 1. 透過瀏覽器查看 Vue 畫面

Step 2. 開啟 建置開發環境 段落 Step 2 所建立的 src 資料夾

  • 所初始化完成的程式碼皆位於 src 資料夾

GitHub

List of blogs