深入 VUE3：手把手教你编写 APP 组件

目录

深入 VUE3：手把手教你编写 APP 组件

一、Vue3 项目结构概览

二、创建基础的 Vue3 项目

三、编写 App.vue 组件

四、在 main.ts 中配置和挂载 App 组件

五、运行项目查看效果

---

在前端开发的领域中，Vue3 凭借其高效的性能、简洁的语法和强大的功能，成为众多开发者的首选框架。本文将深入探讨 Vue3 中 APP 组件的编写，从项目结构剖析到实际代码实现，带你全面掌握这一关键技能。

一、Vue3 项目结构概览

在 Vue3 项目里，src目录是核心开发区域。其中，index.html虽不在src目录内，但它作为入口文件至关重要。它负责引入main.js（或main.ts ，取决于项目使用的语言是 JavaScript 还是 TypeScript），并提供一个挂载点，用于将 Vue 应用挂载到 DOM 上。而main.js（main.ts）则是整个应用的启动脚本，在这里创建 Vue 应用实例，并配置应用的各种全局设置。App.vue组件则是整个应用的根组件，其他组件都将以此为基础进行构建和挂载。

二、创建基础的 Vue3 项目

首先，确保你已经安装了Vue CLI。若未安装，可以通过 npm 进行全局安装：

npm install -g @vue/cli

安装完成后，使用Vue CLI创建一个新的 Vue3 项目：

vue create my - vue - app

在创建过程中，你可以根据项目需求选择合适的预设配置，例如是否使用 TypeScript、是否安装路由等。

三、编写 App.vue 组件

App.vue作为根组件，承载着整个应用的基础结构和逻辑。一个典型的App.vue文件包含三个主要部分：template、script和style。

<template>
  <div class="app">
    <h1>欢迎来到我的Vue3应用</h1>
    <!-- 这里可以继续添加其他组件或HTML元素 -->
  </div>
</template>

<script>
// 若使用TypeScript，需按照相应语法规范编写
export default {
  name: 'App',
  // 组件的data、methods、computed等属性和方法都可以在这里定义
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message);
    }
  }
};
</script>

<style scoped>
.app {
  background - color: #f0f0f0;
  padding: 20px;
  box - shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border - radius: 5px;
}
</style>

在上述代码中：

• template部分定义了组件的 HTML 结构。这里使用了一个div元素，并在其中添加了一个h1标题。你可以根据实际需求添加更多的 HTML 元素和其他子组件。
• script部分定义了组件的逻辑。通过export default导出一个包含组件配置的对象，其中name属性用于标识组件名称，data函数返回组件的响应式数据，methods对象定义了组件的方法。
• style部分用于定义组件的样式。scoped属性确保这些样式只应用于当前组件，不会影响到其他组件。

四、在 main.ts 中配置和挂载 App 组件

在src目录下的main.ts文件中，引入并创建 Vue 应用实例，然后将App.vue组件挂载到指定的 DOM 元素上。

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

const app = createApp(App);
// 可以在这里注册全局组件、指令、插件等
app.mount('#app');

上述代码中：

• 首先从vue库中引入createApp函数，该函数用于创建 Vue 应用实例。
• 接着引入App.vue组件，并使用createApp函数创建应用实例，将App组件作为参数传入。
• 然后可以在应用实例上进行全局配置，例如注册全局组件、指令或插件。
• 最后，使用app.mount('#app')将应用挂载到index.html中id为app的 DOM 元素上。

五、运行项目查看效果

完成上述代码编写后，在项目根目录下运行以下命令启动开发服务器：

npm run serve

启动成功后，浏览器会自动打开应用页面，你将看到App.vue组件中定义的内容展示在页面上。此时，你可以通过修改App.vue中的代码，实时查看页面的变化，进行开发和调试。

通过以上步骤，你已经成功地在 Vue3 中编写了一个基础的 APP 组件，并了解了 Vue3 项目的核心结构和开发流程。随着项目的不断扩展，你可以在App.vue组件的基础上，创建更多的子组件，通过组件间的通信和协作，构建出功能丰富、交互性强的前端应用。希望本文能帮助你在 Vue3 开发的道路上迈出坚实的一步，不断探索和创新，打造出优秀的前端应用作品。