# Vue3 + Vuetify3 後台頁面模板整理

**Material Design 為基礎開發的VueUI 框架**

今年切了兩個後台都是 Vue + Vuetify
所以把相關寫過的ＪＳ 整理成模板
方便日後大家如果需要可以直接使用

目前放入的都是比較常用的部分
選擇 Vuetify 的原因為已有相關的開發經驗
如果之後有需要 也可考慮其他VueＵＩ框架
如:PrimeVue
詳細的元件設定 可以參考Vuetify文件

ps.Vuetify3是搭配Vite編譯 跟Vuetify2 的 Vue CLI的webpack不太一樣

## 開啟Vue檔案

### readme的開啟指令

npm install > npm run dev

### 可以先看路由檔案 router 及 main.js

#### src/router/index.js
清楚整個專案的路徑及分配位置
比較容易找到相關的頁面及模組


#### main.js ＆ App.vue
整個網站的配置 套件及ＣＳＳ掛載
會放在這兩個檔案中


#### CSS 的部分為 Sass及 style 資料夾

Sass 資料夾 為 新增的ＣＳＳ
style 資料夾 為 Vuetify框架的ＣＳＳ

## 如需要設定 Vuetify框架的檔案 比較需要注意的部分為

### src/plugins/vuetify.js

這個檔案主要設定 ＣＳＳ相關 主色、樣式、icon樣式


### src/vite.config.js

要設定 Sourcemap 才找的到 ＣＳＳ


### 部署檔案 deploy.sh 檔案

要設定好 git push 要推向的檔案位置


<style>
h3{
color:#5865af;
}
</style>