To start off this project we first need to create and setup the structure of our files.
At the root of the project we have
Within this application we're going to have to manage a lot of dependencies as we will need to import, VueJS, Vue Router, Vue Resource, Webpack, Babel etc. README.md will hold the contents of the documentation for the project, and helpful information for other developers to pick up the project and get started by themselves. server.js is the file we're going to use to populate with the Node.js server, this allows us to create a Node.js API so that we can access the data stored in a JSON file.
Inside the src folder is where we're going to store the Vue single file components.
- css - style.css
- js - components - all-products.vue - create-product.vue - delete-product.vue - edit-product.vue - notifications.vue - product-data.json
The style.css file is the only stylesheet we're going to use in this project, you can switch this out for sass and use webpack to compile the sass file into a css file. The VueJS component files are going to be used for the different pages, all-products, create-product, delete-product and edit-product page. There is going to be a notifications.vue file which we can use to display the form output messages for any errors or successfully messages. product-data.json is the file we're going to use to populate the components from the Node.js API. -With the files setup on your project you can move on to the next section how to use NPM to load your dependencies.