Made withVue.jsClip

Vue JS 3 Tutorial - 3 - Project Structure

C

Codevolution

Creator on the Vue.js channel

Watch on YouTube ↗

125K viewsDec 7, 20208:01 runtime

Gain a comprehensive understanding of the default project structure generated by the Vue CLI for a Vue JS 3 application. This tutorial walks through the essential files and folders, explaining the purpose of package.json, babel.config.js, node_modules, the public folder with…

Chapters

#vuejs#clip#frontend

Project File Structure

A Vue CLI project has a standard structure with a few key files at the root level and three main folders: node_modules, public, and src.

Root-Level Files

package.json: Contains project metadata, dependencies (like vue@3), devDependencies (like @vue/cli-service), and scripts (serve, build, lint).
babel.config.js: Configuration for Babel, a tool that transforms modern JavaScript into a more cross-browser compatible version for production.
yarn.lock / package-lock.json: Ensures consistent and repeatable installation of project dependencies across different environments.

Key Folders

node_modules: Where all dependencies specified in package.json are installed.
public: Contains static assets that are directly copied to the build output.
- index.html: The single HTML file for the Single Page Application (SPA).
  Important
  This file contains the root DOM node, typically <div id="app"></div>. Vue takes control of this element at runtime to render the application. Avoid modifying the <body> tag directly.
src: The main folder containing the application's source code.
- main.js: The application's entry point.
- App.vue: The root component of the application.
- components/: A folder for organizing reusable UI components (e.g., HelloWorld.vue).
- assets/: A folder for project assets like images and SVGs that will be processed by the build tool.

`.vue` Files (Single File Components)

The .vue extension signifies a Single File Component (SFC).
SFCs are a core concept in Vue, allowing you to define a component's HTML (<template>), JavaScript (<script>), and CSS (<style>) in one self-contained file.

Application Control Flow

A step-by-step look at how a Vue application starts:

You run the yarn serve (or npm run serve) command.
The development server serves public/index.html to the browser.
Execution begins in src/main.js.
The createApp function from Vue is called with the root component (App).
The .mount('#app') method instructs Vue to mount the application into the HTML element with the ID app.
Vue renders the App component (and all its nested child components) inside this root DOM node, displaying the UI in the browser.

Introduction to Vue Project Structure

In the last video, we saw how simple it is to create and run a basic Vue application using the Vue CLI. Now, it's also really important that you understand the files and the folders present in the generated project and how the control flows when you run the application. Let's take a look at that in this video.

Root Level Files Explained

I have opened the hello world project in VS code and you can see that at the root level we have three folders and five files. To begin with, let's start with the important bits in package.json.

This file contains the dependencies and the scripts required for the project. You can see that we are using Vue version 3 and that is listed as a dependency. You can also see that there are a few Vue CLI and eslint dev dependencies. We also have three scripts: serve to run the application, build to build the application, and lint to simply fix any linting errors in the app. The configuration for eslint is present as well. A straightforward package.json file as you can see.

Next, we have the yarn lock file. Based on whether you prefer npm or yarn as a package manager, you're going to see yarn lock or package lock files. They simply ensure consistent installation of your dependencies, and you don't really have to worry much about them. We also have a git ignore and a readme file.

The last file at the top level is babel.config.js, which is the babel configuration file. Babel is a tool which transforms modern javascript features being used in development code into older syntax that is more cross-browser compatible in production code. The configuration file here has just the one entry for the Vue CLI babel preset.

Exploring the `node_modules` and `public` Folders

All right, next let's talk about the folders. The first one is node_modules. This is the folder in which all the dependencies are installed. It is generated when you run the vue create command or when you run npm install.

The next folder is the public folder. This folder contains static assets that are published when you want to go live with your application. It contains two files. We have the fav icon, which you see in the browser tab and is nothing Vue specific. So as a beginner you only have to concentrate on the index.html file.

The index.html is the only HTML file you're going to have in your application. We are building single page applications, and this is it. The view might dynamically change in the browser, but it is this HTML file that gets served. Typically you're not going to add any code in this file, maybe some changes in the head tag, but definitely not in the body tag. You want Vue to control the UI and for that purpose, we have one div tag with id is equal to app. At runtime, the Vue application takes over this div tag and is ultimately responsible for the UI. Please make a note of this div as we will come back to it shortly. Let me also quickly increase the font size.

The `src` Folder: Components and Entry Point

All right, that is about the public folder. The next folder is the source folder, which is the folder we will be working with the most during development. The starting point for our Vue application is main.js.

In main.js, we specify the root component, which is App component, and the DOM element which will be controlled by Vue. The DOM element in our example is an element with id attribute equal to app. And if you can recollect, that is the element in our index.html file. We call this div element as a root DOM node because everything inside it will be managed by Vue. For the hello world application, the App component is rendered inside the root DOM node.

That brings us to the App component, which is present in App.vue. Now, the .vue file extension, I bet is something new to you if you're learning about Vue for the very first time. We will talk more about .vue files in the next video, but for now let me tell you that it is a file where you specify HTML, CSS, and JavaScript corresponding to a portion of the UI you see in the browser. You can see here we have an image which corresponds to the Vue logo you see in the browser, and then we have this custom HTML tag called HelloWorld. This HelloWorld is just another .vue file which contains more HTML, CSS, and JavaScript. This file is present in the components folder. It contains a bunch of HTML links which you again see in the browser.

We call these .vue files as components. Components is a topic which we will deal with in great detail later on in the series, but for now, you just have to know that we have two components: App component and HelloWorld component. The two components represent the view which we see in the browser. Now within the source folder, we also have an assets folder which contains the Vue logo that you see in the browser. The folder can be used to store images, SVGs, etc., as the name indicates.

Understanding the Application Control Flow

So that is about the folder structure of a Vue application created using Vue CLI. Next, let's understand the control flow when you run this application in the terminal.

When you run the command yarn serve, index.html file is served in the browser. index.html contains the root DOM node.

Next, the control enters main.js. Here, the createApp function imported from the Vue library will mount the App component onto the DOM node with id attribute equal to app, which is the div tag in our index.html file. The App component contains its own HTML and the HTML from the HelloWorld component, which is ultimately displayed in the browser. And the yarn serve command that you run in the terminal, of course, corresponds to this particular script.

What's Next: `.vue` Files

Now then, in our source folder, we see this new file type which is the .vue file type. But what exactly is such a file? Let's understand more about it in the next video. Thank you guys for watching. Don't forget to subscribe. I'll see you guys in the next one.