Vue3 项目说明
create-vue 创建的项目"麻雀虽小、五脏俱全"。理解每个文件的职责，后续开发才不会迷路。本节以默认工程为例逐层说明。
根目录核心文件
- package.json：项目清单，记录脚本命令与依赖版本。
- vite.config.js：Vite 构建配置（插件、别名、代理等）。
- index.html：唯一 HTML 入口，浏览器最先加载它。
- README.md：项目说明文档。
- .gitignore / .vscode / .editorconfig：Git 忽略规则与编辑器统一配置。
package.json 中的脚本
{
"name": "vue3-demo",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
- npm run dev：启动开发服务器（带热更新）。
- npm run build：打包产物到 dist。
- npm run preview：本地预览打包结果。
index.html 与挂载点
index.html 中只有一个挂载元素与模块入口：
<!DOCTYPE html>
<html lang="zh-CN">
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
真正的页面内容由 Vue 渲染进 #app 这个容器。
src 目录说明
- src/main.js：应用入口，负责 createApp(App).mount('#app') 启动应用。
- src/App.vue：根组件，是整棵组件树的顶层。
- src/components/：存放可复用组件，默认含 HelloWorld.vue。
- src/assets/：图片、样式等静态资源。
- src/router（若启用）：路由定义文件。
- src/stores（若启用）：Pinia 状态管理模块。
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
App.vue 初探
<!-- src/App.vue（结构示意） -->
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<HelloWorld msg="你好，Vue3" />
</template>
模板中直接使用自定义组件 HelloWorld，像 HTML 标签一样书写——这就是组件化开发。
小结
记住主链路：index.html → main.js → App.vue → components/。日常开发基本只改动 src 下的文件，其余配置文件很少需要触碰。