Vue开发实践之目录结构

Vue 开发实践为本人的最佳实践，非业内最佳，仅用于提供给各位做参考，这是系列文，但发布时间和内容不固定。

默认创建的 Vue 工程提供了简单的目录结构，但在很多时候，我们可能会需要添加需要工具。同时为了方便后期改造和迁移，这里提供了一种良好的代码分层结构，适用于开发或大或小的应用。

目录结构

约定的目录结构如下：

├── public/                             # 静态资源目录
├── src/
│   ├── assets/                         # 全局资源目录
│   │   ├── fonts/
│   │   └── images/
│   │
│   ├── components/                     # 全局组件
│   │   └── UserSelectTable/
│   │       ├── style/
│   │       │   ├── _var.scss
│   │       │   └── index.scss
│   │       ├── UserSelectTable.vue
│   │       └── index.js
│   │
│   ├── layouts/                         # 自定义布局目录，可以写一个 ProLayout 代替自定义布局
│   │   ├── Basic.vue
│   │   └── User.vue
│   │
│   ├── mocks/                           # 本地模拟数据
│   │   ├── data/
│   │   ├── setup.mock.js
│   │   └── users.mock.js
│   │
│   ├── store/                           # 状态管理
│   │   ├── plugins/
│   │   │   ├── persist.js
│   │   │   └── qiankun.js
│   │   ├── modules/                     # 除非业务过于复杂，否者不推荐
│   │   │   ├── cart.js
│   │   │   └── products.js
│   │   ├── getters.js                   # 根级别的 getters
│   │   ├── actions.js                   # 根级别的 action
│   │   ├── mutations.js                 # 根级别的 mutation
│   │   └── index.js
│   │
│   ├── router/
│   │   ├── routes.js                   # 路由配置
│   │   └── index.js
│   │
│   ├── services/                       # 全局数据请求
│   │
│   ├── views/                          # 页面级组件
│   │   ├── Home/
│   │   │   ├── components/             # 页面级组件
│   │   │   ├── services/               # 页面级组数据请求
│   │   │   │   └── repo.js
│   │   │   └── Home.vue
│   │   │
│   │   └── About/
│   │       ├── components/
│   │       └──  About.vue
│   │
│   ├── login.js                        # 登录页入口
│   └── main.js                         # 应用入口
│
├── .browserslistrc
├── .env
├── .editorconfig
├── .eslintrc.js
├── .prettierrc
├── babel.config.js
├── vue.config.js
├── LICENSE.md
├── jsconfig.json
└── package.json
复制代码

说明

public

静态资源目录，这里的内容不会被编译，直接复制到编译输出目录。

详见 HTML 和静态资源

assets

全局资源目录，这里存放源码中使用到的静态资源，会和源码一起被编译。

components

components/
    └── UserSelectTable/
        ├── style/                 # 组件样式
        │   ├── _var.scss
        │   └── index.scss
        ├── UserSelectTable.vue
        └── index.js              # 组件出口
复制代码

一个组件一个目录，方便后期迁移至出项目，独立成一套业务 UI 组件库。

layouts

布局组件目录

layouts/
    ├── Basic.vue     # 经典布局
    └── User.vue      # 用户布局，只有顶部菜单，没有侧边栏菜单
复制代码

mocks

本地模拟数据的目录，详见本地 Mock 方案说明。

推荐的目录形式如下：

mocks/
    ├── setup.mock.js    # Mock 配置
    ├── search.mock.js   # Mock API
    └── data/            # 模拟数据目录，存储 json 等形式的文件
复制代码

store

store/
    ├── index.js
    ├── actions.js        # 根级别的 action
    ├── getters.js        # 根级别的 getters
    ├── mutations.js      # 根级别的 mutation
    ├── plugins/          # 插件目录
    │    ├── persist.js
    │    └── qiankun.js
    └── modules/           # 除非业务过于复杂，否者不推荐
        ├── cart.js
        └── products.js
复制代码

如果业务过于负责，可以考虑 MPA 或微前端技术。

services

services 会作为项目的数据请求目录，api 将从项目中移除，同时如果后端提供了 swagger 文档，将使用 pont 自动生成 JS 代码。

├── services/                   # 全局数据请求
│   └── repo.js
│
├── views/
│   ├── services/               # 页面级组数据请求
│   │   │   └── repo.js
│   │   └── Home.vue
复制代码

router

vue-router 目录，推荐的目录形式如下:

router/
    ├── routes.js   # 路由配置，如果路由过多，建议拆成多个配置文件
    └── index.js
复制代码

通过路由配置了解更多。

main.js

项目的入口文件，用于对应用进行全局配置，详见应用入口。

.env

环境变量文件，详见模式和环境变量

.browserslistrc

在不同前端工具之间共享目标浏览器和 Node.js 版本的配置。详见 browserslist。

在线查询工具

.editorconfig

统一编辑器的缩进等配置，详见 EditorConfig 官网。

.prettierrc

代码美化工具，详见详见 Prettier 官网。

.eslintrc.js

代码检查工具，详见详见 ESLint 官网。

babel.config.js

语法转换工具，将最新的 JS API 降级为低版本浏览器兼容的代码，详见详见 Babel 官网。

vue.config.js

CLI 配置文件，详见全局 CLI 配置。

jsconfig.json

VSCode 支持的配置文件，和 tsconfig.json 互斥，详见 jsconfig.json。

tsconfig.json

VSCode 支持的配置文件，和 jsconfig.json 互斥，详见 tsconfig.json 是什么。

package.json

Node 项目的清单文件，用于提供给如 npm 或 yarn 工具使用，详见 package.json 指南