Better understand the directory structure of the project, can better develop the project:

The directory structure shown here is a Vite based project.

The directory structure is as follows:

My code is hosted on my own Git server and does not exist when installed by default.

1: dist directory

Store packaged code files

2: node_modules

The package directory that the project depends on

3: public

A directory for storing public files

4: the SRC

The main directory where the code is stored

(1) : Assets

I have CSS, JS and image files for each page

(2) : Components

Holds common components used by the project

(3) : Router

Save vue-router-related files

(4) : Types

Configuration files that store typescript vUE support files

(5) : Views

Save page file (.vue)

(6) : app.vue

Root component file

(7) : main.ts

Import file TS file

// Create an instance by introducing the createApp method of the Vue framework in VUe3
import { createApp } from "vue";
import App from "/@/App.vue";
// Create an instance
const app = createApp(App);
// Mount the sample to the node
app.mount("#app");
Copy the code

5：.gitignore

Git ignore Committee.gitignore

6: index. HTML

Project entry file

7: package. Json

Store dependency package management and command management information files

(1) : scripts

"scripts": {
    "dev": "vite"."build": "vite build"
  },
Copy the code

Here is the command configuration, my project was created in Vite, so the command has Vite

yarn dev
yarn build
Copy the code

(2) development environment and production environment

DevDependencies: Development environment

8: the readme. Md

Documentation files written using Markdown

9: ts. Config. Json

Typescript configuration files

10: vite. Config. Ts

Project profile

11: yarn. Locak

The generated files are automatically generated and managed using YARN packages. Don’t bother.

| - node_modules - projects rely on package directory | - public, public file | -- the favicon. Ico - small ICONS at the front of the web site address bar | - SRC, source files directory, Programmers where main work | - assets - static file directory, picture icon, such as the website logo | - components -- Vue3. X | custom components directory -- App. Vue - the root component of the project, Single-page applications require | -- index. The CSS - generic project of CSS style to write here, the main, js introduction | -- main. Js - project entry documents, SPA single-page applications require entry file | -. - gitignore git management configuration file, Set the directory or file management | - index. The HTML - the default home page of the project, the Vue component needs to mount it to the file | - package - lock. Json - project package lock file, Used to prevent the package version is not the same mistakes | -- package. Json - project configuration file, package management, project name, version, and commandCopy the code

For good suggestions, please enter your comments below;

Welcome to my blog guanchao.site

Welcome to applets: