# Vue Codeing Style Collection 撰寫風格整理
## File 檔案
### Views
1. 採用 "帕斯卡命名"(Pascal-Case)
2. 不要簡寫
3. 不要片語
> **X** GSView.vue (GoodSingleView.vue)
> **X** UserOfShopView.vue (User Of Shop)

4. 以 **"View"** 結尾
> Home**View**.vue
> User**View**.vue
> Product**View**.vue
> Trade**View**.vue

### Components
1. 採用 "帕斯卡命名"(Pascal-Case)
2. 不要簡寫
3. 不要片語
> **X** GIComponent.vue (GoodInfoComponent.vue)
> **X** InfoOfGoodComponent.vue (Info Of Good)

4. 元件以 **"Component"** 結尾
> Login**Component**.vue
> Report**Component**.vue

5. Component有父子關係時，命名必須接續前綴
> **Cart**Component.vue
> **CartItem**Component.vue

6. 共用元件以 **"Common"** 開頭
> **Common**Pagenation.vue
> **Common**Selecter.vue

7. 容器以 **"Container"** 結尾
> Header**Container**.vue
> Aside**Container**.vue

### custom
1. 存放套件客製調整的檔案
2. 名稱以套件名為開頭
> **bootstrap**-custom.scss
> **naive-ui**-custom.scss
> **naive-ui**-custom.js

### mixin
1. 專案本身會跨檔案使用的方法

## Document 文件
### HTML
1. 三個以上的屬性，逐行顯示

<div
v-for="page in pageList"
:key="page.key"
class="pointer d-none d-md-inline-block me-2 px-3 py-2 rounded border"
@click=" (nowPage = page.key)"
:class="{selected: nowPage === page.key}"
>
  {{page.name}}
</div>

2. 簡單處理函式寫在HTML裡 [測試] <font color="#f00">官方建議不要</font>
==注意== 不得寫return，一行搞定

<span
class="text-decoration-underline me-2 mb-1"
v-if="(districtId && districtOption.length > 0)"
>
  {{ districtOption.find((item) => item.value === districtId).label }}
</span>

### script
1. 使用setup

<script setup>

2. 採用 "駝峰式命名"(Camel-Case)

const emailInput = ref('');
const checkEmail = function(){...}

3. 變數與函式為一對一的關係時，**主詞一致並且並排**。

// 居住地
const cityOption = ref([]);
const getCityOption = function(){
    ...
}
const setCityOption = function(){
    ...
}

4. 函式命名為 **"動詞+主詞"**

// const getCityOption = function(){...}
// const setCityOption = function(){...}
// const openModal = function(){...}
// const closeModal = function(){...}

### style
1. 採用 “駝峰式命名”(Camel-Case)
1. 使用 lang="scss"

<style lang="scss">

3. App.vue以外，全部都要使用 scoped

<style scoped>

4. 共用的放在App.vue，特定的放在各自的.vue

App.vue
// 單獨掛入字體
.font-cursive{
    font-family: cursive
}
// 滑鼠手指
.pointer{
    cursor: pointer;
}

views/xxx.vue
// 商品預覽卡
.product-card{
    .card-title{
        ...
    }
    .card-content{
        ...
    }
}

5. 註解使用 /* */ [轉譯css會有註解]