Vue 项目的目录结构

VUE项目的目录结构如下所示

.vscode
VSCode工具的配置文件，和VUE项目没有什么关系
node_modules
VUE项目运行依赖文件，通过npm install 安装的文件即存放在此文件夹
public
资源文件夹（浏览器图标等）
src
源码文件夹，新写代码即存放在此文件夹
.gitignore
git忽略文件
index.html
入口的html文件，比如新建vue项目的html文件内容如下所示

<!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
信息描述文件，包含项目的版本、依赖等，比如这里内容如下所示，比如这里vite为构建工具。

{
  "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
注释文件，可以编写项目描述等等说明性文件
vite.config.js
VUE 项目的配置文件，这里可以配置比如跨域等等。

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