• 學習進度
• 參考資料
• 實用指令
  • 2023-04-23 可在 wsl2 使用的指令，安裝 vite 在當前目錄
  • 2023-11-08 npm 版本的指令
• 目前用 VUE 上線 HEROKU 的流程紀錄
  • 皆於該專案資料夾下執行
• 20211226 聚餐後
• 登入相關
• table 相關
• cors
• laravel 中 2 升 3 的流程
• PWA
• 他人上 heroku 的作法
• 六角 CICD 影片
• vue3 + firebase storage

學習進度

• vue3 + ts 目前進度
• vue3 + ts 目錄

參考資料

• VueConf 尤雨溪
• 【尚硅谷】2021最新Vue技术全家桶
• 使用docerk 上線 heroku
• 優雅的在vue中使用TypeScript
• 这一篇，带你更深入的理解 Vite SSR
• Vue3为什么推荐使用ref而不是reactive
• 面试官问我按钮级别权限怎么控制，我说v-if，面试官说再见
• 入职之前，狂补技术，4w字的前端技术解决方案送给你（vue3 + vite ）

實用指令

• docker run –rm -v "${PWD}:/app" -w "/app" -u node -it node:lts sh -c "yarn add global @vue/cli && yarn exec vue create ."
  • 使用node 的基本指令
• docker run –rm -p 8080:8080 -v "${PWD}:/app" -w "/app" -u node -it node:lts sh -c "npm run serve"
  • 在本地端開啟 vue 專案
• docker run –rm -v "${PWD}:/app" -w "/app" -u node -it node:lts sh -c "npm run build"
  • build 能上線的 dist 資料夾
• 在當前目錄安裝 vue3

docker run --rm -v "${PWD}:/$(basename `pwd`)" -w "/$(basename `pwd`)" -it node:alpine sh -c "yarn global add @vue/cli && vue create ."

• 能直接使用各種的指令

docker run --rm -v "${PWD}:/$(basename `pwd`)" -w "/$(basename `pwd`)" -p 8080:8080 -it node:alpine sh -c "yarn serve"

2023-04-23 可在 wsl2 使用的指令，安裝 vite 在當前目錄

# 安裝 vite
docker run --rm -it -v $(pwd):/app -w /app -u $(id -u):$(id -g) node:16 sh -c "yarn create vite"

# 移動到專案資料夾後 yarn
cd <PROJECTNAME> && \
    docker run --rm -it -v $(pwd):/app -w /app -u $(id -u):$(id -g) node:16 yarn

# 開啟 vite service
docker run --rm -it -v $(pwd):/app -w /app -p 5173:5173 -u $(id -u):$(id -g) node:16 yarn dev --host

2023-11-08 npm 版本的指令

# 新建立 vite 專案
docker run --rm -it -v $(pwd):/app -w /app -u $(id -u):$(id -g) node:16-slim npm create vite@latest PROJECTNAME -- --template vue

# 進專案安裝套件
docker run --rm -it -v $(pwd):/app -w /app -u $(id -u):$(id -g) node:16-slim npm install

# 本地環境
docker run --rm -it -v $(pwd):/app -w /app -p 5173:5173 -u $(id -u):$(id -g) node:16-slim npm run dev -- --host

目前用 VUE 上線 HEROKU 的流程紀錄

皆於該專案資料夾下執行

• docker run –rm -v "${PWD}:/app" -w "/app" -u node -it node:lts sh -c "npm run build"
  • 先 build 專案
• /usr/local/bin/heroku container:login
  • 登入
• /usr/local/bin/heroku container:push web -a docker-vue-web
  • 推上去
• /usr/local/bin/heroku container:release web -a docker-vue-web
  • release
• /usr/local/bin/heroku open -a docker-vue-web
  • 開啟線上頁面
    • wsl 會 fail

20211226 聚餐後

• 正文提到的幾個實用工具
  • Quasar
    • 簡單介紹
  • ionic
    • 簡單介紹

登入相關

• VueJS 教學筆記: Login 登入機制實作
• Vue-vue出一個電商網站2-製作出登入頁面

table 相關

• 在 bootstrap-vue table row 中增添 button 的作法

cors

• 為什麼會發生

laravel 中 2 升 3 的流程

• 網址

PWA

• 稍微解釋

他人上 heroku 的作法

• 參考

六角 CICD 影片

• 連結
• yml 檔案

vue3 + firebase storage

• 鐵人賽文章
• 開箱26:Vue 3 + Firebase Storage存儲服務簡單實作