在進入專案開發的部分之前
今天用幾個實務上的情境問題，來統整第二部分的所有內容
答案的部分在前面的系列文、官方文件和延伸閱讀都找的到

前言

小通今天進到一家新的公司，擔任初階前端工程師
他剛進到公司後的主要任務，是完成一個形象網站，包括：
包含一般使用者的前台、後台、以及管理員的管理後台

一、建立專案

今天小通的團隊，是使用 Quasar 框架
他的主管希望他先了解，如何使用Quasar CLI 建立一個新的Quasar專案

情境1.安裝Quasar CLI 的工具

小通照著官方文件指示，打開了系統的終端機，輸入了「npm install -s @quasar/cli」
結果出現了「npm not found」，請問：

1. 小通需要在電腦安裝什麼，才可以執行 「npm install -s @quasar/cli」？
2. 小通為了在電腦上安裝Quasar CLI，在終端機輸入的「npm install -s @quasar/cli」，接著小通將電腦路徑切換到「D:\project」， 使用Quasar CLI的指令，會發生什麼問題？安裝CLI的指令該怎麼修正？如果他手賤不小心安裝下去了，該怎麼移除？
3. 小通要如何確認電腦上已經成功安裝Quasar CLI？並查看Quasar CLI有哪些指令？
4. 小通想知道Quasar CLI的create指令有哪些參數，他該怎麼下？

情境2. 使用Quasar CLI 建立專案

1. 如果要讓網站在瀏覽器預設顯示的Title要叫「安安你好嗎」，請問這個部分是安裝過程的哪一個問題？
2. 如果要讓網站在Google 搜尋引擎上的介紹預設顯示「安安我不好」，請問這個部分是安裝過程的哪一個問題？
3. 小通把專案建立完了之後，可以在終端機透過什麼指令，確定建立好的專案可以正常執行？
4. 如果小通希望使用「npm run dev -- [mode]」，來簡化「quasar dev -m [mode]」，該到哪個檔案底下做什麼設定？
   例如：輸入「npm run dev -- ssr」 等同於執行「quasar dev -m ssr」
5. 如果你接手某人的Quasar專案，從Git Clone到你的電腦，為何無法在專案資料夾底下，透過終端機執行「quasar dev」？

二、熟悉Quasar框架的目錄架構

情境3. 讓小通了解Quasar每個目錄和檔案的作用

公司的主管看到小通成功使用Quasar CLI 建立一個專案後
依照專案開發要了解的問題，提出問題請小通研究：

1. 專案的預設語系、Quasar Plugin、使用到的ICON套件、使用到的動畫類型，請問該修改專案資料夾當中的哪一個檔案？
2. 每個專案需要有三個環境變數的檔案，放在專案的根目錄底下，包括「.env.sample」、「.env.development」、「.env.production」，其中「.env.production」，其中只有「.env.sample」可以放到Git版本控制當中，請問他該修改專案資料夾當中的哪個檔案？
3. 假設新的網站的前端專案是佈署在IIS上面，需要有一個「Web.config」設定網址重寫，請問「Web.config」檔案該放在專案的哪一個資料夾底下？
4. 新的專案版型包含「一般使用者的前台(Front)」、「一般使用者的後台(Back)」、「管理後台(Admin)」，這些版型的Vue檔案要放在哪個資料夾？
5. 假設在專案在src/asset底下，存放了一個「xxx.jpg」，並且在「pages/Index.vue」頁面使用到那個圖片，經過「quasar build」成功打包編譯後，「dist/spa」底下找不到任何「xxx.jpg」，請問是正常的嗎？為什麼？
6. 新的專案前台包含了「首頁」、「產品介紹」、「關於安安」、「聯絡安安」，請問這些頁面該放在哪個資料夾底下？
7. 網站有些頁面常用的內容，可以將它封裝成獨立的元件，放在哪一個資料夾？
8. 每次第一次進入網站的時候，網站需要先從Cookie取得會員的登入狀態資料，存放到Vuex，請問這個流程的程式檔案要放在哪個資料夾底下？有關Vuex的資料夾是哪一個？
9. 一般使用者的後台的頁面只允許有登入的使用者可以進入，管理後台的頁面只允許管理員身分的會員可以進入，請問如果要針對某幾個頁面的網址，設定必須登入，以及限制的登入的身分，要修改哪一個檔案？
10. 請問形象網站是否需要SSR？網站的管理後台是否需要SSR？為什麼？

三、Webpack 開發測試伺服器

情境4. 小通在使用 Webpack 開發測試伺服器遇到的問題

1. 小通用「quasar dev」啟動網站的測試伺服器，發現每次修改完程式碼後存檔，有時候網頁會整個重新整理，有時候不會，請問是為什麼？
2. 小通要在測試環境測試後端同事的API，打開測試伺服器的網頁之後，出現了下面的錯誤訊息，請問發生這個錯誤的原因是什麼？

XMLHttpRequest cannot load https://api.example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

3. 主管告訴小通，團隊的大括號風格要改成如下，請問他要在哪個檔案，加入什麼規則？讓他可以在寫程式的時候可以即時檢查這項Coding Style？

if ()
{

}
else
{

}

4. 有一天主管發現小通的專案，ES Lint 只會檢查 JS的 Coding Style和程式碼錯誤，不會檢查任何Vue的語法錯誤，請問小通該如何修正，讓ES Lint 檢查 Vue的語法錯誤？

5. 主管告訴小通，在專案的「src」資料夾底下，建立一個lib資料夾，存放一些內部開發常用的lib，這個lib是很久以前某個同事寫的，功能正常，只是很多Coding Style與現在的規範不同，可以忽略。小通要怎麼設定讓ES Lint 在編譯打包的時候不會檢查lib底下的檔案程式碼？

四、Webpack 編譯與打包

1. 如果小通要修改quasar build 預設產生的資料夾名稱，該在哪個檔案做什麼修改？
2. 小通比較習慣CommonJS的方式來拆分程式碼模組，主管知道後，為何告訴小通改為ESModule的方式拆分？
3. 每一次編譯完之後，為什麼會產生這麼多JS和CSS檔案，而且檔案名稱會有部分的內容改變，裡面的內容也全部都連在一起？
4. 小通如果要把Quasar 編譯完後的SPA網頁給後端佈署到伺服器，請問他要給後端哪些檔案？是不是整個dist資料夾？