变量命名约定前言一个好的命名约定可以让你不用每天为取名而烦恼。当你发现bug时，你可以更快地定位到bug。组件的命名与其功能相匹配，与其他功能不匹配。业务组件同名，让人一目了然。它不一定要漂亮和酷，但它很实用。让开发者条件反射，看到名字就会想到这个组件的实际场景。易记易记，短小精炼，不繁琐。BEM.nav某显示/功能区(div).nav__item该显示/功能区(div)中的元素，例如：nav__item.nav__item--hide/.nav__item--open某元素或某块Donot在状态中添加敏感词。我曾经为一个元素分配了一个类作为广告，后来测试人员发现页面上缺少该元素。后来发现360浏览器开启了防广告模式，直接删除了这个div。函数的命名约定拼写准确。比如我的confirm和confrim就把函数不执行归结为代码逻辑问题。使用一般时态，尤其是代码中状态变量或函数的命名。比如onXxxxStarted表示xxx已经启动，isConnecting表示正在连接中。正确的时态可以向用户传达准确的信息。函数和属性的命名是有区别的。如果是函数，建议使用动宾结构。动宾结构是doSomething。这样的函数名含义明确，如：openFile,setName,addNumber...-**如果是属性名，建议使用Attributive+名词**如fileName,maxLength,textSize不要混用单词+拼音如：useJiFen,huKouNumber..不说缺乏美感，可读性也大打折扣。谨慎使用缩写除非它是已经按照约定广泛使用的缩写，否则应该诚实地使用完整拼写。典型的反面例子：count->cnt,manager->mgrpassword->pwdbutton->btn无论我们用eclipse还是intellij，都有一个很好的自动补全功能，名字长点无所谓，可读性更重要。命名语义（动词和名词的区别）Vue组件命名Ant.design的React组件如下，感觉自由自在。首先，组件名可以使用原生的HTML标签名，也就是说不用动脑筋去避开原生的HTML标签。此外，这些组件使用大写的标签名称，使它们很容易与本地小写HTML标签区分开来。ReactDOM.render(
Primary.com.jp.cn.org
,mountNode);基本组件命名应用特定样式和约定的基本组件（即表示性、无逻辑或无状态组件）都应以Start开头并带有特定前缀，例如Base、App或V。**反例**components/|-button.vue|-loading.vue|-slide.vue**正例**components/|-BaseButton.vue|-BaseLoading.vue|-BaseSlide.vue单个活动实例组件单个活动实例的组件应该是命名用前缀来显示它们的唯一性。这并不意味着该组件只能在单个页面中使用，而是每个页面只能使用一次。这些组件从不接受任何道具，因为它们是为您的应用程序定制的，而不是它们在您应用程序中的上下文。如果您发现有必要添加props，则说明这实际上是一个可重用的组件，目前每个页面只使用一次。**反例**components/|-SaleManage.vue|-ImportExcel.vue**正例**components/|-TheSaleManage.vue|-TheImportExcel.vue紧密耦合的组件名称和父组件紧耦合的子组件应该从父组件开始是命名前缀。如果一个组件只在其父组件的某个场景下有意义，这种关系应该体现在组件名称中，因为编辑器通常按字母顺序组织文件。**反例**组件/|-SearchBox.vue|-SearchItem.vue|-SearchButton.vue**正例**components/|-SearchBox.vue|-SearchBoxItem.vue|-SearchBoxButton.vueComponents命中词序Componentnamesshouldbestartwithhighlevel(通常描述性的）以单词开头并以描述性修饰符结束。**反例**组件/|-ClearSearchButton.vue|-ExcludeFromSearchInput.vue|-LaunchOnStartupCheckbox.vue|-RunSearchButton.vue|-SearchInput.vue|-TermsCheckbox.vue**正例**组件/|-SearchButtonClear.vue|-SearchButtonRun.vue|-SearchInputQuery.vue|-SearchInputExcludeGlob.vue|-SettingsCheckboxTerms.vue|-SettingsCheckboxLaunchOnStartup.vue完整词的组件名编辑器自动补全还是比较友好的，写长组件名的成本有beenreduced可以忽略不计，同样的效率比较好理解，何乐而不为呢？**反例**components/|-soManage.vue|-woManage.vue**正例**components/|-SaleOrderManage.vue|-WorkOrderManage。vueprop的大小写在声明时总是使用(camelCase)，在模板和JSX中应该总是使用(kebab-case)。只需遵循每种语言的约定即可。在JavaScript中更自然的是camelCase。在HTML中，它是kebab-case。**反例**props:{'greeting-text':String}
**正例**props:{greetingText:String}
vue中的变量命名约定变量命名的使用主要集中在数据和方法上。data中，名词和状态布尔名词较多：名词过多，大致分为复数、后缀以Arr、Obj为约定规则。StatusBoolean:1.表示是否，用is+:比如isEmpty表示是否，用has+...:比如hasClass表示是否，用can+...:比如单词canSubmit本身的形式（过去式,进行时,将来时):有start,ing,edend等方法handle+以下:dd/remove,add/removeadd/delete,add/deleteinsert/delete,insert/deletestart/stop,start/stopbegin/end,start/endsend/receive,send/receiveget/set,take/setget/release,get/releaseput/get,put/takeup/down,show/hideup/down,show/hide打开/close,open/关闭递增/递减,递增/递减lock/unlock,lock/unlocknext/previous,next/previouscreate/destroy,create/destroymin/max,min/maxvisible/invisible,visible/invisiblepop/push、Popping/pushingstore/query、storage/query组合业务：表单提交：提交、发送表单增删改查：添加、删除、更新、搜索、重置上传附件：上传关闭打开弹窗：打开/closeCheck:check参考链接CSSnamingmethod="HowtodefineagoodvariablenameinBEMUnderstandtheCSSnamingconvention--BEMtalkvuecomponentnamingthosethingstalkingthenamingconventionoffunctionsVuecomponentnamingguide,别着急关于命名
