---
tags: Vue 直播班 - 2021 夏季班
---

# 6/15 線上 Slack 助教

## 今日助教輪班時間

Ryder：6/15 (二)
回覆時間：早上 9:00 -下午 1:00

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊

## 問題

1. LiShang：

cli create專案報錯
嗨助教 我在create專案時，他在安裝的最後抱錯跑出以下訊息。專案建立後，無法npm run serve。 看起來是跟python的版本造成的問題QQ

gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:199:21)
gyp verb `which` failed  python2 Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:199:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` failed Error: not found: python
gyp verb `which` failed     at getNotFoundError (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:199:21)
gyp verb `which` failed  python Error: not found: python
gyp verb `which` failed     at getNotFoundError (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:199:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb could not find "python". checking python launcher
gyp verb could not find "python". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\node-gyp\lib\configure.js:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack     at callback (C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\graceful-fs\polyfills.js:299:20)
gyp ERR! stack     at FSReqCallback.oncomplete (node:fs:199:21)
gyp ERR! System Windows_NT 10.0.19043
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\user\\Desktop\\vue cli w6 demo\\vuedemo\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\user\Desktop\vue cli w6 demo\vuedemo\node_modules\node-sass
gyp ERR! node -v v15.4.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.14.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2021-06-15T01_38_55_152Z-debug.log (edited) 

https://github.com/Li-Shang-tw/clierror 這是我的檔案，我是按照教學create專案時報錯的

> 助教回覆： 助教這邊有把 node 切換到同學的 15.40 版本， 再使用 npm run serve 指令，確實會發生錯誤。
> 這邊請同學將 node 版本降低至 14.16 後，在重新
> ` npm install `
> 接著再使用
> `npm run serve `
> 試試看哩，目前助教這樣操作後是能夠運行的哩。
> 再補充一點， node 版本切換可以使用 nvm 這個工具來做切換，nvm 安裝及使用，可以參考這篇文章: https://ithelp.ithome.com.tw/articles/10207177

---

2. Wel
助教好 想請教Vue Cli的問題，寫code時空格沒有空好，或是多加分號，Vue就會跳錯，有查過網路說是eslint警告，但這個很困擾，不知道有沒有解決方法？
https://github.com/Magic556679/demo

> 助教回覆： 這邊建議同學熟悉 ESLint 的提示，修改目前的習慣哩，因為要解決 ESLint 的警告，通常就是要直接關閉 ESLint ，這邊就是要透過 ESLint 來讓同學養成良好的開發習慣。
> 在實作時多數團隊都也會開啟 ESLint 等等規範，以避免程式碼太亂。
> 另外，本次最終作業部分，如果關閉 ESLint 會直接被退件，不進行批改喔。
> 補充一點: 如果真的真的需要關閉 eslint ，請將 .eslintrc.js 中的 '@vue/standard' 移除，再重新 npm run serve ，就是關閉 ESLint
---
3.Yi Chieh :
老師助教同學們好，這是我的 GitHub
請問在 src/components/UpdateModal.vue 的410 行，為什麼使用 props 進來的 product 資料不會及時傳遞進來？再一次點擊相同品項才會查看到 product 資料傳入(在 411 行有 console.log 檢查)
是否哪裡的寫法需要修正呢，還請助教幫我解答，謝謝辛苦了:woman-bowing:
https://github.com/umon752/Vue-week6/blob/gh-pages/src/components/UpdateModal.vue
> 助教回覆：
> 助教這邊釐清一下，同學是想問 UpdateModal.vue 411 行
> console.log('內層 product', this.product);
> 為什麼在一開始 mounted 時，沒有資料傳入，要等到點擊商品後才會有資料傳入。
>
> 如果助教理解沒錯，這是因為 this.product 這個 props 是透過 Admin.vue 中的 productObj 值來傳入的。
> productObj 的值有做變更，this.product 這個 props 才會一起變更。
> 目前這邊看 productObj 只有在開啟 modal (編輯、刪除、新增) 才會調整到 productObj 的值哩，因此同學這邊狀況確實是只有編輯商品時 this.product 才會有資料出現哩。
>

---
4.Iven:
助教您好：
我有Vue CLI推到push到github上的問題，我的流程是，
1.npm run build 先打包
2.git init 初始化
3.git add . 加入所有資料
4.git commit -m "first"
5.git branch -M main
6.git remote add 到建立的網址
7.git push -u origin
推上去之後 回到本地端的專案 把在gitignore的/dist刪除
接著 git push origin main 之後出現，Everything up-to-date
但是dist資料夾沒有成功被push到github上，
請問我是不是少了哪個步驟，導致我的dist推不上去，另外想在請問一下助教，推上去之後是不是需要修改路徑呢？
這裡是我的github 再麻煩助教回覆了，謝謝。

> 助教回覆： 這邊 1-7 都是正確的。
> 但是 7 之後，資料夾中有做修改動作，並需要上傳，就會需要重新執行以下指令
> 2-1. git add .
> 2-2. git commit -m "移除 gitignore /dist"
> 2-3. git push origin main
> 提醒一下 2-2 雙引號 "" 中的內容是自訂義的
> 有按照上面指令調整後，GitHub 就會更新囉。
> 另外若要開啟 GitHub Page ，確實可以按照這篇[文章](https://tzuhui.github.io/2020/03/02/Vue/Vue-CLI3-to-github-pages/)介紹的修改 Vue cli 路由方法，去做調整哩。
---
5.圈圈:
助教好，我把新增/編輯產品單獨拉出來一個元件ProductEditModal，並用 props 將 tempProduct 這物件傳進去綁定 v-model 。可能是因為單向數據流的關係跳錯 Unexpected mutation of "tempProduct" prop
這是我的 github
我有兩個問題
1.物件不是應該有物件傳參考值，可以用 props 嗎
2.有看這個[影片]([https://](https://courses.hexschool.com/courses/vue-2021/lectures/31863572))，想詢問如果是物件，是否有更簡略的寫法，不用每個值都用 v-model:t1="text" 這樣去傳
https://github.com/vvvvvvii/vue-homework/tree/main/week06/src

> 助教回覆：助教這邊一一回覆你的問題

> 1.物件確實有物件傳參考特性，不過 props 是經過 Vue 包裝的功能，在 Vue 包裝之下是不用擔心這件事哩，也就是即使同學 props 傳入的是物件，並且修改這個物件的屬性，他也不會影響到外層喔。
> 另外這邊看 ProductAdmin.vue 中的 <product-edit-modal> 沒使用到 tempProduct 這個 props ，因此後台商品頁會跳出許多錯誤。
>助教這邊補上後能夠正確使用，但沒看到同學說的警告哩，這邊如果還有問題，請同學確認一下狀況再提出哩。

> 2.影片中的方法因為有綁定 v-model ，因此使用這個方法，只能一個一個調整。
但這邊還是要了解同學的需求是什麼喔，如果是要將 modal 綁定的物件資料移到外層，那可以在 modal 確認 (完成編輯) 使用 $emit 方法，將指定物件資料傳至外層喔。
詳細狀況還是要等同學提出來，才完整給出建議哩。
---
(這邊只能由助教編輯，問題請到 thread 上詢問)