The last article was all about the basics and getting up and ready. We install vue cli and created a basic project in the last article. In this article let us have a look at the project structure and how vue handles HTML templates. If you haven’t read it, you can read it from here.
Firstly, browse to the project folder created earlier and open it with your favorite code editor. I will be using Visual Studio Code, but you can choose any editor of choice.
The Project Structure
You should see something like this. The folders are listed on the left-hand side. Let us quickly discuss each folder one by one.
The only thing we should be concerned about right now is the src folder and the public folder.
The Public Folder and Index.html
The public folder has 2 items, one is the favicon.ico (your website’s favicon) and other is the index.html. The index.html file is the only HTML file in your entire project. If you’ve worked with WordPress you could relate it to the index.php file. You can open up that file and you should see the following code.
It is pretty evident that it is a simple HTML file, that falls very well under 20 lines as of now. It is pretty much a standard HTML template with the only new things being in the body tag.
The SRC folder
The src folder is the folder for our Vue.js and other js source files. This is our main application folder and most of the time, this is the only folder we will be making any real changes with. Let us now have a look at some items from the folder.
The main.js file is the main entry point for js. It is the first file that is loaded in our Vue app. This file has some configurational code that creates a Vue instance and supplies various properties to it.
You can see the code for the same below.
You can also see that this vue instance is mounted to an element with id app. This is the same element that I told you about in the public folder inside the HTML file, remember. I guess it makes sense now.
The router.js file is the file that will manage the routing for our application. Our app will have multiple URLs and this file will make sure the right page is rendered inside the div with id as an app.
The code may look intimidating for now, but be calm as we will learn more about it in the articles ahead.
You can still see that there is an instance of a Router that has been created and various properties have been set. The routes property has the list of various routes that we wish to see in our application.
This is kind of an advanced topic, so we won’t discuss much on it. However, you could say that it is like global variable management. Vue applications often have components with their individual data. The store helps in having centralized variables that can be accessed by any component.
The assets folder will hold all static assets for our application. These may contain images, videos or other forms of static content.
Components and Pages
You can also see that we have used a component called HelloWorld that has been imported from the components folder. We will learn more about components later in this tutorial.
Vue.js requires you to know how various components fit into the whole application. There is just one HTML file with a dynamic container that changes its contents depending upon the URL. The contents of a page may further be divided into components that are dynamically rendered as per requirement. I hope you now have a clear idea about the application structure of Vue.js app in general. If you get stuck somewhere do let me know in the comment section below.