[Original link] Vue----the directory structure of the Vue project

Directory structure of a Vue project

The directory structure of the VUE project is as follows

.vscode
The configuration file of the VSCode tool has nothing to do with the VUE project
node_modules
The VUE project runs dependent files, and the files installed through npm install are stored in this folder
public
resource folder (browser icons, etc.)
src
source code folder, the newly written code is stored in this folder
.gitignore
git ignore file
The html file of the index.html
entry, for example, the content of the html file of the new vue project is as follows

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

package.json
information description file, including the version, dependencies, etc. of the project, for example, the content here is as follows, for example, here vite is a build tool.

{
    
    
  "name": "vue_demo",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    
    
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    
    
    "vue": "^3.3.4"
  },
  "devDependencies": {
    
    
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.3.9"
  }
}

README.md
comment file, you can write descriptive files such as project description
vite.config.js
The configuration file of the VUE project, where you can configure such as cross-domain and so on.

import {
    
     fileURLToPath, URL } from 'node:url'

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [
    vue(),
  ],
  resolve: {
    
    
    alias: {
    
    
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Vue----The directory structure of the Vue project

Directory structure of a Vue project

Guess you like