VueJS CRUD - Setup Application

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

• index.html
• package.json
• README.md
• server.js
• webpack.config.js

The index.html file is the only HTML file we have in the document, the benefit of using VueJS is that the router will switch out the components in view on the page. This allows us to only have one HTML file and let JavaScript do all the hard work and change the content of the page. The package.json file is the config file for the npm, which will manage all the dependencies in the application.

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.

It's important to note that we're only using this technique in this example project for speed of development. In a real world example you should should a API, I prefer to use something like Laravel to create the API. webpack.config.js this is used to setup the configuration for webpack. Webpack is the tool we're using to compile our Javascript and build the main Javascript file we'll use on the application. The advantage we get with using webpack is that we can use things like single page Vue components allowing us to have all the HTML, CSS and Javascript in a single VueJS file.

Inside the src folder is where we're going to store the Vue single file components.

• src
  • assets
    • 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.