2.5. Vue3 directory structure

2.5.1. 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.

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):

2.5. Vue3 directory structure

2.5.1. Directory parsing ¶

`src/APP.vue` file code ¶

`src/APP.vue` file code ¶

2.5. Vue3 directory structure

2.5.1. Directory parsing ¶

src/APP.vue file code ¶

src/APP.vue file code ¶

`src/APP.vue` file code ¶

`src/APP.vue` file code ¶