Vue项目结构

学习『百度-刘斌』对Vue项目结构的设计。

约定优于配置

以页面结构为基础，以树形组件架构为核心，以代码组织和目录结构为产出，以提供框架设计规范原则和理论基础为目标。

规范原则

• 模块划分基本原则：按页面显示元素拆分模块
• 文件夹即模块，文件夹结构体现模块关系，模块关系清晰，易于保持职责单一性
• 页面即模块，页面切换即是模块切换，大型系统形成SPA架构
• 树形结构相比其它结构，最易于扩展，可维护性强，可无限扩展
• 代码文件命名统一为index，文件命名清晰简单，增加命名规范

方法论实际意义

• 指导页面结构拆分原则
• 形成文档目录结构
• 关注点原则：关注基于显示层的开发

例子

配置文件与模板文件结构对应。

|-- src
  |-- views
    |-- module1
      |-- index.vue
      |-- module2
        |-- index.vue
  |-- const
    |-- fields
      |-- module1
        |-- index.js
        |-- module2
          |-- index.js