Vue.js offers a flexible and organized approach to building web applications. Understanding its folder structure is crucial for efficient development. This clarity ensures smoother collaboration and streamlines the development process. Let’s explore this foundational aspect of Vue.js together.
There are two main folders: => public => src
A. public folder:-
There is only one single file which is: index.html
index.html
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
<!-- built files will be auto injected -->
</div>
</body>
B. src folder:-
There is two main files:
1. main.js &
2. App.vue.
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
