# 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

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 commandnpm 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.

# References

• Vue.js: Understanding its Tools and Ecosystem