Project Architecture

Project Architecture

This page explains what files go where.

base_assets Directory

This directory contains assets in their raw/unedited forms. They will never appear in production as-is. Instead, they can be edited, compressed or re-sized etc and saved into src/assets.

public Directory

This directory contains all production files used by vue build.

• favicons appear in production (as-is)
• index.html acts as a template for Vue injection. It will not appear as-is, but instead be injected then minified.

src Directory

All scripts, styles, modules and Vue components that will be built and bundled into the production package.

src/assets

• all assets (images, vectors etc.) that will appear in production as-is.
• Can be referenced in Vue components by @/assets/<file>

src/components

• Contains single file Vue components.
• src/components/common contains reusable Vue components (used by other components)

src/sass

• Contains the base SCSS stylesheet that's require'd into the application entry point
  • main.scss configures all of the separate styles
  • base/ contains base classes (highly re-usable) and resets.
    • base/_base.scss - resets
    • base/_typography.scss - font classes (highly re-usable)
    • base/_utils.scss - utility classes (highly re-usable)
  • abstracts/ contains variables and mixins etc that may want to be used across the project
    • _animations.scss - all @keyframes definitions in the project
    • _mixins.scss - mixins used across the project (example responsive mixins)
    • _variables.scss - it is desired to place all variables here (as opposed to defined within a component), so that they can be included and used across the project.

src/store

• Contains configuration and modules for Vuex store(s).
• src/store/modules - all Vuex.Store modules.
• src/store/index.js - base store export (packages all modules).

src/views

• contains all vue-router Views.

src/App.vue

• Root Vue component

src/main.js

• Creates a Vue instance from App.vue, and adds in any directives and configurations. Injects the Vue application (App.vue) into a DOM node of public/index.html

src/router.js

• Defines all routed Views for the application

tests Directory

tests/helpers

• any helper modules, functions and mocks used in unit tests

tests/unit

• all unit tests (components, common components, store etc)

.browserlistrc

• used by postcss to list target browsers. Read more

.eslintrc.js

• ESLint configuration. Read more

.gitignore

• files ignored from source control

.travis.yml

• CI configuration

CNAME

• domain name

README.md

• project information, intended for public/consumers rather than project developers

babel.config.js

• additional babel configurations that are merged with those generated by vue-cli. Read more

package-lock.json, package.json

• NPM package configuration containing project's dependencies and scripts

postcss.config.js

• Configurations for postcss (used when loading/bundling CSS). Read more here and here