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

vuex 目录，推荐的目录形式如下:

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。

在线查询工具

• browserl.ist
• browserslist.dev

.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 指南

系列文章

• 应用入口改造
• 路由配置
• 菜单与路由
• 本地 Proxy 方案
• 本地 Mock 方案