Architecture

• Architecture
  • .circleci
  • .vscode
  • .vuepress
  • docs
  • generators
  • public
    • index.html
  • src
    • assets
    • components
    • design
    • router
    • state
    • utils
    • app.config.json
    • app.vue
    • main.js
  • tests

.circleci

Configuration for continuous integration with Circle CI. See the production doc for more.

.vscode

Settings and extensions specific to this project, for Visual Studio Code. See the editors doc for more.

.vuepress

VuePress configuration for docs static site generation.

docs

You found me!

generators

Generator templates to speed up development. See the development doc for more.

public

Where you'll keep any static assets, to be added to the dist directory without processing from our build system.

index.html

This one file actually does get processed by our build system, allowing us to inject some information from Webpack with EJS, such as the title, then add our JS and CSS.

src

Where we keep all our source files.

assets

This project manages assets via Vue CLI. Learn more about its asset handling here.

components

Where most of the components in our app will live, including our global base components.

design

Where we keep our design variables and tooling.

router

Where the router, routes, and any routing-related components live. See the routing doc for more.

state

Where all our global state management lives. See the state management doc for more.

utils

These are utility functions you may want to share between many files in your application. They will always be pure and never have side effects, meaning if you provide a function the same arguments, it will always return the same result. These should also never directly affect the DOM or interface with our Vuex state.

app.config.json

Contains app-specific metadata.

app.vue

The root Vue component that simply delegates to the router view. This is typically the only component to contain global CSS.

main.js

The entry point to our app, were we create our Vue instance and mount it to the DOM.

tests

Where all our tests go. See the tests doc for more.