Scaffolding
Although Vue.js initial folder architecture is good, in order to create a more scalable, easy to maintain and organized folder hierarchy, the application follows different guidelines. Core folders:
- components
- views
- services
- data
- theme
UML Package diagram of the application source
Extra information about how to use this guidelines:
- Folder Structure Gist
- Although applied to React, Medium Article about best way to organize our web app
This folder contains all the generic and cross-views components. Inside this folder, there is a hierarchy between components as well.
The objective is that the generic / global components become organized between folders, where the 'parent' components uses the 'child' folders (that can contain other components). The use of components outside the folder ('cousin' components) is not allowed outside the scope, except if the component is on the 'components' folder root (the component on the root can be used anywhere).
This way, we have a clear idea of how our application is organized and which components uses other components and which components are generic for the whole application. Using this guideline, the application will be easier to maintain and scale over the time.
UML Package diagram of the Components layer
On this folder we find the components that represent our pages. Our views will load and use the components folder in order to build the page (with all the required components and behaviours associated to those components).
Views contain specific components (that will not be used by other views) and that respect the same hierarchy of the 'components' folder. Views components can use components from 'components' folder once those components are considered global while the views' components are specific.
Each view also have it's own specific services. Services related with the store should be placed on /src/services in order to keep all the store operations in a single place.
UML Package diagram of the Views layer
Layer with utility modules to be used by the application' components and views. A service is something reusable and probably needed by several parts of the application.
The data layer is in charge of making all the communication with API's. The entities on this layer are very similar to services and should be available everywhere.
Folder that contains general styles for the whole application. We may find utility files here like:
- mixins
- variables file
- colours
- main.scss (to include the other files)
This file represents the entry point of SPA. It's responsible to initialize Vue.js and settings some initial configurations.