Vue+Element Plus 初始化

news2024/9/21 17:28:50
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.coloradmin.cn/o/819276.html

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

相关文章

API教程:轻松上手HTTP代理服务!

作为HTTP代理产品供应商&#xff0c;我们为您带来一份详细的教程&#xff0c;帮助您轻松上手使用API&#xff0c;并充分利用HTTP代理服务。无论您是开发人员、网络管理员还是普通用户&#xff0c;本教程将为您提供操作指南和代码模板&#xff0c;确保您能够顺利使用API并享受HT…

Ubuntu安装harbor(http模式)并随便上传一个

Ubuntu安装harbor&#xff08;http模式&#xff09; docker和harbor的介绍就免了&#xff0c;都不知道啥东西&#xff0c;还安装搞毛 先安装docker环境 不要问&#xff0c;软件源之类的配置&#xff0c;挨个梭就行 sudo apt update sudo apt install apt-transport-https ca…

python简单的病毒编程代码,如何用python写一个病毒

大家好&#xff0c;本文将围绕python简单的病毒编程代码展开说明&#xff0c;如何用python做恶搞病毒是一个很多人都想弄明白的事情&#xff0c;想搞清楚如何用python写一个病毒需要先了解以下几个事情。 1、Python能不能写病毒 国家计算机病毒应急处理中心通过对互联网的监测…

刷题笔记:day 1

力扣 283 移动零 解法一&#xff1a;双指针 定义一个指针 cur 去遍历数组 &#xff1b; 定义一个指针 dest 去指向已处理区间中&#xff0c;非零的最后一个位置。 然后让 指针 cur 遇到 0 &#xff0c;就往后走 &#xff1b; 遇到的数不是 0 &#xff0c;就与 dest指针的下…

C语言结构体讲解

目录 结构体的声明 结构的基础知识 结构的声明 为什么要出现结构体&#xff1f; 结构成员的类型 结构体变量的定义和初始化 定义&#xff1a;&#xff08;全局变量//局部变量&#xff09; 初始化&#xff1a; 结构体成员的访问 结构体传参 结构体的声明 结构的基础知识…

会议oa系统项目部署流程

目录 1.项目部署环境 2.初始化数据库 2.1获取数据库脚本 2.2创建数据库 1.创立数据库连接 2.创建数据库&#xff0c;命名 3.运行sql文件 4.查看导入数据 ​编辑 ​编辑 3项目环境部署 3.1导入项目资源 3.2加载框架 加载成功标志 服务器配置&#xff08;用来保存排…

详解跨境电商ERP开发的核心技术

跨境电商行业的蓬勃发展为企业带来了前所未有的机遇&#xff0c;然而&#xff0c;成功经营跨境电商业务需要高效的管理和操作。在这方面&#xff0c;跨境电商ERP系统成为了关键的工具&#xff0c;能够整合各个业务环节&#xff0c;实现高效运作和优化决策。本文将详解跨境电商E…

一文看懂kubernetes部署:持久卷的安装

持久卷的安装 NFS服务的建立 为了实现elasticsearch以及rabbitmq的数据持久化&#xff0c;需要在k8s中建立持久卷&#xff0c;我们采用nfs方式建立持久卷。 对于持久卷的结构规划如下&#xff1a; 关于索引的磁盘占用&#xff1a; 请根据业务的数据量情况来规划持久卷硬件的情…

android Android Studio Giraffe | 2022.3.1 版本Lombok不兼容 解决方案

android Android Studio Giraffe | 2022.3.1 版本Lombok不兼容 解决方案 1.查看当前的android studio 版本 Android Studio Giraffe | 2022.3.1 Build #AI-223.8836.35.2231.10406996, built on June 29, 2023 2.打开 idea 官网下载页面 idea下载历史版本 找到对应的版本编号…

P5691 [NOI2001] 方程的解数(内附封面)

