Vue前端开发规范

基于官方Vue风格指南1.必须包含多个单词的组件名称组件名称应始终为多个单词，根组件App除外。正例：exportdefault{name:'TodoItem',//...}复制代码反例：exportdefault{name:'Todo',//...}复制代码组件data数据组件必须是一个函数。当在组件中使用data属性时（除newVue之外的任何地方），它的值必须是一个返回对象的函数。正例：//Ina.vuefileexportdefault{data(){return{foo:'bar'}}}//直接在Vue根实例上使用对象是可以的，//因为只有一个这样的实例.newVue({data:{foo:'bar'}})复制代码反例：exportdefault{data:{foo:'bar'}}复制代码PropdefinitionProp定义越详细越好。在你提交的代码中，prop的定义要尽可能的详细，至少要指明它的类型。正例：props:{status:String}//更好的方法！props:{status:{type:String,required:true,validator:function(value){返回['syncing','synced','version-conflict','error'].indexOf(value)!==-1}}}复制代码反例：//这样做只能在开发原型系统时接受props:['status']复制代码为v-for设置key值始终使用key来匹配v-for。键必须始终与组件上的v-for一起使用，以维护组件及其子树中的状态。即使在元素上保持可预测的行为，例如动画中的对象恒定性，也是一种很好的做法。正例：

复制代码反例：

{{todo.text}}

复制代码5.避免同时使用v-if和v-for不要同时使用v-if和v-for同一元素上的时间。通常我们倾向于在两种常见情况下这样做：过滤列表中的项目（例如v-for="userinusers"v-if="user.isActive"）。在这种情况下，将用户替换为计算属性，例如返回筛选列表的activeUsers。避免渲染应该隐藏的列表（例如v-for="userinusers"v-if="shouldShowUsers"）。在这种情况下，将v-if移动到容器元素（例如ul、ol）。正例：复制代码反例:

复制代码设置componentstyleScope顶级App组件和布局组件中的样式对于应用程序来说可以是全局的，但所有其他组件都应该在范围内。此规则仅与单文件组件相关。您不必使用scoped属性。作用域也可以通过CSS模块来完成，这是一种基于类的BEM类策略，尽管您也可以使用其他库或约定。然而，对于组件库，我们应该更喜欢基于类的策略而不是作用域特性。这使得覆盖内部样式更容易：使用人类可读的类名并且选择器优先级不会太高，并且不太可能引起冲突。正例：复制代码示例：.button{border:none;border-radius:2px;}.button-close{background-color:red;}CopyCode2.强烈推荐（增强可读性）组件文件，只要有能够拼接文件的构建系统，split每个组件到单独的文件。当您需要编辑组件或查看组件的使用情况时，可以更快速地找到它。正例：components/|-TodoList.vue|-TodoItem.vue复制代码反例：Vue.component('TodoList',{//...})Vue.component('TodoItem',{//...})复制代码单文件组件文件的大小写单文件组件的文件名要么总是以大写的单词开头（PascalCase）正例：components/|-MyComponent.vue复制代码反例：components/|-myComponent.vue|-mycomponent.vue复制代码Base组件名称应用特定样式和约定的Base组件（即表示性、无逻辑或无状态组件）都应以特定前缀开头，例如Base、App或V。正例:components/|-BaseButton.vue|-BaseTable.vue|-BaseIcon.vue复制代码反例：components/|-MyButton.vue|-VueTable.vue|-Icon.vue复制代码Singleton组件名应该只有Componentsof单个活动实例应以前缀The命名，以指示其唯一性。这并不意味着该组件只能在单个页面上使用，而是每个页面只能使用一次。这些组件从不接受任何道具，因为它们是为您的应用程序定制的，而不是它们在您应用程序中的上下文。如果您发现有必要添加props，则说明这实际上是一个可重用的组件，目前每个页面只使用一次。正例：components/|-TheHeading.vue|-TheSidebar.vue复制代码反例：components/|-Heading.vue|-MySidebar.vue复制代码紧耦合的组件名称和父组件紧耦合的子组件应该以以前缀命名的父组件。如果一个组件只在父组件的上下文中有意义，那么这种关系应该反映在它的名称中。由于编辑通常按字母顺序组织文件，这样做可以将相关文件放在一起。正例：components/|-TodoList.vue|-TodoListItem.vue|-TodoListItemButton.vuecomponents/|-SearchSidebar.vue|-SearchSidebarNavigation.vue复制代码反例：components/|-SearchSidebar.vue|-NavigationForSearchSidebar.vue复制代码component名称中的词序组件名称应以高级（通常是描述性）词开头，并以描述性修饰符结尾。正例：components/|-SearchButtonClear.vue|-SearchButtonRun.vue|-SearchInputQuery.vue|-SearchInputExcludeGlob.vue|-SettingsCheckboxTerms.vue|-SettingsCheckboxLaunchOnStartup.vue复制代码反例：components/|-ClearSearchInclutton.vue|-vue|-LaunchOnStartupCheckbox.vue|-RunSearchButton.vue|-SearchInput.vue|-TermsCheckbox.vue模板中的组件名称大小写始终为正的PascalCase：复制代码反例：CopyCodeComponentNamesWholeWordsComponentnamesshould喜欢完整的单词而不是缩写。正例：components/|-StudentDashboardSettings.vue|-UserProfileOptions.vue复制代码反例：components/|-SdSettings.vue|-UProfOpts.vue复制代码具有多重特征的元素具有多重特征的元素要写成多行，每个属性行。正例：复制代码负例示例：复制代码模板中的简单表达式组件模板应该只包含简单的表达式，复杂的表达式应该重构为计算属性或方法。复杂的表达式可以使您的模板不那么声明。我们应该尝试描述那里应该有什么，而不是如何计算该值。计算属性和方法使代码可重用。正例：{{normalizedFullName}}//复杂表达式已被移动到一个计算属性中computed:{normalizedFullName:function(){returnthis.fullName.split('').map(function(word){returnword[0].toUpperCase()+word.slice(1)}).join('')}}复制代码反例：{{fullName.split('').map(function(word){returnword[0].toUpperCase()+word.slice(1)}).join('')}}复制代码简单的计算属性正例：computed:{basePrice:function(){returnthis.manufactureCost/(1-this.profitMargin)},discount:function(){returnthis.basePrice*(this.discountPercent||0)},finalPrice:function(){returnthis.basePrice-this.discount}}复制代码计数器示例:computed:{price:function(){varbasePrice=this.manufactureCost/(1-this.profitMargin)return(basePrice-basePrice*(this.discountPercent||0))}}HTML属性值应该总是被引用（单引号或双引号，无论你在JS中不使用哪个）。不带空格的属性值在HTML中可以不加引号，但这样做往往会导致带空格的属性值被转义，导致可读性下降。正例：复制代码反例：复制代码指令缩写均为指令缩写（使用：v-bind:并用@表示v-on:)正例：复制代码4，谨慎使用（潜在危险模式）不要在v-if/v-if-else/v-else中使用key如果一组v-if+v-else的元素类型相同，最好使用key（例如两个

元素）。正例：复制代码Counterexample:Error:{{error}}

{{results}}