一、建立專案

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

情境1.安裝Quasar CLI 的工具

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

1. 小通需要在電腦安裝什麼，才可以執行 「npm install -s @quasar/cli」？

根據Quasar 的官方文件說明：
Make sure that you have Node >=10 and NPM >=5 installed on your machine.

2. 小通為了在電腦上安裝Quasar CLI，在終端機輸入的「npm install -s @quasar/cli」，接著小通將電腦路徑切換到「D:\project」， 使用Quasar CLI的指令，會發生什麼問題？安裝CLI的指令該怎麼修正？如果他手賤不小心安裝下去了，該怎麼移除？

(1)執行 npm install -s @quasar/cli 之後，他會在你「目前」的資料夾位置安裝 「Quasar CLI」
離開了當前路徑之後，使用Quasar CLI 的指令，會出現「'quasar' 不是內部或外部命令、可執行的程式或批次檔。」或「quasar not found」，無法執行Quasar CLI 的指令

(2)安裝指令應該修正為 「npm install -g  @quasar/cli」，這樣子在任何路徑都可以使用Quasar CLI 的工具指令

(3)如果手賤安裝下去，可以在原本的安裝路徑下，執行「npm uninstall -s @quasar/cli」移除

3. 小通要如何確認電腦上已經成功安裝Quasar CLI？並查看Quasar CLI有哪些指令？

$ quasar -v
1.1.0

4. 小通想知道Quasar CLI的create指令有哪些參數，他該怎麼下？

$ quasar create -h

  Description
    Creates a Quasar App or App Extension project folder

  Usage
    $ quasar create <project-name> [--kit <kit-name>] [--branch <version-name>]

  App Examples
    $ quasar create my-project
      # installs an App project with the latest App starter kit
    $ quasar create my-project --branch v0.17
      # installs an App project from a specific version (only major+minor version)
    $ quasar create my-project --kit user/github-starter-kit
      # installs an App project with a custom starter kit from GitHub
    $ quasar create my-project --kit ./starter-kit-folder
      # installs an App project using a starter kit located at ./starter-kit-folder

  App Extension Examples
    $ quasar create my-extension-project --kit app-extension
      # installs an App Extension project with the latest Quasar App Extension starter kit
    $ quasar create my-extension-project --kit user/github-extension-starter-kit
      # installs an App Extension project with a custom starter kit from GitHub
    $ quasar create my-extension-project --kit user/github-extension-starter-kit --branch dev
      # installs an App Extension project with a custom starter kit from GitHub using the dev branch

  Options
    --kit, -k      Use specific starter kit
    --branch, -b   Use specific branch of the starter kit
    --clone, -c    Use git clone
    --offline, -o  Use a cached starter kit
    --help, -h     Displays this message

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

1. 如果要讓網站在瀏覽器預設顯示的Title要叫「安安你好嗎」，請問這個部分是安裝過程的哪一個問題？
2. 如果要讓網站在Google 搜尋引擎上的介紹預設顯示「安安我不好」，請問這個部分是安裝過程的哪一個問題？

? Project product name (must start with letter if building mobile apps) 安安你好嗎

? Project description 安安我不好

這兩個問題的回答會分別寫到Package.json裡面
每當Webpack編譯的時候帶入src/index.template.html
如下方兩張圖的藍色與黃色標示處

3. 小通把專案建立完了之後，可以在終端機透過什麼指令，確定建立好的專案可以正常執行？

切到專案資料夾底下，執行「quasar dev」

4. 如果小通希望使用「npm run dev -- [mode]」，來簡化「quasar dev -m [mode]」，該到哪個檔案底下做什麼設定？
   例如：輸入「npm run dev -- ssr」 等同於執行「quasar dev -m ssr」

"scripts": {
    "dev": "quasar dev -m"
}

5. 如果你接手某人的Quasar專案，從Git Clone到你的電腦，為何無法在專案資料夾底下，透過終端機執行「quasar dev」？

從Git下來的專案，並不包「node_modules」的資料夾與所有套件檔案
需要先執行「npm install」將package.json裡面的所有套件下載到專案目錄底下

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

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

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

1. 專案的預設語系、Quasar Plugin、使用到的ICON套件、使用到的動畫類型，請問該修改專案資料夾當中的哪一個檔案？

quasar.config.js

2. 每個專案需要有三個環境變數的檔案，放在專案的根目錄底下，包括「.env.sample」、「.env.development」、「.env.production」，其中「.env.production」，其中只有「.env.sample」可以放到Git版本控制當中，請問他該修改專案資料夾當中的哪個檔案？

.gitignore

3. 假設新的網站的前端專案是佈署在IIS上面，需要有一個「Web.config」設定網址重寫，請問「Web.config」檔案該放在專案的哪一個資料夾底下？

public

4. 新的專案版型包含「一般使用者的前台(Front)」、「一般使用者的後台(Back)」、「管理後台(Admin)」，這些版型的Vue檔案要放在哪個資料夾？

src/layouts

5. 假設在專案在src/asset底下，存放了一個「xxx.jpg」，並且在「pages/Index.vue」頁面使用到那個圖片，經過「quasar build」成功打包編譯後，「dist/spa」底下找不到任何「xxx.jpg」，請問是正常的嗎？為什麼？

正常，圖片經過url loader 和 file loader處理後，轉成base64，存放在前端的程式碼

6. 新的專案前台包含了「首頁」、「產品介紹」、「關於安安」、「聯絡安安」，請問這些頁面該放在哪個資料夾底下？

