Vue Project Package Setup
Note for understanding this section: there is a brief description of what the "package.json" file and the "node_modules" folder are 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 see something similar to what is below:
In your package.json "dependencies" you should just see "vue" - when the Vue CLI created the project, it included this by default. 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" the package from your node_modules folder.
Also, in the "devDependencies" section of package.json, you see a package called "vue-template-compiler." Vue CLI also included that automatically.
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)
Note: it can be useful to look at packages in the node_modules folder, to make sure they are there and check their versions. You should never edit or delete files in the node_modules folder. If you want to change anything in your node_modules, you should use Yarn commands or the Vue CLI GUI to do it, since those programs are built to take care of node_modules correctly.
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 "@phila/mapboard" (or, if you working on a project using layerboard, you have to add "@phila/layerboard") as a dependency too. Just like Vue is a package you get from the web (and which was made by the Vue team), "@phila/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 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 @phila/mapboard" (or @phila/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 "@phila/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 @phila/mapboard package in both the dependencies list of the Vue CLI GUI and your package.json, and you will see mapboard in the folder node_modules/@phila:
Note that in your node_modules/@phila folder, you 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).