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

內容

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

學習目標

• 如何在本地端電腦透過 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 畫面

• 網址 http://localhost:8080/

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

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

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/
• https://github.com/ArcherHuang/Blog-LearningSky.io