Vue Project Folder Setup

Back To Home

Back To Vue Project Intro

Previous Step: Vue Project Package Setup

Discarding most of the Vue CLI default project

These instructions have you use Vue CLI because it provides the GUI that is easy to work with, and it does a lot of the configuration of Vue for you. Using mapboard, however, you are not going to be writing vue code. The default project that Vue CLI sets up is different from what you have to do to make a mapboard project, so you are going to discard most of it.

You can right away delete the following folders:

• src/assets
• src/components

You can also right away delete the following files:

• public/favicon.ico
• src/App.vue

You can also delete everything in the file main.js - don't delete the file because we need a main.js that is different.

Our main.js just has to import one of those libraries and call the function it exports:

import mapboard from '@phila/mapboard/src/main.js';

mapboard({ ...

})

OR

import layerboard from '@phila/layerboard/src/main.js';

layerboard({ ...

})

For the rest of filling out main.js, use the following mapboard guide to main.js (or if you are using layerboard, use this layerboard guide to main.js)

Why can you discard all of the default code?

The Vue CLI default project includes the code needed to initialize Vue:

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

In a project that uses mapboard (or layerboard), however, that code is already covered in mapboard's main.js

Next Step: Creating a Vue Configuration File