项目目录

以下是默认的项目的目录树以及每个文件都是干什么的解释。

VUE/
├── test/                    # 项目根文件夹（你的 Vue 项目）
│   ├── .vscode/             # VSCode 编辑器配置文件（自动生成）
│   ├── node_modules/        # 项目依赖包（npm 下载的所有库都在这里）
│   ├── public/              # 静态资源文件夹，**不会被编译**，直接复制到打包结果
│   │   ├── favicon.svg      # 网站标签页小图标
│   │   └── icons.svg        # 项目用到的图标文件
│   ├── src/                 # 源代码核心目录（90% 开发都在这里）
│   │   ├── assets/          # 会被编译的静态资源：图片、字体、样式等
│   │   │   ├── hero.png     # 页面大图
│   │   │   ├── vite.svg     # Vite 工具图标
│   │   │   └── vue.svg      # Vue 框架图标
│   │   ├── components/      # 公共组件目录（按钮、卡片、列表等复用模块）
│   │   │   └── HelloWorld.vue # Vue 官方示例组件
│   │   ├── App.vue          # 根组件（整个项目的入口页面）
│   │   ├── main.js          # 项目入口 JS 文件（创建 Vue 实例、挂载全局）
│   │   └── style.css        # 全局样式文件
│   ├── .gitignore           # Git 忽略文件（node_modules 等不上传的文件）
│   ├── index.html           # 项目入口 HTML 文件
│   ├── package.json         # 项目配置清单：依赖、脚本命令、项目信息
│   ├── README.md            # 项目说明文档
│   ├── vite.config.js       # Vite 构建工具配置文件
│   └── yarn.lock            # Yarn 锁定依赖版本（保证团队环境一致）

常用文件

main.js

// 1. 从 Vue 中导入 "创建应用" 的方法
import { createApp } from 'vue'

// 2. 导入全局样式
import './style.css'

// 3. 导入根组件 App.vue
import App from './App.vue'

// 4. 创建应用并挂载到页面
createApp(App).mount('#app')

App.vue

<!-- 1. 脚本区：写逻辑、导组件 -->
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<!-- 2. 模板区：写页面结构 -->
<template>
  <HelloWorld />
</template>