Vue Project Package Setup
Note for understanding this section: there is a brief description of what the "package.json" file is and what "node_modules" folder is in the wiki page for Node, and a more complete intro is the Node Package Manager (NPM) about section, if you need a review.
After you have finished creating your project, you should have the same folder and file structure which you can see in the picture below. If you open the file "package.json", you will also see what is below:
In your package.json "dependencies" you see "vue" and "vuex". That is because "writing a vue project" or "using vue in your project" means downloading the Vue package (made by the Vue team) off the web, and then writing parts of your code that "import" it.
Also, in the "devDependencies" section of package.json, you see "vue-template-compiler."
Node has already downloaded all dependencies and devDependencies for you. If you look in the node_modules folder that was created, among many other folders that have been brought in, you will find folders containing these packages:
(the many other folders you see in node_modules are dependencies of dependencies)
When you look at the GUI, when you click on the "Dependencies" tab on the left you will see the same packages:
You now have to add "@philly/mapboard" (or, if you working on a project using layerboard, you have to add "@philly/layerboard") as a dependency too. Just like Vue is a package you get from the web (and which was made by the Vue team), "@philly/mapboard" is a package you get from the web. It is made by people at the City of Philadelphia instead of a private company or non-profit, but using you get it into your project and use this code the same way.
You can do that in either of 2 ways:
- in ConEmu, write "yarn add @philly/mapboard" (or @philly/layerboard)
OR
- click the "+ Install dependency" button in the top right of the screenshot above
If you use the "+ Install dependency" button, you will get a menu where you can find a dependency. If you start typing "@philly/mapboard", it will filter the options to show you mapboard:
If you are using layerboard instead of mapboard, all of this should work for layerboard too.
Whichever way you do it, after it has installed, you will see the @philly/mapboard package in both package.json and the dependencies list of the GUI, and you will see mapboard in an @philly folder in node_modules:
Note that in your node_modules/@philly folder, you will also see vue-comps, vue-mapping, and vue-datafetch:
Even though you did not make them dependencies of your project, they have been downloaded for you because they are dependencies of mapboard (or layerboard).