Vue3 directory structure

In the previous chapter, we used npm for the installation project (Vue-cli and Vite), we open the directory in IDE (Vscode, Atom, etc.) with the following structure:

Command line tool vue-cli (runoob-vue3-test):

Vite（runoob-vue3-test2）

Directory parsing

Directory parsing
Directory / file	Description
`build`	Project build (webpack) related code
`config`	Configure the directory, including the port number, etc. We can use the default for beginners.
`node_modules`	Project dependency modules loaded by npm
`src`	Here is the directory we are going to develop, and basically everything we need to do is in this directory. It contains several directories and files: Assets: place some pictures, such as logo, etc. Components: there is a component file in the directory, but you don’t need it. App.vue: the projectentry file, or we can write the components directly here instead of using the components directory. Main.js: the core file of the project. Index.css: style file.
`static`	Static resource directory, such as pictures, fonts, etc.
`public`	Common resource directory.
`test`	Initial test directory, which can be deleted
`.xxxx文件`	These are some configuration files, including syntax configuration, git configuration, etc.
`index.html`	Home entry file, you can add some meta information or statistical code and so on.
`package.json`	Project profile.
`README.md`	Project description document in markup format
`dist`	Using? NPM run build? The directory will be generated after the command is packaged.

Next, take runoob-vue3-test2 as an example, open the src/APP.vue file, the code is as follows (explained in comments):

`src/APP.vue` file code

<!-- Display template -->
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<!-- Vue code -->
<script>
/\* Introducing HelloWorld components from src/components/HelloWorld.vue \*/
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

Next, we can try to modify the initialized project by changing src/APP.vue to the following code:

`src/APP.vue` file code

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to the Rookie Tutorial！" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

Open the page http://localhost:3000/, which is automatically refreshed aftermodification, and the display effect is as follows: