🥦 Vue 中 main.js 和 App.vue 的作用是什么?
2025-01-22 08:19:30    589 字    #前端 #🥦 Vue
This post is also available in English and alternative languages.

main.js 是应用程序的主入口文件，负责创建 Vue 实例并将根组件渲染到页面上。

App.vue 是应用程序的根组件，定义了整个应用程序的布局、样式和逻辑。


0.1. main.js

main.js 是一个 Vue.js 应用程序的主入口文件，它用于初始化 Vue 实例和将其挂载到 HTML 页面上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 项目初始创建后, main.js 默认内容如下

// 导入 Vue.js 框架：通过引入 Vue.js 框架，可以在应用程序中使用 Vue 相关的功能和特性。
import Vue from 'vue'
// 导入 App 组件：需要将 App 组件引入到 'main.js' 中，以便在 Vue 实例中使用它。
import App from './App.vue'

Vue.config.productionTip = false

// 创建 Vue 实例：通过实例化 Vue 类，并传入包含组件的选项对象，可以创建一个 Vue 实例。在选项对象中，可以指定应用程序的根组件、路由、状态管理等等。
new Vue({
  render: h => h(App),
}).$mount('#app')

// '.$mount('#app')':挂载 Vue 实例，使用 $mount 方法，可以手动将 Vue 实例挂载到 DOM 元素上，以便应用程序正常运行。

0.2. App.vue

App.vue 是 Vue 应用程序的根组件，它包含了应用程序的整体布局和逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- 项目初始创建后, App.vue 默认内容如下 -->

<!-- 模板,使用 template 标签，可以定义 'App.vue' 的布局结构。模板中可以包含 HTML 标签、组件、指令、事件等。 -->
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<!-- 脚本,使用 script 标签，可以编写与 'App.vue' 相关的逻辑和行为。可以在脚本中定义组件选项（如数据、生命周期钩子、方法等）。 -->
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<!-- 样式,使用 style 标签，可以为 'App.vue' 添加样式。可以使用任何支持的 CSS 预处理器（如 Sass、Less）来编写样式。 -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>