命名類型

總共有三種命名方式:

• PasaCase：大寫駝峰式，如: MClas
• camelCase：小寫駝峰式，比如: MyClass
• kebab-case：小寫短橫線，比如:my-class

文件或文件夾的命名遵循以下原則:

• 定義對象，統一使用PascalCase(大寫駝峰式)命名規范
• 文件夾統使用kebab-case(小寫短橫線)命名規范
• 其他wue文件、js文件、css文件等，統使用kebab-case(小寫短橫線)命名規范

基本原則就是大多數文件以及文件夾都使用kebab-case(小寫短橫線)命名規范。

為什么我們都使用kebab-case(小寫短橫線)命名規范?

1.使用kebab-case命名的文件夾比camelCase命名的文件夾看起來更清晰
2.不同的操作系統對于文件名的大小寫處理方式不致，由于windows不區分大小寫，文件夾采用大小寫區分會導致linux發布失敗，同時也可能將這些大小寫帶入我們的url網址中導致url展示不美觀。

文件夾命名

文件夾統一使用kebab-case(小寫短橫線)命名規范。

其實，前期我們在通用組件定義的時候，統使用的是PascalCase(大寫駝峰式)命名規范的。

- src / components
  - SubMenu.vue
  - SysTabs
    - index.js 
    - sysTabs.vue
    - utils.js

類似上圖，會同時存在SysTabs 文件夾、index.js 、sysTabs.vue 這三種命名規范放在一 起，看起來很奇怪。

所以，我們將通用組件也使用kebab-case(小寫短橫線)命名規范。

- src / components
  - sub-menu.vue
  - sys-tabs
    - index.js 
    - sys-tabs.vue
    - utils.js

但是針對調用方便的情形，我們在定義通用組件的時候，使用PascalCase(大寫駝峰式)命名規范。

import SubMenu from '@/components/sub-menu'
import Searchfilter from '@/components/search-filter'

Vue. component('SubMenu', SubMenu)
Vue. component('SearchFllter', SearchFliter)

有復數結構時，要采用復數命名法。

例: pages, componets, filters, mixins ，images

文件命名

常用的CSS、JS. IMG、FONT、 VIDEO等資源。

默認文件命名參照目錄規范命名，使用kebab-case(小寫短橫線)命名規落

JS腳本文件命名

js、vue、ts等腳本語言

文件命名參照目錄規范命名，全部采用小寫字符、數字、連接符

例: index.js ，index.vue，news-detail.vue，sg-result.vue

對于組件、頁面等類型推薦使用目錄+ index.(vueljs)方式創建，通過文件目錄來組織方便擴展。

例: news-detail 資訊詳情頁，首先創建目錄news-detail,然后創建index.vue 文件

CSS樣式文件命名

scss css less 等樣式語言

命名參照目錄規范命名，全部采用小寫字符、數字、連接符-
例: index.scss stylesv1.scss news-info.scss

推薦不用連接符的簡短命名方式

資源文件命名

png jpg mp4 ttf 等資源文件

命名參照目錄規范命名，全部采用小寫字符、數字、連接符-
例: user-title.png aa-number.ttf my-video.mp4

路由命名

{
    path: '/news-detail',
    name: 'NewsDetail ，
    component: ()=>import('@/pages/news-detail/'), 
    meta: { title: '資訊詳情' }
}

路由的兩個命名:

• path: 路徑使用 kebab-case(小寫短橫線)
• name: 路由命名使用 PascalCase(大寫駝峰式)

path命名主要遵循以下原則:

• url中字母全部小寫
• 如果有單詞拼接，使用中劃線"-'
• 推薦使用query方式進行傳遞參數，不允許使用restful 模式。

例：不推薦使用下面的方式來接收ID參數

{
    path: ' /news -detail/:id' ,
    name: 'NewsDetail' ,
    component: () => import( '@/pages/news -detail/'), 
    meta: {title:"資訊詳情"}
}

但是可以通過這樣的模式來設置前端頁面類型，例如公告類型/news -detail/gg?id=1111要聞類型/news-detail/yw?id=1111

{
    path: ' /news -detail/:type' ,
    name: 'NewsDetail' ,
    component: () => import( '@/pages/news -detail/'), 
    meta: {title:"資訊詳情"}
}

變量命名

css變量命名

統一使用kebab-case(小寫短橫線)命名規范。

<style lang="scss"> 
    .page-home { 
    }
</style>

scss變量命名

統一使用kebab-case(小寫短橫線)命名規范。
例:Scolor-primary $bg-primary

js 變量命名

統一使用camelCase(小寫駝峰式)命名規范。
例:

let userInfo ={ khh: '02508e8e', name: 'XXX’ }
const isNew= false 

function setuserIno() {}

對于項目設置文件@/util/settingsjs里面注冊的全局變量可以使用全大寫
例：

export const config = { 
    SESSION_USER:"_login_user'，//留痕號KEY定義 
    SESSION_LHH:'user_v_id'，//用戶信息KEY定義
    IMGCDN: process.env.CDN+'/’+ process.env.DIST MODULE +'/static/images/’
    YWBL:process.env.YWBL_DOMAIN+'/app/cmbywbl/#', 
    CMBYWBL:process.env.YWBL DOMAIN +'/app/cmb/ywb1/#', 
    CZMm_URL:process.env.YWBL.DOMAIN+'/app/cmbywb1/#/resetPassword?khh='
    YKFX:process.env HOME DOMAIN+'/app/cmb/ykfx/
    XZSG:process.env.HOME_DOMAIN+/app/cmbxzsg/#/
    XGSG: process.env.HOME_DOMAIN +'/app/cmbxgsg/#/'
    originHttp:false //是否使用原生APP HTTP請求代理
 } 

export default { 
 insta11(Vue) { 
 	Vue.$config =Vue.prototype.$config = config 
 }
}