# Vuetify ? By Jimmy 111/03/22 --- ## Vue Review -- ### Folder Structure ----  ---- #### node_modules 存放經npm/yarn安裝後的套件 <br> #### public 公共檔案目錄（不經壓縮處理） ---- #### src 開發目錄上層 * assets 主要為靜態資源--css.image.icon.font... * components 頁面元件存放路徑 * router 路由定義 * views 路由元件 * app.vue 專案主元件，在此進行路由切換 * main.js 初始化vue元件並load需要的plugins ---- #### babel.config.js babel規則配置檔 #### package.json project的元件包 #### yarn.lock 統一鎖定所有套件的版本號，避免不可預測的bug出現 --- ## Vuetify 基本介紹 ---- ### Website = Html + Css + JavaScript ---- ## Just HTML  ---- ## 透過CSS來美化網頁 ---- ### Vuetify：建立在Vue.js之上的一種Material Design框架 ### 美化介面的一種工具 --- ## Vuetify基礎教學 ---- ## [v-app](https://vuetifyjs.com/zh-Hans/components/application/) #### 幫助user在跨瀏覽器時，自動變更成適合那個瀏覽器的重要組件，缺乏他的話可能會造成你在跨瀏覽器時出現問題，而且還找不到原因！ #### （EX: Firefox執行正常，但Chrome可能直接壞掉） ---- ## [v-main](https://vuetifyjs.com/zh-Hans/components/application/) #### 讓網頁內所有的組件在畫面縮小或放大時，能夠自己適應畫面的大小，而不會直接壞掉。 ---- ## [v-container](https://vuetifyjs.com/en/api/v-container/#links) #### 幫組件跟組件之間抓出恰當的距離，才不會讓組件擠成一坨。 ### 基本上組件都是放在v-container裡面 ---- ## [v-col & v-row](https://vuetifyjs.com/zh-Hans/components/grids/) #### 只能row裡面放col, 不能col裡面放row！！  ---- ### v-col?? 由於vuetify本身的cols，屬性是以手機為標準，並把螢幕切成12等分，所以可以想像一下card可以放多少cols在裡面。 Q:如何把手機跟電腦螢幕大小做區隔？ A:直接加屬性在col上面就行了，至於斷點的部分在說明文件上都有詳細描述。 ---- ## [v-card](https://vuetifyjs.com/zh-Hans/components/cards/) #### 簡單來說就是一般的卡片（ex賀禮卡），有一定的格式跟規範，如果不想follow格式的話，也可以用"v-sheet"。 --- ## 再來就進入實作環節～ ---- At first, this is our goal. ## [Goal](https://vuetifyjs.com/zh-Hans/examples/wireframes/extended-toolbar/) #### * 只要完成Card的部分就好 #### * ToolBar的部分是進階題，完成的人可以挑戰！ ---- ### Start!!! ```shell= vue create xx ``` ** xx為你要打的project name ---- ### 再來選“Manually select features”  #### 按照圖片選就好（一般就是再多選Router跟Vuex）就行 ---- ### 記得formatter選“EsLint+Prettier”  ---- ```shell= cd xx (xx為你打的project name) ``` ```shell= vue add vuetify ``` #### 等啊等... ```shell= code . ``` ---- ### 接下來可以建立一個.vue檔在componments的folder裡面 ### 就可以開始刻板ㄌ --- # End!!!