Vue Academy · 课时

生成的项目结构

Q: 「生成的项目结构」这节课中我会学到什么？

了解 Vue 项目生成的文件和文件夹 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解 Vue 项目生成的文件和文件夹

生成的项目结构 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。

项目概览

搭建出的 Vue 项目具有清晰且可预测的文件夹结构。

src/ 应用的源代码
public/ 按原样提供的静态资源
package.json 依赖项和脚本
index.html Vue 挂载到其中的页面

了解各部分的位置，可以帮助您快速找到所需内容。

src 文件夹

src/ 文件夹存放您编写的所有内容。

src/
  assets/        # images, fonts, global CSS
  components/    # reusable .vue components
  App.vue        # root component
  main.js        # application entry point

main.js 入口点

main.js 是应用启动的地方。它会创建应用并将其挂载。

import { createApp } from "vue"
import App from "./App.vue"
import "./assets/main.css"

createApp(App).mount("#app")

App.vue 根组件

App.vue 是根组件。其他所有组件都位于其中。

<template>
  <header>
    <h1>My App</h1>
  </header>
  <main>
    <HelloWorld msg="Welcome" />
  </main>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue"
</script>

components 文件夹

components/ 文件夹存放可复用的单文件组件。

每个 .vue 文件都是一个组件
在需要的位置导入这些组件
随着应用增长，将组件整理到子文件夹中

public 文件夹

public/ 文件夹存放会逐字复制到构建输出中的静态文件。

这里的文件不会由打包器处理
适合存放网站图标、robots.txt 或固定资源
从根目录使用绝对路径引用这些文件

index.html 挂载点

index.html 是唯一的 HTML 页面，其中包含挂载目标。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

package.json

package.json 描述项目及其依赖项。

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

package.json 脚本

scripts 部分定义您通过 npm run 运行的命令。

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

assets 与 public

存储静态文件有两种方式：

src/assets/ 由打包器处理，为便于缓存会添加哈希，并在代码中导入
public/ 按原样复制，并通过固定路径引用

需要导入的内容使用 assets，必须保持稳定网址的内容使用 public。

它们如何协同工作

应用加载时的流程如下：

浏览器加载 index.html
通过模块脚本标签运行 main.js
main.js 将 App.vue 挂载到 #app
App.vue 渲染子组件

快速检查

测试您对项目结构的了解。

回顾：项目结构

您了解了 Vue 项目的结构：

src/ 存放代码
main.js 启动应用
App.vue 是根组件
components/ 存放可复用的组件
public/ 和 index.html 提供静态内容
package.json 定义依赖项和脚本

接下来：配置 CLI 并添加插件。

常见问题解答

「生成的项目结构」课时是免费的吗？

是的 — 「生成的项目结构」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。

「生成的项目结构」这节课中我会学到什么？

了解 Vue 项目生成的文件和文件夹你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 3 节。

「生成的项目结构」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

安装 Vue CLI
生成的项目结构
CLI 配置与插件

← 返回 Vue Academy