# 项目目录结构

```
|- 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

此目录保存`路由组件`。

## 目录层级关系

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

1. config
2. utils
3. base
4. components
5. modules
6. views

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

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

## 目录深度

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

以下为`错误示例`

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

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