Understanding Vue folder structure
Hello there, welcome to my blog. Learning new tools comes with the pains of learning new concepts about the chosen tool, and it may be different from the normal convention a developer is used to. The tool I would be discussing in this article is Vue, which is a Frontend framework for building single-page applications. The first time I installed Vue via CLI, I was blown by the folder structure and their names and what the hell they do, this was because I was coming from a different background and here I am learning a new tool and am sure there is someone out there who feels the same. If you are that person, just relax it is normal, with every tool or framework we learn, there are some certain rules that guide how we use them, and this article will explicitly explain the Vue folder structure.
- Your mind and heart
You are going to learn:
- The meaning of each folder and file Vue provides
- The functions of the folder and how they affect your Vue app
What is Vue.js?
Vue is a progressive frontend framework for building fast, scalable and single-page applications. Vue is one of the top three frameworks in demand. Vue is also open-source built by Evan You. I personally love Vue for its learning curve, it took me less than 1 day to grasp Vue.
Vue comes with two different ways of using and installing it, you can use Vue to control some part of your application, and in this way, you can use Vue via CDN, see the documentation on how it is done. You can also use Vue by making it control your full application and this way, you have to install it via CLI, and Vue automatically set up a project for you, installs all the dependencies needed for your project to run, set up the project folder for you also. Isn't that lovely? I call it ease of programming, just a single command, and all these are done for you. But the problem that comes with this is understanding the folder structure because just like every other tool and framework out there, Vue has a structured pattern it believes is the best way for you to write your app. This is the point where most newbie gets thrown off, I was thrown off myself, but this article is here to guide you and even if you don't fully understand it but decided to cramp it up, this article will clarify you. Let dive in.
After Installing Vue
Once your Vue project has been set up by Vue and after you have opened it in your preferred code editor, it should look like this:
Now let's understand what is going on here.
Node_Modules is a folder that contains all the source codes, dependencies, settings, and configurations that your preferred tool is using to ensure it works smoothly, the good news is you don't have to worry or touch your node_modules folder, it is just there to make sure your tools have the dependencies it needs to run smoothly, as you install new tools to your project, node_modules automatically update and stores the source codes, dependencies, settings, and configurations your new tool needs to run. The command
npm install <whatever> is referring to the NPM and asking it to bring whatever tools you wish to install and its source codes, dependencies, and these dependencies get stored in the node_modules folder. Just see it as a storehouse for your tool's settings and configuration. Nothing to worry about.
The public folder is where Vue keeps the index.html file that is being run in the browser, inside the index.html file is basic HTML markup that we are all used to, this is why Vue is used to build single-page apps because there is only one HTML file which is the index.html, every other page, which is called Components in Vue are dynamically injected to this index.html file by Vue.
Learn more about single-page applications by reading this article here
Next up is the src folder, the source folder is where we write our source code for our Vue app, inside the src folder, we have the: assets folder, components folder, App.vue file, and main.js file
Let me explain them one after the other. The assets folder are where we keep our asset for a project which may include logos, Icons, SVG icons e.t.c, the components folder is where we write our various Vue code that is grouped in files with the .vue file extension.
From the first line of code, Vue is using the destructing syntax to store the Vue objects named
createApp as it
requires it from vue, which is stored in the node_modules folder, remember I said that the node_modules folder contains all the source codes and dependencies a framework has? Good.
div which an
id of #app written in the index.html file and then injects the App components which was imported on line two into this HTML div.
See how Vue runs behind the scenes? Amazing right. You can see the pipeline of functionalities and logic Vue undertakes to make sure our app works fine, which in turn makes developers happy people.
Well, this should be familiar to developers using git. The gitignore file is where we tell Git what files and folder that should be ignored and not pushed to our remote repository, which may be Github, Bitbucket, Gitlab e.t.c
Vue in all her wisdom already knows what files and folders should not be pushed and has specified them in that file, and of course, you can also add your own file as you advance to building your project with vue.
Babel Config file.
This file keeps track of all our dependencies that our projects using, names of our projects, the scripts needed to run our projects e.t.c. You can use it to check if a package you installed is truly present, and also see the dependencies your app is running on
From the image above, we can see that the file is showing us that vue is installed as a dependency of that project.
The package-lock.json file is the big brother of package.json it gives more details and a closer look at the version of our project, the dependencies of the tools we are using, the settings, date, configuration e.t.c. Just like the node_modules folder, this is the NPM business and is auto-generated, you need not touch it, in fact looking at it can give you a headache. Lol
With this knowledge, you should have an understanding of the Vue folder structure and what they do, which would aid to to mastering Vue and navigating and fixing bugs like a pro
So we have come to the end of this amazing article. Hope you learned something useful. If you did, like, share, comment, just do anything to make it go viral.
I would be posting more articles, so be sure to follow me to get notified when I post them.