Vue JavaScript Project Structure And Templates. 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.
You can see that there is a <noscript> tag that contains a message. Well, some people do not allow JavaScript on their browsers(Top secret agency kind of people). Naturally, Vue.js websites cannot run on such browsers. Next, we have the <div id=”app”>. This is the thing we want. All our website pages, data images etc will be dynamically rendered in this div container. I am sure you can get the picture.
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.
main.js
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.
router.js
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.
App.vue
Just like index.html is the first point of contact for html, main.js is the first point of contact for JavaScript, App.vue is the first point of contact for vue files. This file actually mostly acts as a base for the router. There is an element called router-view where dynamic pages will be rendered whereas things above and below will remain constant. This is great for setting fixed footers and headers.
store.js
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.
assets
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
Components and pages more or less, have the same structure. They have an extension of .vue. However, it is a structurally ideal suggestion that pages should consist of various components. Both pages and components have a similar structure. You can see that there is a template section where all the HTML goes and then the script section that handles all the JavaScript. You could also add a third section called style that handles the local CSS per template.
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.
Conclusion
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 the Vue.js app in general. If you get stuck somewhere do let me know in the comment section below.
