Application Structure in Vue.js 2 Projects
By
Darío Rivera
Posted On
in
Vue.js
In a previous post we saw How to create a Vue.js application scaffolding with the preset [Vue 2] babel, eslint. If you are new to Vue and do not know much about Node, this application structure may seem a bit confusing. However, this structure is much clearer than it seems at first glance. Let's see each component in detail.
| File / Dir | Meaning |
|---|---|
| /node_modules | It is our project's vendor folder. Here all the packages our project needs to work will be stored. |
| /public | In this folder will be the public files of the application. Here will also be the entry point which is the index.html file. |
| /public/index.html | It is the main access file of the application. |
| /src | Here will be all the Vue.js application code, mainly components. |
| /src/components | Contains all the components created in Vue.js. |
| /src/App.vue | It is the main component of the application. This component will call all the other components created in the components folder. |
| main.js | It is the main or JS entry point file of the application. Here the libraries that we have installed in the application are imported and the main instance of Vue is started. |
| package.json | This file indicates the dependencies of our project, the available commands and other configurations. |
| babel.config.js | It is the configuration of Babel. It basically indicates how modern code will be transpiled into older code that all browsers understand. |
| .gitignore | Indicates which files to omit for the version control system. |
The most important thing about this structure is to understand where to create the new Vue components and how to integrate them into our application. The ultimate goal of this post is to illustrate in a simple way the structure of a Vue application and encourage the developer to review each of these files and directories. See you next time!