项目目录结构

|- project/
  |- docs/
  |- node_modules/
  |- src/
    |- 3rd-libs/
    |- assets/
    |- config/
    |- utils/
    |- base/
    |- components/
    |- modules/
    |- views/
      |- Home.vue
      |- Login.vue
      |- routes.js
    |- i18n.js
    |- router.js
    |- App.vue
    |- index.js
    |- index.html

目录说明

3rd-libs

此目录用于保存第三方依赖，所有引入的第三方依赖，应在此目录中进行引入，并公开核心接口，在项目的具体位置，引入此目录中公开的核心接口。

此目录的设置，可以有助于随时替换第三方依赖项

assets

此目录中保存一些静态资源文件

config

此目录进行配置。

utils

此目录保存一些业务无关的工具函数。

base

此目录中提供系统一些基础的能力，例如：网络、存储等。

components

此目录保存一些业务无关的通用组件。

modules

此目录保存业务模块。

views

此目录保存路由组件。

目录层级关系

以上目录层级，由低到高，基本顺序如下：

config
utils
base
components
modules
views

基本原则是：高层能引用低层，但是低层不能引用高层

例如：views目录能引用其他任意目录的功能，但是其他目录不能引入views目录的功能

目录深度

目录深度请保持在2-3层，以2层为佳，3层次之，最多4层，不能超过4层（项目中目录深度，最深最深为4层）。

以下为错误示例

|-/
  |- modules/
    |- account/
      |- user/
        |- profile/
          |- add/
            |- addForm.js

目录深度相对于index.html文件而言。并非package.json

dir-structure.md 1.8 KB Histórico Em bruto