[TOC]

# 學習進度
* [vue3 + ts 目前進度](https://youtu.be/GSKm_JCUL0Y?list=PLmOn9nNkQxJECrx-JlaaJaC2gthMP7B7r)
* [vue3 + ts 目錄](https://www.youtube.com/playlist?list=PLmOn9nNkQxJECrx-JlaaJaC2gthMP7B7r)

# 參考資料
* [VueConf 尤雨溪](https://www.youtube.com/watch?v=CtrKCHM-FAk&ab_channel=AnthonyFu)
* [【尚硅谷】2021最新Vue技术全家桶](https://www.youtube.com/watch?v=vj4Gf2gGUfU&list=PLmOn9nNkQxJEARHuEpVayY6ppiNlkvrnb)
* [使用docerk 上線 heroku](https://jonhnes.medium.com/vue-with-docker-since-creation-until-deployment-on-heroku-5b31c8f041a7)
* [優雅的在vue中使用TypeScript](https://iter01.com/543582.html)
* [这一篇，带你更深入的理解 Vite SSR](https://juejin.cn/post/7072272115470172190)
* [Vue3为什么推荐使用ref而不是reactive](https://juejin.cn/post/7270519061208154112)
* [面试官问我按钮级别权限怎么控制，我说v-if，面试官说再见](https://juejin.cn/post/7209648356530896953)
* [入职之前，狂补技术，4w字的前端技术解决方案送给你（vue3 + vite ）](https://juejin.cn/post/7251878440327512124)

# 實用指令
* 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
* [簡單介紹](https://ithelp.ithome.com.tw/articles/10201636)
* ionic
* [簡單介紹](https://ithelp.ithome.com.tw/articles/10157335)

# 登入相關
* [VueJS 教學筆記: Login 登入機制實作](https://hackmd.io/@FortesHuang/SyMAtS6qH)
* [Vue-vue出一個電商網站2-製作出登入頁面](https://landy510.github.io/2021/01/27/Vue-vue%E5%87%BA%E4%B8%80%E5%80%8B%E9%9B%BB%E5%95%86%E7%B6%B2%E7%AB%992-%E8%A3%BD%E4%BD%9C%E5%87%BA%E7%99%BB%E5%85%A5%E9%A0%81%E9%9D%A2/)

# table 相關
* [在 bootstrap-vue table row 中增添 button 的作法](https://youtu.be/6bcc7IheD3w?t=958)

# cors
* [為什麼會發生](https://blog.huli.tw/2021/02/19/cors-guide-1/)

# laravel 中 2 升 3 的流程
* [網址](https://learnku.com/articles/66573)

# PWA
* [稍微解釋](https://penueling.com/%E7%B7%9A%E4%B8%8A%E5%AD%B8%E7%BF%92/%E5%A6%82%E4%BD%95%E5%9C%A8-vue3-%E4%B8%AD%E4%BD%BF%E7%94%A8-pwa-%EF%BC%88chrome%EF%BC%89/)

# 他人上 heroku 的作法
* [參考](https://jonhnes.medium.com/vue-with-docker-since-creation-until-deployment-on-heroku-5b31c8f041a7)

# 六角 CICD 影片
* [連結](https://youtu.be/cUmSAGtP-70)
* [yml 檔案](https://github.com/Wcc723/node-ironman-sample-2023/blob/feature/action-pm2/.github/workflows/deploy-pm2.yml)

# vue3 + firebase storage
* 鐵人賽文章
* [開箱26:Vue 3 + Firebase Storage存儲服務簡單實作](https://ithelp.ithome.com.tw/articles/10338101)