Vue+Element Plus 初始化

1. 初始化 Vue 项目   
创建vue3 项目  
vue create k8s-platform-fe
2. 引入 Element Plus
安装 element-plus   首先去安装这些依赖包,安装好了将其引入,引入的方式有全局引用和局部引入。其实和组件是一样的,局部引入哪里引入哪里使用。如果每个页面都涉及到使用element组件的时候,就没有必要一个一个组件去引入了,那么只需要在main.js里做全局的引入就行了。
#进入项目目录
cd k8s-platform-fe#安装element plus,这些依赖是根据每个项目去隔离的
npm install element-plus

element-ui的图标不需要一个一个导入就可以直接使用了。但是element-plus的话需要一个一个导入。图标如果没有去做全局注册的话,要去导入一下,引入一下才能使用这个图标,也就是局部导入,这样在后面使用图标的时候直接使用就行了,就不需要再去导入了。

下面就是整个element的初始化就完成了。

import { createApp } from 'vue'
import App from './App.vue'//导入elementplus
import ElementPlus, { ElIcon } from 'element-plus'
//默认情况下找的是node_models目录下的,导入样式表
import 'element-plus/dist/index.css'
//导入element-plus所有图标
import * as ELIcons from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'//改造vue初始化实例
const app = createApp(App)
//将所有图标注册为组件
for (let iconName in ELIcons){//第一个参数是你注册的组件名,这里是原生的组件名,第二个参数是组件app.component(iconName,ElIcon[iconName])
}
//使用element-plus
app.use(ElementPlus)
app.mount('#app')

component是注册组件,在main.js里面的话就是全局注册,所有地方都能用,use是使用第三方包的特性,也就是安装vue的插件,你像antd、elementplus、router这些,除了npm install外,还需要vue去引入这个插件。

App.vue当中如下: 

<template><P>elemnet-plus组件如下</P><el-button type="primary">这是一个elemnet按钮</el-button>
</template><script>
export default {name: 'App',}
</script>

 这样就说明成功了。

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

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

相关文章

接口测试和功能测试的区别

我们分成两个部分来讲&#xff1a; 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者之前的区别与联系。但该部分只交代了怎么做和如何做&#xff1f;并没有解释为什么要做&#xff1f; 第二部分&#xf…

mac安装nvm

如果安装过node&#xff0c;须得卸载 sudo npm uninstall npm -gsudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*sudo rm -rf /usr/local/include/node /Users/$USER/.npmsudo rm /usr/local/bin/nodesudo rm /usr/local/share/m…

nginx rtmp http_flv直播推流

安装配置nginx yum install epel-release -y sudo rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm yum install ffmpeg ffmpeg-devel -y yum install gcc -y yum install pcre pcre-devel -y yum install openssl open…

Wireshark抓包分析TCP协议:三次握手和四次挥手

01、前言 面试中我们经常会被问到TCP协议的三次握手和四次挥手的过程&#xff0c;为什么总喜欢问这个问题呢&#xff1f; 其实我们平时使用的很多协议都是应用层协议&#xff0c;比如HTTP协议&#xff0c;https协议&#xff0c;DNS协议&#xff0c;FTP协议等&#xff1b;而应…

Google OAuth 2 authorization - Error: redirect_uri_mismatch 400

出现这个问题&#xff0c;一般是因为google授权origin地址和重定向redirect_uri地址没有匹配上。 请仔细检查重定向地址的url中origin部分和授权origin部分是否能够匹配&#xff1a;

kubeadm一键部署K8S流程

-架构设计&#xff1a; k8s部署&#xff1a;&#xff08;masternode1node2&#xff09; master.com:192.168.17.144 node1.com:192.168.17.146 node2.com:192.168.17.148 master上部署&#xff1a; etcd&#xff08;数据库&#xff09;、kube-apiserver、kube-controller-mana…

Android屏幕像素密度

有时需要为视图属性指定大小尺寸值&#xff08;通常以像素为单位&#xff0c;有时也用点、毫米或英寸&#xff09;。一些常见的属性包括文字大小&#xff08;text size&#xff09;、边距&#xff08;margin&#xff09;以及内边距&#xff08;padding&#xff09;。文字大小指…

美容店预约小程序制作教程详解

现在&#xff0c;制作一个专属于美容店的预约小程序不再需要编程经验&#xff0c;通过乔拓云网提供的后台管理系统&#xff0c;你可以轻松地完成整个制作过程。下面&#xff0c;我将为你详细介绍如何DIY一个美容店预约小程序。 首先&#xff0c;登录乔拓云网的后台管理系统&…

html学习5(表单)

