---
# System prepended metadata

title: Vue Codeing Style Collection 撰寫風格整理

---

# 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. 三個以上的屬性，逐行顯示
```htmlembedded=
<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，一行搞定
```htmlembedded=
<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)
```javascript=
const emailInput = ref('');
const checkEmail = function(){...}
```
3. 變數與函式為一對一的關係時，**主詞一致並且並排**。
```javascript=
// 居住地
const cityOption = ref([]);
const getCityOption = function(){
    ...
}
const setCityOption = function(){
    ...
}
```
4. 函式命名為 **"動詞+主詞"**
```javascript=
// 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
```css=
App.vue
// 單獨掛入字體
.font-cursive{
    font-family: cursive
}
// 滑鼠手指
.pointer{
    cursor: pointer;
}

views/xxx.vue
// 商品預覽卡
.product-card{
    .card-title{
        ...
    }
    .card-content{
        ...
    }
}
```
5. 註解使用 /* */ [轉譯css會有註解]