[NOI2001] 方程的解数 题目描述 已知一个 n n n 元高次方程&#xff1a; ∑ i 1 n k i x i p i 0 \sum\limits_{i1}^n k_ix_i^{p_i} 0 i1∑n​ki​xipi​​0 其中&#xff1a; x 1 , x 2 , … , x n x_1, x_2, \dots ,x_n x1​,x2​,…,xn​ 是未知数&#xff0c; k 1 ,…

RabbitMQ 教程 | 第5章 RabbitMQ 管理

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…

如何理解单例模式? _

例模式(Singleton Pattern)&#xff1a;采取一定的方法保证在整个的软件系统中&#xff0c;对某个类只能存在一个对象实例&#xff0c;并且该类只提供一个取得其对象实例的方法。 通俗点来讲&#xff1a;就是一个男人只能有一个老婆&#xff0c;一个女人只能有一个老公 单例模…

【流量卡奸商自白书】:坑很多,多多少少你得跳一个!

大家好&#xff0c;今天这期短文咱们来讲讲流量卡奸商的自白书&#xff0c;打破你的认知&#xff01;话说虽然没有胆子虚假宣传&#xff0c;没有胆子不给售后&#xff0c;但是呢&#xff0c;整活忽悠消费者来办卡的胆子还是有的&#xff0c;而且还不小。 ​ 作为一个流量卡奸商…

ALLEGRO之Help

本文主要介绍ALLEGRO的Help菜单。 &#xff08;1&#xff09;Documentation&#xff1a;弹出帮助文档&#xff1b; &#xff08;2&#xff09;Whats New&#xff1a;介绍新特性&#xff1b; &#xff08;3&#xff09;Search&#xff1a;暂不清楚&#xff1b; &#xff08;4…

面试之多线程案例(四)

1.单例模式 单例模式是指在内存中只会创建且仅创建一次对象的设计模式。在程序中多次使用同一个对象且作用相同时&#xff0c;为了防止频繁地创建对象使得内存飙升&#xff0c;单例模式可以让程序仅在内存中创建一个对象&#xff0c;让所有需要调用的地方都共享这一单例对象。…

SSL原理详解

SSL协议结构&#xff1a; SSL协议分为两层&#xff0c;下层为SSL记录协议&#xff0c;上层为SSL握手协议、SSL密码变化协议和SSL警告协议。 1.下层为SSL记录协议&#xff0c;主要作用是为高层协议提供基本的安全服务 建立在可靠的传输之上&#xff0c;负责对上层的数据进行分块…

HDFS集群黑白名单机制

HDFS集群黑白名单机制 白名单黑名单 白名单 所谓白名单指的是允许哪些机器加入到当前的HDFS集群中&#xff0c;是一种准入机制白名单由dfs.hosts参数指定&#xff0c;该参数位于hdfs-site.xml.默认值为空dfs.hosts只想文件&#xff0c;该文件包含允许链接到namanode的主机列表…

OpenCVForUnity(九)图片模糊

文章目录 前言一、归一化框滤波器使用blur方法来实现 二、高斯滤波器使用GaussianBlur方法实现 三、中值滤波器使用medianBlur方法实现 四、双边过滤器使用bilateralFilter方法实现 结语 前言 本教程将介绍使用OpenCV中的多种线性滤波器来对图像进行平滑处理&#xff0c;主要包…

程序员面试IT技术岗的三大技巧

文章目录 技巧一&#xff1a;深入研究意向企业技巧二&#xff1a;准备常见的面试问题技巧三&#xff1a;总结经历的面试题 在找工作时&#xff0c;面试是每位程序员必须经历的一关。面对众多求职者竞争激烈的情况&#xff0c;我们需要结合自己的现状&#xff0c;针对意向企业做…

复习第三章反射+IO流

一、反射 JAVA反射机制是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类的所有属性和方法&#xff1b;对于任意一个对象&#xff0c;都能够调用它的任意一个方法和属性&#xff1b;这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机…