1、表单是一个包含表单元素的区域&#xff0c;用于收集用户的输入信息。 2、表单元素是允许用户在表单中输入内容&#xff0c;比如&#xff1a;文本域&#xff08;textarea&#xff09;、下拉列表&#xff08;select&#xff09;、单选框&#xff08;radio-buttons&#xff09…

#rust taur运行报错#

场景:在window11系统上运行 tauri桌面莹应用&#xff0c;提示错误。 Visual Studio 2022 生成工具 安装的sdk11 , rust运行模式是stable-x86_64-pc-window-gnu&#xff0c; 运行npm run tauir dev 一致失败&#xff0c;失败信息如下 原因&#xff1a;1&#xff1a;在window11系…

推理加速 --- torch.compile

推理加速-- torch.compile 一、背景介绍1.2 首次推理速度慢1.3 推理多次之后&#xff0c;又会出现一次速度特别慢的情况&#xff0c;感觉好像是重新优化 二、如何使用三、其他设置3.1 mode 设置3.2 backend3.3 fullgraph3.4 dynamic 参考资料 一、背景介绍 PyTorch 2.0 官宣了…

银行网络安全体系发展及趋势思考

随着数字经济的快速发展&#xff0c;我国银行业务服务模式与技术架构发生了深刻变革。尤其在数字化转型背景下&#xff0c;网络安全作为保障银行业务稳定连续运行的基础&#xff0c;正面临更大的挑战。 银行网络安全体系与银行技术、业务架构密切相关&#xff0c;先后经历了分…

vue使用mqtt服务端实现即时通讯

npm install mqtt3.0.0注意要指定下载3.0.0版本 // 引入MQTT const mqtt require(mqtt/dist/mqtt.js) // 声明client data(){return {client: null} } //方法 //连接服务器connect() {let options {username: "xxx",password: "xxxx",cleanSession : fa…

二阶段web基础与http协议

dns与域名 网络是基于tcp/ip协议进行通信和连接的 应用层-----传输层-----网络层-----数据链路层-----物理层 ip地址&#xff0c;每一台主机都有一个唯一的地址标识&#xff08;固定的ip地址&#xff09; 1.区分用户和计算机 2.通信 ip地址的问题在于32位二进制数组成的&…

触发器实现海豚调度失败企业微信自动告警

原理 触发器监控工作流实例表&#xff0c;当工作流实例表中的状态更新后&#xff0c;针对状态为失败的任务进行企业微信告警。 发送企业微信消息函数 # 必须在pg的主机上线安装requests模块 pip install requests # 以postgres用户登陆psql客户端到etl数据库 psql etl -U po…

ClickHouse的安装启动

安装步骤 1.关闭防火墙 2.修改资源限制配置文件 2.1 路径&#xff1a;/etc/security/limits.conf 在末尾添加&#xff1a; * soft nofile 65536 #任何用户可以打开的最大的文件描述符数量&#xff0c;默认1024 这里的设置会限制tcp连接数 * hard nofile 65536 * soft nproc…

express学习笔记3 - 三大件

便于统一管理router&#xff0c;创建 router 文件夹&#xff0c;创建 router/index.js&#xff1a; const express require(express)// 注册路由 const router express.Router() router.get(/,function(req,res){res.send(让我们开始express之旅) }) /*** 集中处理404请求的…

使用矢量数据库打造全新的搜索引擎

在技术层面上&#xff0c;矢量数据库采用了一种名为“矢量索引”的技术&#xff0c;这是一种组织和搜索矢量数据的方法&#xff0c;可以快速找到相似矢量。其中关键的一环是“距离函数”的概念&#xff0c;它可以衡量两个矢量的相似程度。 1.矢量数据库简介 矢量数据库是专门…

抖音短视频seo矩阵系统源码开发部署技术分享

抖音短视频的SEO矩阵系统是一个非常重要的部分&#xff0c;它可以帮助视频更好地被搜索引擎识别和推荐。以下是一些关于开发和部署抖音短视频SEO矩阵系统的技术分享&#xff1a; 一、 抖音短视频SEO矩阵系统的技术分享&#xff1a; 关键词研究&#xff1a;在开发抖音短视频SEO矩…

限流式保护器在古建筑电气火灾中的应用

安科瑞 华楠 【摘要】针对文物古建筑本身火灾危险性大&#xff0c;并且其内部电气问题较多&#xff0c;增加了火灾危险性的特点&#xff0c;提出了预防电气火灾的措施。 【关键词】古建筑&#xff1b;电气防火&#xff1b;限流式保护器&#xff1b; 文物古建筑是中华民族历史文…