前言

在多人合作的 Vue 项目中，或多或少会使用到 vue-router / vuex / axios 等工具库。本文在基于 vue-cli webpack模板生成的目录结构基础上，建立一个利于多人合作、扩展性强、高度模块化的 vue 项目目录结构。

根目录及 src 目录

根目录及src目录

根目录维持原样，主要的改变集中在 src 目录中：

新增了 api 目录，用来存放网络处理相关代码
assets 目录用来存放一些图片、文件等资源
common 目录用来存放项目中的公共资源
components 目录用来存放模块、组件相关代码
router 目录用来存放路由配置
store 目录用来存放 vuex 配置

api

api目录结构设计

api.js 用来提供网络处理的基本封装方法(POST/GET/PUT/DELETE等)
moduleName 以模块命名的文件夹
- componentsName.js 以模块下的组件划分，处理每个组件的网络请求

如此设计的网络处理结构，能为项目带来明显的改善：

快速定位网络请求的问题所在，根据模块和组件进行定位
在团队开发中，能够保证各自工作不受干扰

components

components目录结构设计

moduleName 按照模块划分的目录结构

router

router 目录中，只存在单独的 index.js 文件：

import Vue from 'vue'
import Router from 'vue-router'

/**
 * 模块的路由配置
 */
import moduleRouterConfig from "path/to/moduleRouterConfig.js"

Vue.use(Router);

export default new Router({
  routes: [
      moduleRouterConfig
  ]
});

在 index.js 中，引入各个模块所导出的路由配置。实现路由配置的分离，利于促进模块化开发进程、便于团队合作。

store

store

index.js 给 main.js 引入，用来初始化和配置 vuex
moduleName 按照模块划分的 vuex
- index.js 供 ../index.js 调用，用来导出该模块的 vuex 配置

actions.js
getters.js
mutation_types.js
mutation.js
state.js

两个 vuex 主要文件的配置

moduleName/index.js

/*
 * 引入模块的 vuex 要素
 */
import * as moduleActions from "path/to/actions"
import * as moduleGetters from "path/to/getters"
import moduleStates from "path/to/states"
import moduleMutations from "path/to/mutations"

export default {
    state: moduleStates,
    mutations: moduleMutations,
    actions: moduleActions,
    getters: moduleGetters
};

store/index.js

import Vue from "vue"
import Vuex from "vuex"

/*
 * 引入对应模块的 vuex 配置
 */
import moduleVuexConfig from "path/to/config";

Vue.use(Vuex);

/**
 * 是否调试模式
 * @type {boolean}
 */
const debug = process.env.NODE_ENV !== "production";


export default new Vuex.Store({
  modules: {
    moduleVuexConfig
  },
  strict: debug
});

直接使用

使用 vue-cli 工具直接生成上述的项目目录结构进行开发：

vue init EastblueOkay/webpack#develop projectName