preface

Vue-router/Vuex/AXIos tool libraries are more or less used in multi-player Vue projects. Based on the directory structure generated by vue-CLI webpack template, this paper establishes a directory structure of VUE project which is convenient for multi-party cooperation, expansibility and high modularization.

Root directory and SRC directory

The root directory remains the same, with the main changes concentrated in the SRC directory:

  • New API directory, used to store network processing related code
  • The assets directory is used to store some resources such as pictures and files
  • The common directory is used to hold common resources in your project
  • The Components directory is used to store module and component-related code
  • The router directory is used to store route configurations
  • The Store directory is used to store vuEX configurations

api

  • Api.js is used to provide basic encapsulation methods for network processing (POST/GET/PUT/DELETE etc.)
  • ModuleName A folder named after a module
    • Componentsname.js is divided into components under modules and handles network requests for each component

The network processing structure designed in this way can bring significant improvements to the project:

  • Quickly locate faults in network requests based on modules and components
  • In team development, it is possible to ensure that individual work is not interrupted

components

  • ModuleName Directory structure by module
    • Components used in the components module
    • Modulerouterconfig. js Route configuration for the module
    • The page module contains the page, consisting of the corresponding components

router

In the router directory, there is only a separate index.js file:

import Vue from 'vue'

import Router from 'vue-router'



/ * *

* Module routing configuration

* /

import moduleRouterConfig from "path/to/moduleRouterConfig.js"



Vue.use(Router);



export default new Router({

  routes: [

      moduleRouterConfig

  ]

});

Copy the code

In index.js, the route configuration exported by each module is imported. The separation of routing configurations facilitates modular development and teamwork.

store

  • Index.js is introduced into main.js to initialize and configure vuex

  • ModuleName Divides vuex by module

    • Index. Js for.. /index.js to export the vuex configuration for the module
  • actions.js
  • getters.js
  • mutation_types.js
  • mutation.js
  • state.js
Configuration of two vuEX main files
moduleName/index.js
/ *

* Introduce vuEX elements of the module

* /

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

};

Copy the code
store/index.js
import Vue from "vue"

import Vuex from "vuex"



/ *

* Import the VUEX configuration of the corresponding module

* /

import moduleVuexConfig from "path/to/config";



Vue.use(Vuex);



/ * *

* Debug mode or not

 * @type {boolean}

* /

const debug = process.env.NODE_ENV ! == "production";





export default new Vuex.Store({

  modules: {

    moduleVuexConfig

  },

  strict: debug

});

Copy the code

Direct use of

Use vuE-CLI tool to directly generate the above project directory structure for development:

vue init EastblueOkay/webpack#develop projectName

Copy the code