目录架构

作者: 一个健康马 | 来源:发表于2020-06-08 09:25 被阅读0次

    assets:

    静态资源存放目录。主要就是存放系统需要用到的一些静态资源文件,如果有需要的情况下可以在里面建立子文件夹,便于区分静态资源属于哪个页面或者哪个模块。
    

    components:

    组件存放目录。主要存放各个模块需要用到的vue组件,组件的划分应该有:公共组件、模块组件,命名规则可以如下:
    
    +components
        -common
    
        -module(模块名称,如:login)
    
    组件的命名规则应该让人能很容易判断出来该文件的类型属于组件,如:HelloWorldComponent.vue。
    

    consts:

    静态变量存放目录。主要存放系统需要利用到的各种静态变量,如:后台请求的路径。在其他语言开发中,有一点是非常忌讳的,那就是魔法值,魔法值会使代码的可读性降低,增加维护成本;而且一旦变量不只在一个地方用到,在多处或者多个文件,一旦涉及到该变量的变更就会导致多处修改,又增加了维护成本,容易导致新的Bug出现。
    

    libs:
    库文件存放目录。在开发过程中总会遇到需要引入一些其他外部的库,而这些库在npm仓库中却又不存在,这个目录的用处就主要用来放置这些库文件。

    mock:

    mock模拟数据接口目录。用于提供模拟数据,方便测试。
    

    plugins:

    vue插件存放目录。主要存放一些比较通用的插件,命名规则可以如下:
    
    插件用途+Plugin,如:ErrorMsgPlugin.js
    

    router:

    vue路由文件存放目录。一般一个就够,当然,如果系统够大,那么拆分也是有必要的,如果拆分路由文件的话,建议采用模块名+Router的方式。
    

    services:

    业务逻辑层。这层的主要目的就是为了将视图层与业务逻辑层解耦而划分出来,因为vue所代表的视图层已经承担了不少视图层的工作,不应该还让视图层承担业务逻辑层的工作,
    

    store:

    vuex状态管理器。如果模块较多可以按模块划分子文件夹,子文件较多的情况下命名规则建议:模块名+Store

    utils:

    工具类存放目录。主要放一些系统需要用到的通用小工具。如:http请求工具类、日期格式化工具类等。

    views:

    视图文件存放目录。如果视图较多可以划分模块子文件夹。

    相关文章

      网友评论

        本文标题:目录架构

        本文链接:https://www.haomeiwen.com/subject/pslpohtx.html