解析如何在vue3中使用Element-UI组件以及main.js文件

关于vue的环境配置在前文《Vue3项目——配置vue环境和构建一个vue项目》有讲。

配置Vue项目

今天我们配置vue项目时，直接勾选Default即可。

安装Element-UI组件库

首先是对Element-UI组件的安装，正常安装的命令为

npm install element-ui --save

但是由于element-ui只能兼容于vue2的项目，也就是说vue3项目安装element-ui只会安装失败。

element-ui官方提供了兼容于vue3项目的组件，为Element-Plus，那么我们修改命令为：

npm install element-plus --save

便可安装成功

引入element-plus

我们可以知道引入时是在main.js文件进行引入。
main.js的初始代码为：

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

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

正确引入后的代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

main.js文件

下面我们对这个文件来进行解析：

import { createApp } from 'vue'

这一行代码从vue包中导入了一个名为createApp的函数。createApp是Vue 3的一个核心函数，用于创建一个新的Vue应用实例。这是Vue 3与Vue 2.x在创建应用实例方面的一个主要区别，在Vue 2.x中，我们通常使用new Vue()来实现这一点。

import App from './App.vue'

这行代码导入了你的Vue应用的根组件。App.vue是一个单文件组件（SFC），它通常作为你的Vue项目的主入口，所有的子组件都是从这里开始嵌套和组织的。

import ElementPlus from 'element-plus'

通过这行代码，我们导入了Element Plus库。Element Plus是Element UI针对Vue 3的更新版本，包括了一系列可重用且可配置的UI组件。

import 'element-plus/dist/index.css'

这行代码导入了Element Plus组件库的CSS样式文件。这是必须的步骤，因为它包含了所有Element Plus组件的默认样式，确保组件在页面中呈现出设计师预定的外观。

const app = createApp(App);

这里，createApp函数被调用，并将App（即我们的根组件）传递给它，来创建一个新的Vue应用实例。这个实例被存储在变量app中，我们通过这个实例来配置和启动Vue应用。

app.use(ElementPlus)

app.use()方法用于安装Vue插件。在这里，我们传递了ElementPlus给这个方法，这样Element Plus就被安装到了我们的Vue应用中。这意味着，Element Plus的所有组件现在都可以在该Vue应用的任何地方使用。

app.mount('#app')

最后一行代码调用了app.mount()方法，并传递了一个选择器字符串'#app'给它。这个方法负责将Vue应用挂载到DOM中。这里，它会查找页面上id为app的DOM元素，并将Vue应用渲染到这个元素内部。这标志着Vue应用的启动过程完成，用户现在可以在浏览器中看到和交互的应用了。

总而言之，这段代码初始化并配置了一个Vue 3应用实例，安装并启用了Element Plus组件库，并将Vue应用挂载到页面上预定的DOM元素内。