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…

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;

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

现在&#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系…

二阶段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请求的…

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

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

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

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

纯nginx制作文件上传下载服务器

什么是webdav webdav 是一组超文本传输协议的技术集合&#xff0c;有利于用户键协同编辑和管理存储在万维网服务器文档。同时来说就是&#xff0c;webdav可以让用户直接存储&#xff0c;下载&#xff0c;编辑文件&#xff0c;操作文件需要进行用户认证 基于nginx快速搭建webdav…

《MySQL 实战 45 讲》课程学习笔记(一)

基础架构&#xff1a;一条 SQL 查询语句是如何执行的&#xff1f; MySQL 的基本架构 MySQL 可以分为 Server 层和存储引擎层两部分。 Server 层 包括连接器、查询缓存、分析器、优化器、执行器&#xff1b;涵盖 MySQL 的大多数核心服务功能&#xff0c;以及所有的内置函数&…

idea模块的pom.xml被划横线,不识别的解决办法

目录 问题&#xff1a; 解决办法&#xff1a; 1.打开设置 2. 取消勾选 3.点击确认 4.解决 问题提出&#xff1a; 写shi山的过程中&#xff0c;给模块取错名字了&#xff0c;改名的时候不知道点到了什么&#xff0c;一个模块的pom.xml变成灰色了&#xff0…

排序算法(冒泡排序、选择排序、插入排序、希尔排序、堆排序、快速排序、归并排序、计数排序)

&#x1f355;博客主页&#xff1a;️自信不孤单 &#x1f36c;文章专栏&#xff1a;数据结构与算法 &#x1f35a;代码仓库&#xff1a;破浪晓梦 &#x1f36d;欢迎关注&#xff1a;欢迎大家点赞收藏关注 文章目录 &#x1f353;冒泡排序概念算法步骤动图演示代码 &#x1f34…

谷歌: 安卓补丁漏洞让 N-days 与 0-days 同样危险

近日&#xff0c;谷歌发布了年度零日漏洞报告&#xff0c;展示了 2022 年的野外漏洞统计数据&#xff0c;并强调了 Android 平台中长期存在的问题&#xff0c;该问题在很长一段时间内提高了已披露漏洞的价值和使用。 更具体地说&#xff0c;谷歌的报告强调了安卓系统中的 &quo…

Java阻塞队列

什么阻塞队列 阻塞队列&#xff08;BlockingQueue&#xff09;是一个支持两个附加操作的队列。这两个附加的操作支持阻塞的插入和移除方法。 支持阻塞的插入方法&#xff1a;意思是当队列满时&#xff0c;队列会阻塞插入元素的线程&#xff0c;直到队列不满。支持阻塞的移除方…

vue项目开发常用工具类

防止重复造轮子&#xff0c;将经常用的函数进行记录&#xff0c;也参考网上的并一起进行记录&#xff0c;后续会持续更新常用到的函数工具类方法&#x1f609;&#x1f609; /** 验证手机号是否合格* true--说明合格*/ export function isPhone(phoneStr) {let myreg /^[1][3,…