深入解析 Vue 3 工程的 src 目录

一、src 目录的重要性

在 Vue 3 工程中，src 目录是我们的主战场。虽然工程中还有其他文件和文件夹，但 src 目录中的源代码结构是我们最需要熟悉的。这里存放着前端工程师的主要工作成果，包括 .vue、.js、.css 等文件。

二、src 目录中的关键文件和文件夹

（一）main.ts

main.ts 是 Vue 3 工程的入口文件。它主要负责创建 Vue 应用实例，并将根组件挂载到页面上的某个容器中。具体来说，main.ts 中的代码通常包含以下几部分：

1. 引入 createApp：createApp 是一个函数，用于创建 Vue 应用。可以将其比喻为“造花盆”，它是创建应用的基础。

   TypeScript复制

import { createApp } from 'vue';

1. 引入根组件：根组件是应用的入口点，所有其他组件都将基于这个根组件进行构建。可以将其比喻为“花的根”。

   TypeScript复制

import App from './App.vue';

1. 创建应用并挂载：使用 createApp 函数创建应用，并将根组件挂载到页面上的某个容器中。可以将其比喻为“把花插在花盆里，并摆放在合适的位置”。

   TypeScript复制

createApp(App).mount('#app');

这个app是div的id 在index文件中定义

App.vue文件是花的根，而components 文件夹中存放的就是花的枝叶

（二）App.vue

App.vue 是根组件文件。它是一个 .vue 文件，包含三个主要部分：

1. template：用于定义组件的 HTML 结构。

   HTML复制

<template>
  <div class="app">
    <h1>你好啊</h1>
  </div>
</template>

1. script：用于编写组件的 JavaScript 或 TypeScript 代码。

   TypeScript复制

<script lang="ts">
export default {
  name: 'App'
};
</script>

1. style：用于定义组件的 CSS 样式。

   css复制

<style>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 5px;
  padding: 20px;
}
</style>

这是一个vue文件中必须要写的三个标签

（三）components 文件夹

components 文件夹用于存放其他组件。这些组件可以是页面的某个部分，如导航栏、侧边栏、按钮等。这些组件可以被根组件或其他组件引用，形成组件树。可以将其比喻为“花的枝叶”。

HTML复制

<!-- components/Navbar.vue -->
<template>
  <nav>
    <ul>
      <li>首页</li>
      <li>关于</li>
      <li>联系</li>
    </ul>
  </nav>
</template>

<script lang="ts">
export default {
  name: 'Navbar'
};
</script>

<style>
nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}
</style>

三、创建和运行项目

（一）删除和重建 src 目录

1. 删除 src 目录：如果需要从头开始，可以删除整个 src 目录。

2. 重建 src 目录：重新创建 src 目录，并新建 main.ts 和 App.vue 文件。

   bash复制

mkdir src
cd src
touch main.ts
touch App.vue

（二）编写代码

1. main.ts：

   TypeScript复制

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

1. App.vue：

   HTML复制

<template>
  <div class="app">
    <h1>你好啊</h1>
  </div>
</template>

<script lang="ts">
export default {
  name: 'App'
};
</script>

<style>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 5px;
  padding: 20px;
}
</style>

（三）运行项目

1. 启动项目：

   bash复制

npm run dev

1. 查看效果：打开浏览器，访问项目地址，查看效果。

四、总结

在 Vue 3 工程中，src 目录是核心部分，其中 main.ts 和 App.vue 是最基础的文件。main.ts 负责创建应用并挂载根组件，App.vue 是根组件，定义了应用的结构、逻辑和样式。通过这些文件，我们可以构建出复杂的前端应用。后续的学习中，我们将在 src 目录中逐步添加更多的组件和功能，不断完善我们的项目。