每一个 Vue 组件首先必须专注于解决一个单一的问题，独立的、可复用的、微小的和可测试的。 一般来说，尽量保证每一个文件的代码行数不要超过 100 行。也请保证组件可独立的运行。 每个组件都有一个单独的 demo 示例。 7.7.1.构建组件原则 为项目需求构建组件，但也可以独立于项目之外。如果它们能够在你项目之外工作，就像一个库那样。 如果不确定，那就不要。避免以后可能会有用的组件污染你的项目。 7.7.2.组件分类 1、基础组件（引用的UI）。 2、通用组件（对基础组件进行二次封装和改造）。 3、功能组件（多个组件拼接形成通用的组件）。 4、业务组件（实现业务模块） 7.7.3.组件命名规则 1、有意义的: 不过于具体，也不过于抽象。 2、简短: 2 到 3 个单词，使用连字符分隔单词 (业务组件除外)。 如果非常通用的话可使用一个单词来命名，这样可以方便于其它项目里复用。 3、具有可读性 。 4、组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。 **组件命名** | 反例 | 正例 | | --- | --- | | < btn-group > < /btn-group > <br/>< ui-slider > </ ui-slider ><br/><! -- ui 前缀太过于宽泛，意义不明确 -- ><br/>< slider >< /slider > | < app-header > < /app-header > <br/>< user-list > </ user-list ><br/>< range-slider >< /range-slider > | ***** **components/** **|- SearchButtonClear.vue** **|- SearchButtonRun.vue** **|- SearchInputQuery.vue** **|- SearchInputExcludeGlob.vue** **|- SettingsCheckboxTerms.vue** **|- SettingsCheckboxLaunchOnStartup.vue** ***** **单个活跃实例的组件** 单个活跃实例的组件应该以 The 前缀命名,以示其唯一性，每个页面只使用一次。 ***** components/ |- TheSaleManage.vue |- TheImportExcel.vue ***** **紧密耦合的组件名** components/ |- SearchBox.vue |- SearchBoxItem.vue |- SearchBoxButton.vue *****