VueJS CRUD: Setup Application
in VueJS Crud
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
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.
Inside the src folder is where we're going to store the Vue single file components.
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.
Subscribe To Newsletter
Get weekly updates to your email