Directory Structure
After Vue CLI, successfully generates the project, the project folder should have a directory structure that looks similar to this:
- node_modules
- public
|- favicon.ico
|- index.html
- src
|- assets
|- components
|- HelloWorld.vue
|- router
|- index.js
|- views
|- About.vue
|- Home.vue
|- App.vue
|- main.js
NOTE
Your may directory structure may look slightly different depending on which dependencies and plugins you have included with your project.
Having all these files and directories can seem a little overwhelming at first, but each directory has its purpose and we will walk through each one.
The node_modules Directory
The node_modules directory contains all of the npm packages needed for your application to run. Every time you run the command npm install some-package; the package some-package will download and be stored in this folder. From here, you can import dependencies into your Vue.js project or reference them manually in an HTML page.
The public Directory
The public directory is the public facing part of your site and is what the user will have access to when they visit your site. By default, this directory will contains your index.html file. The index.html is, like on most other web page, is the default starting point for the your Vue application and every part of your Vue app gets bootstrapped and injected into it. The public directory may also contain the favicon.ico image.
The src Directory
The src directory is the most important directory in the whole project. This directory will contain a majority of your files that makes up your project. This includes single file components, stylesheets, assets and more. From the diagram above, we also know that the src directory contains directories of its own. We will look at those directories now.
The assets Directory
The src/assets directory is used to store your application's assets like images and stylesheets. Such assets could be placed in the public directory, but there are benefits to keeping them in the src/assets directory.
The components Directory
The src/components directory is where the your application's component files will be stored. Component files are single .vue files which contain all the of code including HTML template, JavaScript and CSS necessary for the component.
The router Directory
The router directory is for router files. These files define your URL routes and which component gets loaded when the URL address is visited.
The store Directory
The store directory is for Vuex stores.
The views Directory
The views directory, as the name suggests, will contain view files, which single file components that act as "pages" or containers that structure their child components.
App.vue
The App.vue file is a single component in which all other views and components get injected into. This is a great place to add global components that should be shared across the app like Header.vue and Footer.vue.
Main.js
The main.js file is your single Vue Instance in which the App.vue, routes, and all their components get injected into.