When you create a Vue.js project using the Vue CLI, the generated file structure looks something like this:
my-vue-project/
├── node_modules/
├── public/
│ ├── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── views/
│ ├── App.vue
│ ├── main.js
├── package.json
├── vue.config.js
node_modules/ FolderThis folder contains all the installed dependencies for your Vue.js project. These dependencies are managed by npm (Node Package Manager) and are crucial for running your application. You don’t need to manually edit or add anything in this folder. It’s automatically populated when you run npm install.
npm install after cloning or setting up a project.public/ FolderThe public folder contains files that are directly served by the web server. These files are not processed by webpack (the bundler that Vue CLI uses) but are served as-is. The most important file here is index.html.
public/ folder:index.html: This is the main HTML file where your Vue application is mounted. It contains a <div id="app"></div> element, which is where the Vue instance is injected.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue.js App</title>
</head>
<body>
<div id="app"></div> <!-- Vue will mount here -->
</body>
</html>
src/ FolderThe src folder is where most of your application code resides. It contains JavaScript, Vue components, and assets (like images and styles). Here’s a breakdown of its typical structure:
src/ folder:assets/: This folder stores static assets such as images, fonts, and CSS files. These assets can be imported and used in Vue components.
Example:
import logo from './assets/logo.png';
components/: This folder contains Vue components, which are the building blocks of your application. Components are used to encapsulate reusable parts of the UI.
Example component (HelloWorld.vue):
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue.js!',
};
},
};
</script>
views/: This folder holds the “view” components, which usually correspond to entire pages in your application. These components are used with Vue Router to render different parts of your app based on the URL.
Example (Home.vue):
<template>
<div>
<h1>Welcome to Vue.js</h1>
<p>This is the homepage of the app.</p>
</div>
</template>
<script>
export default {
name: 'Home',
};
</script>
App.vue: This is the root component of your application. All other components are nested inside it or linked to it. It typically contains the main layout and router-view.
Example:
<template>
<div id="app">
<router-view></router-view> <!-- Vue Router injects the current view here -->
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
main.js: This is the entry point of your Vue application. It’s where the Vue instance is created, and the root component (App.vue) is mounted to the DOM.
Example:
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount('#app');
package.json FileThe package.json file is essential for managing project dependencies, scripts, and metadata. It contains information about the project (like name, version, etc.) and lists all npm packages your project depends on.
Example:
{
"name": "my-vue-project",
"version": "1.0.0",
"main": "src/main.js",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.6.14"
},
"devDependencies": {
"@vue/cli-service": "^4.5.0"
}
}
vue.config.js File (Optional)The vue.config.js file allows you to customize the default configuration of the Vue CLI. This file is optional and is used for tasks like modifying webpack configurations, setting up proxy servers, or changing the default build settings.
Example:
module.exports = {
devServer: {
proxy: 'http://localhost:3000',
},
};
Vue.js promotes a modular structure where each component is responsible for a specific part of the UI. Components are reusable, which allows for easier maintenance and scalability. Components are typically placed in the src/components/ directory.
Button.vue):<template>
<button class="btn" @click="handleClick">{{ label }}</button>
</template>
<script>
export default {
props: ['label'],
methods: {
handleClick() {
this.$emit('click');
},
},
};
</script>
<style scoped>
.btn {
background-color: #42b983;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
The Vue.js file structure is designed to be simple and flexible, allowing developers to focus on building their applications rather than managing complex folder structures. By following best practices such as organizing components, assets, and views, you can create clean, maintainable, and scalable applications.
Understanding the Vue.js file structure is just the beginning. As you build larger applications, you can explore more advanced concepts like Vue Router, Vuex (state management), and other Vue ecosystem tools to create fully-featured applications.