解析如何在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元素内。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/28164.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文章解读与仿真程序复现思路——电工技术学报EI\CSCD\北大核心《计及台风时空特性和灵活性资源协同优化的配电网弹性提升策略》

本专栏栏目提供文章与程序复现思路,具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

78、区间选点

区间选点 题目描述 给定N个闭区间[ai,bi],请你在数轴上选择尽量少的点,使得每个区间内至少包含一个选出的点。 输出选择的点的最小数量。 位于区间端点上的点也算作区间内。 输入格式 第一行包含整数N,表示区间数。 接下来N行&#xf…

鸿蒙轻内核M核源码分析系列二一 03 文件系统LittleFS

2.2 文件信息数组操作 函数LfsAllocFd()设置文件信息数组元素信息。参数fileName为文件路径信息,传出参数fd为文件描述符即数组索引。遍历文件信息数组,遍历到第一个未使用的元素标记其为已使用状态,设置文件路径信息,把数组索引…

【LeetCode最详尽解答】167-两数之和 II-输入有序数组 Two-Sum-II-Input-Array-Is-Sorted

欢迎收藏Star我的Machine Learning Blog:https://github.com/purepisces/Wenqing-Machine_Learning_Blog。如果收藏star, 有问题可以随时与我交流, 谢谢大家! 链接: 167-两数之和 II-输入有序数组 直觉 这是一个典型的双指针问题。 输入&#xff1a…

gbase8s数据库阻塞检查点和非阻塞检查点的执行机制

1. 检查点的描述 为了便于数据库系统的复原和逻辑恢复,数据库服务器生成的一致性标志点,称为检查点,其是建立在数据库系统的已知和一致状态时日志中的某个时间点检查点的目的在于定期将逻辑日志中的重新启动点向前移动 如果存在检查点&#…

HTML DOM 对象

HTML DOM 对象 1. 概述 HTML DOM(文档对象模型)是一个跨平台和语言独立的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。在HTML DOM中,文档被表示为节点树,其中每个节点代表文档中的一个部分,例如元素、文本或属性。HTML DOM对象是构成这个节点树的基…

Windows 服务器Nginx 下载、部署、配置流程(图文教程)

不定期更新 目录 一、下载Nginx安装包 二、上传安装包 三、启动Nginx 四、Nginx常用命令 五、Nginx(最小)配置详解 六、Nginx(基础)配置详解 七、反向代理 八、负载均衡 九、动静分离 十、报错 一、下载Nginx安装包 四…

【源码】综合股票币币合约交易所源码/etf交易所源码/美股港股台股交易所源码

支持多国语言 全开源可二开的一个版本!支持虚拟货币 ETF 外汇 美股 A股 港股 台股。 前端是VUE开发(带vue工程源码)后端JAVA开发!搭建也相对简单。 总的来说功能非常强大,适合线上运营的一个版本,有兴趣的可…

(53)MOS管专题--->(08)MOS管N沟道MOS管

(08)MOS管N沟道MOS管 1 目录 (a)IC简介 (b)数字IC设计流程 (c)Verilog简介 (d)MOS管N沟道MOS管 (e)结束 1 IC简介 (a)在IC设计中,设计师使用电路设计工具(如EDA软件)来设计和模拟各种电路,例如逻辑电路、模拟电路、数字信号处理电路等。然后,根据设…

【因果推断python】38_预测模型1

目录 工业界中的机器学习 之前的部分涵盖了因果推理的核心。那里的技术是众所周知和成熟的。他们经受住了时间的考验。第一部分建立了我们可以依赖的坚实基础。用更专业的术语来说,第一部分侧重于定义什么是因果推理,哪些偏差会阻止相关性成为因果关系&…

支付数据安全

支付数据安全是确保支付系统和用户信息安全的关键环节,以下是一些可以采取的措施来增强支付数据的安全性: 数据加密:使用强加密算法来保护存储和传输中的支付数据,确保即使数据被截获也无法被未授权者读取[26]。 使用安全的通信协…

自定义防抖注解

问题场景 在开发中由于可能存在的网络波动问题导致用户重复提交,所以自定义一个防抖注解。设计思路:自定义注解加在接口的方法上,注解中设置了SPEL表达式,可以通过SPEL表达式从接口参数中提取Redis的Key,以这个Key作为…

空气的物性解释

什么是空气?什么是常态空气?空气就是我们生活在其中的大气。常态空气是一个规定的值(不同国家有所不同):压力0.1MPa(或者说是1个标准大气压)、温度20℃、相对湿度为36%状态下称之为常态空气。常…

Techo TVP技术 沙龙

Techo TVP技术 沙龙 今天参加了 在上海 徐汇 腾讯云大厦 举办的 Techo TVP 技术沙龙(主要介绍 AI agent 让我感受很深) ,那什么是 AI Agent呢? 是一个智能体,由大语言模型驱动,具有自主理解、感知、规划、…

MISSING COURSE-shell

shell 01 what is the shell q: linux如何操作计算机硬件cpu 内存 磁盘 显示器等 a:使用linux的内核操作 1.shell -is命令 shell通过编写shell命令 发送给linux内核 去执行 操作就是计算机硬件 so shell 是用户操作计算机 类似于windows里的dos命令 shell是一门程序设计语言…

《分析模式》漫谈03- Unified Method并不是RUP

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 在《分析模式》第2章 ,Fowler提到了“Rational Softwares Unified Method”, 而且给出了引用的参考文献,是Rational公司的一份文档: 200…

数字电路中二进制的数据表达

文章目录 1. 二进制数据表达 1.1 二进制简介 1.2 用二进制表达文字 1.2.1 最开始的表达方式 1.2.2 通讯系统的编码和解码 1.2.3 集成电路 1.2.4 ASCII编码 1.2.5 GBK编码 1.2.6 Unicode编码 2. 用二进制表达图像 2.1 图片像素化 2.2 像素数字化 2.3 二值图像 2.4…

Git冲突解决指南:如何优雅地解决代码合并冲突

在团队协作开发中,使用版本控制系统Git是非常常见的。然而,在多人同时对同一文件进行修改时,就可能出现代码合并冲突。这时就需要我们学会如何优雅地解决这些冲突,保证代码的完整性和质量。本文将为您介绍Git冲突解决的基本原则和…

string类的使用手册

1.构造函数 补充:npos:size_t类型数据的最大值 default (1) string(); 构造空的string类对象 copy (2) string (const string& str); 拷贝构造函数(深拷贝) substring (3) string (const string& str, size_t pos, size_…

在 dingo api 路由中使用 middleware

在使用dingo api路由中使用middleware api.throttle 节流中间件遇到的问题 $api->group([middleware > [auth:api]],function ($api) {$api->get(getUserInfo, [middleware > [api.throttle],limit > 1,expires > 1], App\Http\Controllers\Users\UserContr…