在Vue 3项目中，main.js 文件是整个应用的入口点。
它负责初始化Vue实例、配置全局选项、注册全局组件、引入插件以及挂载Vue实例到DOM上。
通过 main.js，我们可以配置Vue应用的各种选项、引入需要的库或者插件，以及进行一些全局的初始化操作。
下面将详细介绍 main.js 的核心作用和使用方法。

创建Vue应用实例

在Vue 3中，不再使用 new Vue() 来创建应用实例，而是使用 createApp 函数。
这是Vue 3引入的一个重要变化，使得应用的创建更加灵活且易于扩展。
以下是创建Vue应用实例的基本步骤：

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

• createApp函数
  createApp 是 Vue 3 中用于创建一个新的 Vue 应用程序实例的函数。
  createApp 接受一个根组件（通常是 App.vue）作为参数，并返回一个应用实例 app。
  该实例包含了整个应用的核心逻辑和配置选项，可以用来进一步配置应用，比如添加全局属性、注册全局组件等。

• 根组件 App
  App.vue 通常是一个单文件组件 (SFC)，它定义了应用程序的入口点。
  这个组件可以包含模板、脚本和样式等部分，它们共同定义了应用程序的初始外观和行为。

• 创建并挂载应用实例
  createApp(App).mount('#app')
  这一行代码执行了两个操作：

  • 首先，它调用 createApp(App) 来创建一个新的 Vue 应用实例，传入 App 组件作为根组件；
  • 接着，它调用了 .mount('#app') 方法，告诉 Vue 将这个新创建的应用实例渲染到文档中的某个元素上
  • 这里的 #app 是一个 CSS 选择器，指向具有 id="app" 的 HTML 元素，Vue 将会接管这个元素，并使用 App 组件的内容来渲染它。

在实际项目中，这样的模式非常常见。
一旦应用被挂载，Vue 就会接管指定的容器元素，并根据根组件 App 的内容开始渲染页面。
如果你打开浏览器开发者工具查看，你将能看到 Vue 创建的虚拟 DOM 结构与实际的 DOM 结构之间的对应关系。

引入并配置路由

如果你的应用需要使用路由来管理页面之间的导航，你需要安装并配置 vue-router。
通常，你将在 main.js 中导入路由配置文件，并使用 use 方法将其挂载到应用实例上：

import router from './router'; // 假设你的路由配置位于 /router/index.jsapp.use(router);

配置状态管理

如果使用了Vuex作为状态管理模式，也需要在 main.js 中进行相应的配置。同样地，通过 use 方法将store挂载到应用实例上：
import store from ‘./store’; // 假设你的状态管理配置位于 /store/index.js

app.use(store);

挂载应用

最后一步是将Vue应用挂载到DOM中的某个元素上，通常是index.html中的一个具有特定ID的 <div> 元素，
例如：
app.mount('#app');

全局属性与方法

在Vue 3中，如果你想向所有组件提供全局可访问的属性或方法，可以通过 app.config.globalProperties 来实现。
这是一个替代Vue 2中直接修改原型链的方式：
app.config.globalProperties.$http = axios; // 例如设置axios为全局可用

使用其他插件

除了路由和状态管理之外，你可能还需要使用其他的第三方插件，如Element Plus UI框架。这些插件通常会提供一个 install 方法，你可以通过 app.use 将其集成进你的Vue应用中：

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';app.use(ElementPlus);