Building a Todo App in Vue.Js [Part 2]

Welcome to part 2 of the VueJs series 😊!!

In the previous article, we set up our development environment and created our VueJs project using vue CLI.If you haven’t read it, use the link below:

Building a Todo App with Vue.js [Part 1]

In this article, we are would take a look at our project folder structure and understand the purpose of each file in the folder.

A typical VueJs 2 project structure;

todo/
  node_modules/
  package.json
  public/
   faviocn.ico
   index.html
  .gitignore
  src/
   assets/
    logo.png
   components/
    AddTask.vue
    Favourite.vue
    TasksList.vue
   App.vue
   main.js

node_modules: NPM is a repository of javascript libraries. What happens when you create a project using the Vue CLI is that it adds all the necessary javascript libraries we need (by running “npm install” as part of the app creation process)by downloading and storing them in the node_modules folder. Be curious and expand the folder to see the packages that our projects will be using.

package.json: Think of this file as your project manager. Why a project manager? It manages your dependencies and has scripts that help in building your project, running test and other stuff. What you should understand in this file is that it stores all our dependency references in one place. This allows the project to be installed on another computer easily. You might want a further understanding of package.json. Check the guide below:

Why package.json? | npm basics

public: This folder contains the index.html and favicon.ico. So this index.html file is the page that will actually show everything we do.

.gitignore: This is used by git to identify what files or folders needs to be ignored when you are using version control. Yes, it’s that smart !!!

src: Now this where all the happens;

• App.vue: This is where we assemble all our different components as one component to be rendered in the index.html. You would realize in the index.html file, we only render the app file. This means app.vue is the main component of our application.
• main.js: Let’s just say, it’s the entry point to the application. In this file, our Vue application mounts to the DOM.
• components: As the name goes.. it consists of all our components to be used in our todo application.

I guess somethings were complex but don’t worry. When we start using these files, they might make sense. Now that we understand our folder and what it entails, let’s play with the files and make things happen.

See you in the next article where we will dive a little more into components & build our Todo App.