前端命名规范

命名类型

总共有三种命名方式:

• 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 
 }
}