span-mapp

Project Standards

CSS

• Use BEM naming convention
• Use SCSS variables where ever possible, found in _settings.scss

Syntax Style and IDE

• Turn on autolinting in your IDE
  • If using VSCode
    • Download Vue Extension Pack by Raza
    • If you want to partake in TODO tracking, download TODO+

Vue

• Follow Vue style guide
  • Vue will automatically give your warnings during 'serving' if you break the style guide
  • Parent-Child Communication
  • Child-Parent Communication

Git

• Use [this as a diagram of branch relationships](https://nvie.com/posts/a-successful-git-branching-model/, we're only using 'dev' and 'master' until closer to finishing.
• If comfortable, use a directory naming structure to organize branches
• Seperate concerns and boil down implementation steps in order to commit often
• Write meaningful commit titles, if you can't clarify everything in the title write meaningful message bodies

Project setup

npm install

Set up environment

If you want to test production builds and use your own mapbox basemaps...

Create a file titled .env.local Paste these variable declarations into it

VUE_APP_MAPBOX_API_ACCESS_TOKEN=
VUE_APP_MAPBOX_STYLE_URL=

Paste in a Mapbox Public API token and a Mapbox Style URL of your choice basemap. To improve load times paste ?optimize=true at the end of the Style URL, this prevents the Mapbox Server from sending data that is impossible to access (areas beyond the max pan-area and beyond the zoom scope).

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your end-to-end tests

npm run test:e2e

Run your unit tests

npm run test:unit

Customize configuration

See Configuration Reference.