关于前端:前端命名规范

命名类型

总共有三种命名形式:

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