[Vue] Vue Project Structure


Writing time : 2021-07-18 02:05:07

Create Vue Project

A Vue project can be created with the create project command.
The code below creates a project called my-project.

$vue create my-project  


Project file structure

The main files of the structure of the created Vue project are as follows.

+ public  
    - index.html  
+ src  
    + components  
        - HelloWorld.vue  
    - App.vue  
    - main.js  


Description of the project file

Learn more about included files in Vue projects.

1. index.html

This is a normal html file.
In the code below, a Vue object is inserted in the div tag area.

<!DOCTYPE html>  
<html lang="">  
  <head>  
  ...  
  </head>  
  <body>  
    <div id="app"></div>  
    <!-- built files will be auto injected -->  
  </body>  
</html>  


2. main.js

Create a Vue object that is inserted into a div tag.
The created Vue object is inserted into the element with app id in HTML by #app passed as a parameter of the mount function.
The h used in the render function is a utility function that creates a VNode, and the more accurate name is createVNode().

new Vue({  
  render: h => h(App),  
}).$mount('#app')  


Refer to the link below for the render function related information.
https://v3.vuejs-korea.org/en-us/guide/render-function.html


3. Vue.vue

This is a Vue component object created in main.js.
A Vue component can contain other components, and a Vue component contains an image and a HelloWorld component, as shown in the code below.
In the Vue.vue file code, the app id is the id to apply the style tag at the bottom of the file.

The string set as the msg value used when declaring the HelloWorld component is passed to the HelloWorld component.

<template>  
  <div id="app">  
    <img alt="Vue logo" src="./assets/logo.png">  
    <HelloWorld msg="Welcome to Your Vue.js App"/>  
  </div>  
</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>  


4. HelloWorld.Vue

HelloWorld is a component file that contains the text displayed on the sample screen.
Some of the code was omitted because it was too long.

<template>  
  <div class="hello">  
    <h1>{{ msg }}</h1>  
    <p>  
      For a guide and recipes on how to configure / customize this project,<br>  
      ...   
  </div>  
</template>  
  
<script>  
export default {  
  name: 'HelloWorld',  
  props: {  
    msg: String  
  }  
}  
</script>  
  
<!-- Add "scoped" attribute to limit CSS to this component only -->  
<style scoped>  
...  
</style>  


Order of file loading

When index.html is loaded, main.js is also loaded.
Create a Vue object in main.js and insert it into the element with id app.
A Vue component is created, and an image and a HelloWorld component included in the Vue component are created.

Previous post

Other posts in the category