src/pages

7. 網站有些頁面常用的內容，可以將它封裝成獨立的元件，放在哪一個資料夾？

src/components

8. 每次第一次進入網站的時候，網站需要先從Cookie取得會員的登入狀態資料，存放到Vuex，請問這個流程的程式檔案要放在哪個資料夾底下？有關Vuex的資料夾是哪一個？

在「scr/boot」資料夾，新增一個cookie.js
將取得cookie的過程在cookie.js寫在export default function ({ssrContext}) {} 裡面

有關Vuex的資料夾是 「src/store」

9. 一般使用者的後台的頁面只允許有登入的使用者可以進入，管理後台的頁面只允許管理員身分的會員可以進入，請問如果要針對某幾個頁面的網址，設定必須登入，以及限制的登入的身分，要修改哪一個檔案？

在「src/router/routes.js」
針對每個頁面，設定 meta: {} 來註記必須登入，以及限制登入的身分

例如：

// http://xxx.com.tw/backend/
// http://xxx.com.tw/backend/area01
// http://xxx.com.tw/backend/area01/post
// http://xxx.com.tw/backend/area01/edit/01

{
    path: '/backend',
    component: () => import('layouts/Back.vue'),
    children: [
      { path: '', name: 'back.index', component: () => import('pages/Index.vue') },
      {
        path: '/area01',
        component: { render: h => h('router-view') },　/* 使用父層的Layout component */
        children: [
          { path: '', name: 'back.area01.list', component: () => import('pages/back/area01/list.vue'), meta: { requireLogin: true, roles: ['user'] } },
          { path: 'post', name: 'back.area01.post', component: () => import('pages/back/area01/post.vue'), meta: { requireLogin: true, roles: ['user', 'manager'] } },
          { path: 'edit/:ID', name: 'back.area01.edit', component: () => import('pages/back/area01/edit.vue'), meta: { requireLogin: true, roles: ['user', 'manager'] } },
        ]
      }
    ]
}

10. 請問形象網站是否需要SSR？網站的管理後台是否需要SSR？為什麼？

形象網站需要搜尋引擎的曝光，需要SSR解決SPA的SEO問題
網站的管理後台通常是不能在搜尋引擎上曝光，甚在拆開成獨立的位置，因此不需要SSR

三、Webpack 開發測試伺服器

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

1. 小通用「quasar dev」啟動網站的測試伺服器，發現每次修改完程式碼後存檔，有時候網頁會整個重新整理，有時候不會，請問是為什麼？

透過 hot module replacement 將更改前與更改後的資訊轉換成hash值做比對
決定是否更新部分的內容，或者重新整理畫面

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.

quasar dev 啟動的Webpack Dev HTTP Server，預設網址是「http://localhost:8080」，跟API的網址「https://api.example.com」是屬於不同的網址來源，API端也不允許來自「https://api.example.com」的的 client端 request
所以你從瀏覽器打開後，此Request不符合CORS 同源政策，由瀏覽器端檔下來

解法有兩種，一種是請後端於API端允許http://localhost:8080 的Origin，另外一個是透過Webpack的 devServer 設定 Proxy，並將Origin改變成和後端API相同

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

if ()
{

}
else
{

}

檔案「.eslintrc.js」 的「rules:[]」裡面，加入下面的規則：
'brace-style': 'allman'

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

檢查檔案「.eslintrc.js」 的「extends」，是否包含下面三個其中任一個
'plugin:vue/essential', // Priority A: Essential (Error Prevention)
'plugin:vue/strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)

沒有的話，依照文件安裝Plugin，並將規則加到.eslintrc.js
https://eslint.vuejs.org/user-guide/#installation

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

在檔案「.eslintignore」裡面加入「/src/lib」

四、Webpack 編譯與打包

1. 如果小通要修改quasar build 預設產生的資料夾名稱，該在哪個檔案做什麼修改？

在 quasar.config.js　裡面的 build: {}
新增「distDir: 'dist/xxx',」，xxx就是build之後的資料夾名稱

2. 小通比較習慣CommonJS的方式來拆分程式碼模組，主管知道後，為何告訴小通改為ESModule的方式拆分？

CommonJs 是使用 require 與 module.exports 對模組引用與輸出，但不論如何都是「整支檔案」的輸出與輸入，無法像ESModule做到「部分」輸出與輸入。因此無法透過Tree Shaking 來移除不必要的程式碼。

3. 每一次編譯完之後，為什麼會產生這麼多JS和CSS檔案，而且檔案名稱會有部分的內容改變，裡面的內容也全部都連在一起？

Code Splitting：將核心功能與和各個功能模組的程式碼拆分到不同的檔案，在需要的時候，以程式的方式動態載入

Cache Brusting：瀏覽器會用檔名來判斷是否需要更新檔案，如果檔案名稱一樣，它就不會重新下載。因此在檔案名稱裡面加上[chunkhash]，解決檔案更新時因快取存取到舊版的問題

Minify & Uglify：替除HTML、CSS、Javascript 的程式碼多餘的空白與空白行

4. 小通如果要把Quasar 編譯完後的SPA網頁給後端佈署到伺服器，請問他要給後端哪些檔案？是不是整個dist資料夾？

quasar build 打包後，會產生一個「dist」資料夾，裡面會有一個「spa」資料夾
把「spa」資料夾裡面的所有檔案壓縮交給後端佈署