项目结构规范

文件夹结构

避免多层嵌套
不要过度思考
参考React书里的建议:
采用混合方式划分文件结构

• 采用类型划分的优势
• 添加功能划分的特点

  src/
  |----app.js // 整个应用的入口
  |----app.css
  |----views  // 应用中某个路由的文件 一般为路由组件
  |    |----Home.js
  |    |----Home.css
  |    |----HomeRedux.js // home页面中所有与redux相关的汇总
  |----components // 所有应用的组件
  |    |----Home // 在view中有一个名为Home的view 在这就有一个名为Home的子文件夹
  |    |    |----Table.js // home中的一个列表组件
  |    |    |----Table.css
  |    |    |----TableRedux.js
  |    |    |----Table // 另一种方式 如果组件很多 文件夹打开会很长
  |    |    |    |----Index.js
  |    |    |    |----Index.css
  |    |    |    |----IndexRedux.js
  |    |----shared // 不归属于任何view的组件 比如公共组件
  |----container
  |    |----DevTool.js // 配置DevTool
  |    |----Root.js // 一般被app.js依赖
  |----layout // 布局相关的组件 如菜单 侧边栏
  |----redux
  |    |----reducers.js // 
  |----routes // 路由相关的配置
  |----utils // 工具函数常量等
  |----styles // 全局公共样式
  

单文件组件文件的大小写

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。
单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题，这也是横线连接命名同样完全可取的原因。

components
|---- MyComponent.vue

或者

components
|---- my-component.vue

基础组件命名

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V

components
|---- BaseButton.vue
|---- BaseTable.vue
|---- BaseIcon.vue

components
|---- AppButton.vue
|---- AppTable.vue
|---- AppIcon.vue

components
|---- VButton.vue
|---- VTable.vue
|---- VIcon.vue

单例组件命名

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

components
|---- TheHeading.vue
|---- TheSidebar.vue

紧密耦合的组件名

components
|---- TodoList.vue
|---- TodoListItem.vue
|---- TodoListItemButton.vue

组件名的单词顺序

组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

components
|---- ClearSearchButton.vue
|---- ExcludeFromSearchInput.vue
|---- LaunchOnStartupCheckbox.vue
|---- RunSearchButton.vue
|---- SearchInput.vue
|---- TermsCheckbox.vue

components
|---- SearchButtonClear.vue
|---- SearchButtonRun.vue
|---- SearchInputExcludeGlob.vue
|---- SearchInputQuery.vue
|---- SettingsCheckboxLaunchOnStartup.vue
|---- SettingsCheckboxTerms.vue

模版中的组件名大小写

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。