vue3前端开发,如何引入element-plus前端框架及配置参数

vue3前端开发,如何引入element-plus前端框架及配置参数!这是一个简单的教程,帮助大家快速在自己的项目中引入element-plus框架。

主要是介绍的引入流程和参数的配置情况。


如图,这个就是elment-plus前端框架里面的一个主按钮展示。表示我们配置参数成功了。

第一步,您需要再自己的项目中安装依赖包。

npm install element-plus --save

安装完成后,你会看见依赖选项里多了一个配置参数。

 

如图,多了一个参数。


接下来第二步,你需要配置一下,vite的参数。才能让项目识别到它。 

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//配置element-plus
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({resolvers:[ElementPlusResolver()],}),Components({resolvers:[ElementPlusResolver()],}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

如图,详细了列出了,具体的参数配置信息。务必按照这个信息输入文件中。


<script setup>
</script>
<template><h3>element plus 测试</h3><el-button type="primary">primary</el-button>
</template>

 如图,入口app.vue文件内代码情况。我们只是调用了一个主按钮的信息。页面正常显示就行了。说明我们配置参数无误。

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

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

相关文章

NodeJs 第二十章 代理

在计算机网络中&#xff0c;代理是一种中间服务&#xff0c;能够代理用户与网络资源之间的通信。代理服务器可以缓存网页内容、过滤网络流量或隐藏用户的真实IP地址等功能。 在日常开发中&#xff0c;我们接触最多的是客户端发送ajax到服务端。但是服务端并不是 node &#xf…

pod 报错Failed to connect to github.com port 443

pod 报错Failed to connect to github.com port 443 1、排查代理问题1.1、查找网络代理1.2、修改 Git 的代理 2、排查DNS解析问题2.1、查找 ip地址2.2、修改 host 文件 1、排查代理问题 1.1、查找网络代理 打开 设置 --> 网络与Internet --> 查找代理 1.2、修改 Git …

k8s中服务器容器tcp连接数量优化

netty的http1服务器在运行一段时间后会无法提供服务&#xff0c;返回客户端socket hang up 使用apipost测试抓包显示三次握手后被reset 修改net/core/somaxconn 登录容器&#xff0c;cat /proc/sys/net/core/somaxconn显示128&#xff0c;对于一个服务器来说&#xff0c;这个…

第26章 内积继续深入讲解,一点叉乘

只要思想敢滑坡&#xff0c;办法总比想法多。 之前讲了内积的来源&#xff0c;现在继续讲在矩阵中为什么会有&#xff0c;对应坐标相乘的内积表现方式&#xff0c;还是需要复数的存在&#xff0c;现在就现在一个矩阵中讲&#xff0c;在一维的矩阵&#xff0c;这个矩阵就先全部…

Git提交大文件报错“remote: Please remove the file from history and try again. ”

如在使用Git过程中不小心将较大的二进制文件加入仓库&#xff0c;那么仓库大小很快就会超过规定的配额&#xff0c;在Push的时候会报下面的错误&#xff1a; remote: Powered by GITEE.COM [GNK-6.4] remote: error: File: c91e5de4f55bedd0669db01036fc131ea8e516ce 130.66 MB…

PLAN方法:解决 GAN 生成医学图像 Latent 空间中的隐私保护方法

PLAN方法&#xff1a;解决 GAN 生成医学图像 Latent 空间中的隐私保护方法 PLAN 原理StyleGAN 生成视网膜图k-SALSA 生成视网膜图PLAN方法 生成视网膜图 总结 PLAN 原理 论文&#xff1a;https://arxiv.org/abs/2307.02984 代码&#xff1a;https://github.com/perceivelab/P…

kingbase常用SQL总结之统计大小

概述 数据库运维中&#xff0c;我们需要总结一些常用的SQL语句&#xff0c;无论是日常巡检、故障排查或是死锁分析&#xff0c;都可以随时拿来用&#xff0c;提升工作效率&#xff0c;下面是一些常见的经典SQL或者是笔者自己工作过程中用到的常用的SQL,整理记录以备不时之需。…

SpringBoot 统计更多Api接口日志信息

第1步&#xff1a;基本配置了解 Further Reading &#xff1a; SpringBoot 统计API接口用时该使用过滤器还是拦截器? 第2步&#xff1a;丰富LogInterceptor&#xff08;主体流程&#xff09; 日志打印放afterCompletion是为了兼容异常场景也可以记录日志 import com.zhang…

【LeetCode27】 移除元素

27. 移除元素 快慢型双指针 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不…

vulhub之redis篇

CVE-2022-0543 | redis的远程代码执行漏洞 简介 CVE-2022-0543 该 Redis 沙盒逃逸漏洞影响 Debian 系的 Linux 发行版本,并非 Redis 本身漏洞, 漏洞形成原因在于系统补丁加载了一些redis源码注释了的代码 原理分析 redis一直有一个攻击面,就是在用户连接redis后,可以通过ev…

企业微信开发:本地运行一个页面应用

问题 在开发环境本地运行一个页面应用&#xff0c;将网页URL配置到企业微信的应用主页网址中&#xff0c;此时应用在企业微信中能够正常打开网页吗&#xff1f; 结论是&#xff1a;能够正常访问页面。 能够访问的前提 能够访问的前提条件&#xff0c;企业微信客户端所在的网…

界面控件DevExpress ASP.NET Data Grid组件 - 可快速处理各类型数据!(一)

由DevExpress开发的快速且功能完整的ASP.NET Web Forms的Data Grid组件&#xff0c;从全面的数据塑造和数据过滤选项到十多个集成数据编辑器&#xff0c;该套件提供了帮助用户构建极佳数据所需的一些&#xff0c;没有限制&#xff01; P.S&#xff1a;DevExpress ASP.NET Web …

k8s--helm

什么是helm&#xff1f;在没有这个helm之前&#xff0c;deployment service ingress helm的作用 通过打包的方式&#xff0c;把deployment service ingress等打包在一块&#xff0c;一键式的部署服务&#xff0c;类似yum安装 官方提供的一个类似与安装仓库额功能&#xff0c;…

Linux C语言开发(十)vim基本操作

目录 一.什么是vim 二.vim的进入与退出 三.vim的基本模式 四.vim的命令行模式操作

SPA vs MPA vs PWA

1、单页面应用程序&#xff08;SPA&#xff09; ① 什么是 SPA SPA 全称为 Single-Page Application&#xff0c;表示单页面应用程序。 也就是说只有一个 HTML 文件的 Web 应用&#xff0c;我们通过 Vue 开发的项目其实就是典型的 SPA应用 在单页面应用程序中&#xff0c;我…

C语言——结构体讲解

目录 一、结构体类型的声明 二、结构体变量的定义和初始化 三、结构体的重命名 四、结构体的自引用 五、结构体内存对齐 六、结构体传参 七、结构体实现位段 7.1 什么是位段 7.2 位段的声明和使用 7.3 位段的空间大小计算 7.4 位段的内存分配 7.5 位段的跨平…

计算机网络-物理层基本概念(接口特性 相关概念)

文章目录 总览物理层接口特性星火模型给出的相关概念解释&#xff08;仅供参考&#xff09; 总览 求极限传输速率&#xff1a;奈氏准则&#xff0c;香农定理&#xff08;背景环境不一样&#xff09; 编码&#xff1a;数据变成数字信号 调制&#xff1a;数字信号变成模拟信号 信…

Elasticsearch:2023 年 Lucene 领域发生了什么?

作者&#xff1a;来自 Elastic Adrien Grand 2023 年刚刚结束&#xff0c;又是 Apache Lucene 开发活跃的一年。 让我们花点时间回顾一下去年的亮点。 社区 2023 年&#xff0c;有&#xff1a; 5 个次要版本&#xff08;9.5、9.6、9.7、9.8 和 9.9&#xff09;&#xff0c;1 …

51单片机LED点阵屏

LED点阵屏 LED点阵屏是一种由许多小型LED灯组成的矩阵式显示屏。这些LED灯可以是单色、双色或全彩的&#xff0c;它们排列成行和列的网格&#xff0c;可以根据需要点亮来显示图像、文字或动画等内容。LED点阵屏广泛应用于户外广告牌、室内显示、交通信号灯、电子价格标签和其他…

【设计模式】字节三面:请举例阐释访问者模式

今天我们要一起探讨的主题是一种设计模式——访问者模式(Visitor Pattern)。我将从最基础的概念、应用场景&#xff0c;再到实例代码的展示&#xff0c;全方位的为大家剖析访问者模式。而且&#xff0c;我保证&#xff0c;你即使是编程新手&#xff0c;也能理解并开始应用这个设…