AndrewPythonQuasar

 Quasar 的 MainLayout 元件 當我們以 Quasar CLI 建立一個標準的 MPA 如下，這個網頁分成幾個部分，首先是左邊會有一個選單，這個選單的開關就在上方的 [三] 按鈕，上方藍色的部分是 Toolbar，顯示網站的名稱以及 Quasar 的版本。 控制這些介面的核心，就在於 MainLayout 元件。今天我將會分享以下的主題： MainLayout 元件 使用 Layout Biulder 將 Home / About / News 加入 Drawer (Mobile App Style) 將 Home / About / News 加入 Tab (Web Style) MainLayout 元件 首先我們看一下 MainLayout.vue 裡面的 <template> 段。 < template >   < q-layout view = "lHh Lpr lFf" >     < q-header elevated >       < q-toolbar >         < q-btn           flat           dense           round           icon = "menu"           aria-label = "Menu"           @ click =" toggleLeftDrawer "         / >         < q-toolbar-title >           Quasar App     ...

Vue 與 Quasar 的路由介紹 在前一篇分享中，我分別使用 vue create 與 quasar create 內定選項建立了兩個專案，請保留這兩個專案，我們在後面的分享會用到。由 vue 建立的專案，是一個 SPA (Single Page Application)， 而由Quasar 建立的專案，由於有 Drawer 選單，所以可以視為一個 MPA (Multiple Page Application) 多頁式應用程式。 如果是一個多頁式應用程式，我們該如何控制在不同的網頁中切換呢？就必須使用 Vue Router來控制。接下來，我就來介紹 Vue Router 的用法。 今天分享的內容會包含： 用 Vue CLI 建立一個多頁式應用程式 Vue Router 介紹 以 Quasar CLI 建立一個多頁式應用程式 Hash Mode 與 History Mode 的差異 新增 About, News 兩個子網頁 用 Vue 建立一個多頁式應用程式 先執行 power shell 或 cmd，進入 projects 目錄，在 cmd 中輸入 vue create hellovue2，但這次不要用 Default 選項，選擇手動。 Vue CLI v4.5.15 ? Please pick a preset:   Default ([Vue 2] babel, eslint)   Default (Vue 3) ([Vue 3] babel, eslint)  > Manually select features 按下 Enter 之後，會出現下面的選單： Vue CLI v4.5.15 ? Please pick a preset: Manually select features ? Check the features needed for your project:   (*) Choose Vue version  (*) Babel  ( ) TypeScript  ( ) Progressive Web App (PWA) Support         >(*) Router  ( ) Vue...