CuttingMat

代码组织

在目录结构的基础上，对项目代码的组织规范做进一步约定。

文件命名

模块文件夹是天然的模块级命名空间，文件名可以不需要再加模块前缀，对于一个简单的模块，列表直接命名为List.vue，详情就直接命名为Detail.vue就好了，完全不用担心命名冲突，文件结构简洁明了。

  subModule/
    |--...
    |--views/
    |   |--Index.vue        // 主页
    |   |--List.vue         // 列表页
    |   |--Detail.vue       // 详情页
    |   |--Edit.vue         // 创建/编辑页
    |   |--Statistic.vue    // 统计页
    |   ·--Visual.vue       // 可视化页
    ·--index.js

CSS作用域

CSS只要被加载到页面上就会始终对被选择器命中的元素生效，如果不能有效控制CSS作用域，稍不留神就会发生样式冲突。

Vue单文件组件的Scoped CSS实际上就是一个单文件组件级的作用域，但组件的基础上我们还要合理抽取可复用的CSS，结合命名空间和深度作用选择器open in new window实现可控的CSS作用域，以提高CSS代码可维护性，同时降低最终打包体积。

框架约定CSS的三层作用域分别是：

  • 全局作用域

框架内置全局基础样式（@/core/assets/global.css），在入口文件（@/main.js）中引用，作用于项目全局。

主模块的首页模板作为所有主路由的根节点，当其使用深度作用选择器open in new window时效果也等同于全局样式。对旁路路由无效，因为从路由结构上旁路路由不是首页的下级，参考路由结构设计。

  • 模块作用域

实现模块级样式，只要在模块首页的外层节点（<router-view />或其上级）添加 class 作为命名空间，使用深度作用选择器（.scopeClass >>> .moudleClass）语法就可以实现模块级的样式复用。

模块模板已内置空白模块样式文件（@/[Moudle Folder]/assets/style.css），并在模块主页（Index.vue）引用。

  • 组件作用域

Vue单文件组件全部使用局部样式（Scoped CSS），仅作用于当前组件。

代码复用

除CSS外的代码管从技术上讲都不是刚需，主要目的还是为了让代码更好维护，让开发团队更容易协作，代码复用率高了一定程度上也能减少一点打包体积。

代码是不是容易维护取决于的代码组织思路是否符合开发者的心理预期，为创造一个更好理解的代码组织模式，框架做以下约定：

  • 全局复用

框架内置的工具方法、组件等都属于全局资源，详情参考功能。

除此之外的业务层全局公共代码应尽可能提炼到主模块中，比如通用接口（@/main/api/common.js）、公共组件（@/main/components/）等。

  • 模块内复用

模块具备复用性的方法、资源等，通常只在当前模块内使用。

模块模板已内置空白模块工具文件（@/[Moudle Folder]/assets/util.js），方便实现模块内的可复用功能。

  • 资源引用

一个组件可能会引用全局资源、模块内资源、其他模块资源，对于资源引用我们约定，当引用模块外部资源时应该始终使用全路径，如（@/main/api/common.js）；反之引用模块内部资源应始终使用相对路径，如（../assets/util.js），以明确区分跨模块的依赖关系。

  • 全局功能注册

并不是所有全局代码都一定在主模块中，当某种功能具有跨模块复用价值时，将其注册为Vue全局功能可以方便的跨模块复用。

为了便于集中管理全局资源，框架提供了Vue全局功能注册插件，支持注册全局组件、全局过滤器、全局指令、实例方法、全局方法，我们约定所有Vue全局功能都统一在全局功能配置文件（@/plugin.global-function.config.js）中注册。

Last Updated:
Contributors: tower1229