vite+Vue3学习笔记(3)——界面设计

1 Element-plus

这是一个基于Vue3的组件库,能够快速构建界面样式。
官网链接:

https://element-plus.gitee.io/zh-CN/guide/design.html

1.1 基础组件

1.1.1 安装

项目中的终端输入:

npm install --save element-plus

1.1.2 引用

1.1.2.1 完整引用

文件包会较大。
1、在src/main.js中导入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(ElementPlus);

2、在.vue文件内,添加按钮和开关组件

//HelloWorld.vue
<template><div><!-- 按钮 --><el-row class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></el-row><!-- 开关 --><el-switchv-model="value"size="large"active-text="Open"inactive-text="Close"/><!-- br实现内容换行 --><br /><el-switch v-model="value" active-text="Open" inactive-text="Close" /><br /><el-switchv-model="value"size="small"active-text="Open"inactive-text="Close"active-color="#13ce66"inactive-color="#ff4949"/></div>
</template><script>
export default{name:'HelloWorld',data(){return{value:false,}},
}
</script>

实现如下:

在这里插入图片描述

1.1.2.2 按需导入

参考链接:

https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5

1、首先需要安装unplugin-vue-componentsunplugin-auto-import,终端输入:

npm install -D unplugin-vue-components unplugin-auto-import

2、修改vite.config.js文件:

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [AutoImport({resolvers:[ElementPlusResolver()]}),Components({resolvers:[ElementPlusResolver()]})],
})

3、src/main.js内的import和use要删掉。
4、.vue文件的组件不用修改。

1.3 加载字体图标

1.3.1 安装字体图标库

终端输入:

npm install @element-plus/icons-vue

1.3.2 全局注册

创建/src/plugins文件夹,在文件夹下创建文件icons.js
代码如下:

import * as components from "@element-plus/icons-vue";
export default{install:(app)=>{for(const key in components){const componentConfig = components[key];app.component(componentConfig.name, componentConfig);}},
}

1.3.3 引用文件

/src/main.js中引入icons.js文件。
代码如下:

//main.js
import elementIcon from './plugins/icons';
app.use(elementIcon);

1.3.4 使用图标

/src/components/HelloWorld.vue中添加图标标签:

<template><div><!-- 图标 --><br /><el-icon :size="20"><Edit /></el-icon><el-icon color="#409EFC" class="no-inherit"><Share /></el-icon><el-icon><Delete /></el-icon><el-icon class="is-loading"><Loading /></el-icon><el-icon><CirclePlus /></el-icon><el-button size="small"><el-icon :size="20" color="blue"><CirclePlus /></el-icon></el-button><br /><el-button size="large" @click="clickFilterHandle"><el-icon><div><Filter /></div>Filter</el-icon></el-button></div>
</template>

显示图标如下:

在这里插入图片描述

2 界面布局

参考链接:

https://element-plus.gitee.io/zh-CN/component/container.html#%E5%B8%B8%E8%A7%81%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80

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

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

相关文章

图论及其应用(匈牙利算法)---期末胡乱复习版

目录 题目知识点解题步骤小结题目 T1:从下图中给定的 M = {x1y4,x2y2,x3y1,x4y5},用 Hungariam算法【匈牙利算法】 求出图中的完美匹配,并写出步骤。 知识点 关于匈牙利算法: 需要注意的是,匈牙利算法仅适用于二分图,并且能够找到完美匹配。什么是交替路?从一个未匹…

BDD - Python Behave Retry 机制

BDD - Python Behave Retry 机制 引言Behave RetryBehave Retry 应用feature 文件创建 step 文件Retry运行 Behave 并生成 rerun 文件重新运行失败的场景 引言 在日常运行测试用例&#xff0c;有时因为环境不稳定造成一些测试用例跑失败了&#xff0c;如果能将这些失败的测试用…

计算字符串的长度几种方法 | 递归 | 指针减指针 | 计数器 | C语言 | 详解 | 期末考试必看!!!

一&#xff0c;使用 递归 计算 字符串 的 长度 1&#xff0c;题目描述 2&#xff0c;分析题目 Ⅰ&#xff0c;题目中要求除了函数的形参&#xff0c;函数中不能够使用多余的变量&#xff08;这是比较苛刻的要求&#xff09;。 Ⅱ&#xff0c;根据此&#xff0c;很自然的…

k3s-安装、卸载、证书过期x509

k3s-安装、卸载、证书过期 K3S 是轻量级的 Kubernetes。易于安装&#xff0c;仅需要 Kubernetes 内存的一半&#xff0c;所有组件都在一个小于 100 MB 的二进制文件中。 环境准备 # 配置yum源 yum install -y yum-utils yum-config-manager --add-repo http://mirrors.aliyu…

回归预测 | MATLAB实OOA-LSTM基于鱼鹰优化算法优化长短期记忆网络的多输入单输出数据回归预测模型 (多指标,多图)

回归预测 | MATLAB实OOA-LSTM基于鱼鹰优化算法优化长短期记忆网络的多输入单输出数据回归预测模型 &#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实OOA-LSTM基于鱼鹰优化算法优化长短期记忆网络的多输入单输出数据回归预测模型 &#xff08;多指标&a…

20231228在Firefly的AIO-3399J开发板的Android11的挖掘机的DTS配置单前置摄像头ov13850

20231228在Firefly的AIO-3399J开发板的Android11的挖掘机的DTS配置单前置摄像头ov13850 2023/12/28 10:42 【碰到一个很神奇的问题】&#xff1a; 昨天晚上前置摄像头怎么也点不亮&#xff01;改了巨多的地方&#xff01;晚上睡觉之前把开发板彻底断电了&#xff01;今天开电脑…

STM32的在线升级(IAP)实现方法:BOOT+APP原理详解

0 工具准备 Keil uVision5 Cortex M3权威指南&#xff08;中文&#xff09; STM32参考手册 1 在线升级&#xff08;IAP&#xff09;设计思路 为了实现STM32的在线升级&#xff08;IAP&#xff09;功能&#xff0c;通常会将STM32的FLASH划分为BOOT和APP两个部分&#xff0c;BOO…

虚幻UE 光源-色温和光度学

文章目录 一、色温二、光度学1、lux勒克斯2、cd坎德拉3、nit尼特4、总结 三、EV曝光值 一、色温 色温可以简单的认为就是颜色的温度。 但他是有范围的&#xff0c;也是有要求的&#xff0c;并不是所有的颜色都可以有色温。 以上就是色温范围图。 而这些颜色的温度是怎么定义…

【算法每日一练]-数论 (保姆级教程 篇2 )#行列式 #甜甜花研究 #约数个数 #模数 #数树 #盒子与球

目录 今日知识点&#xff1a; 辗转相减法化下三角求行列式 组合数动态规划打表 约数个数等于质因数的次方1的乘积 求一个模数 将n个不同的球放入r个不同的盒子&#xff1a;f[i][j]f[i-1][j-1]f[i-1][j]*j 行列式 甜甜花的研究 约数个数 模数 数树 盒子与球 行列…

github短视频去除水印项目Douyin_TikTok_Download_API介绍

当下正值短视频盛行的时代。在我们浏览短视频的同时&#xff0c;经常能发现一些精美的图片、引人入胜的文案以及吸引眼球的视频&#xff0c;想要将它们保存到本地。然而&#xff0c;保存下来的图片或视频通常伴随着不太愉悦的水印&#xff0c;这显著降低了使用体验。因此&#…

开源数据可视化分析工具DataEase本地部署并实现远程访问

目录 前言 1. 安装DataEase 2. 本地访问测试 3. 安装 cpolar内网穿透软件 4. 配置DataEase公网访问地址 5. 公网远程访问Data Ease 6. 固定Data Ease公网地址 结语 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊开源数据可视化分析工…

element的form表单校验(身份证号、手机号、整数、汉字、for循环列表)

<template><div class"FormPage"><el-form ref"form" :model"form" :rules"rules" label-width"100px"><el-form-item label"姓名:" prop"name"><el-input v-model"fo…

25道RabbitMQ面试题含答案(很全)

1. 什么是RabbitMQ RabbitMQ是一个开源的消息队列系统&#xff0c;它使用AMQP&#xff08;高级消息队列协议&#xff09;标准。RabbitMQ的主要目标是提供可靠的消息传递&#xff0c;确保消息的可靠性和顺序性&#xff0c;同时提供灵活的路由和消息确认机制。 RabbitMQ基于AMQ…

Unity坦克大战开发全流程——游戏场景——游戏界面——设置界面复用

游戏场景——游戏界面——设置界面复用 先将开始场景当中的设置面板复制过来 由于设置面板挂载的脚本都是相同的&#xff0c;在BeginScene中关闭设置面板时不会报空&#xff0c;而在GameScene中关闭设置面板时却会报空&#xff0c;这是因为监听事件中的单例模式调用的实例是Beg…

基于机器视觉的害虫种类及计数检测研究-人工智能项目-附代码

概述 农业与民生和经济发展息息相关&#xff0c;对农业发展科学化的关注既是民生需求&#xff0c; 也是经济稳步发展的迫切需求。病虫害是影响农作物生长的重要因素&#xff0c;对农作物的产量和品质都能造成无法估计的损害。 - 针对目前广大农业产区农业植保人员稀缺、病虫害…

爬虫基础一(持续更新)

爬虫概念&#xff1a; 通过编写程序&#xff0c;模拟浏览器上网&#xff0c;然后让其去互联网上抓取数据的过程 分类&#xff1a; 1&#xff0c;通用爬虫&#xff1a;抓取一整张页面数据 2&#xff0c;聚焦爬虫&#xff1a;抓取页面中的局部内容 3&#xff0c;增量式爬虫&…

【UnityShader入门精要学习笔记】(2)GPU流水线

本系列为作者学习UnityShader入门精要而作的笔记&#xff0c;内容将包括&#xff1a; 书本中句子照抄 个人批注项目源码一堆新手会犯的错误潜在的太监断更&#xff0c;有始无终 总之适用于同样开始学习Shader的同学们进行有取舍的参考。 文章目录 上节复习GPU流水线顶点着色…

Linux操作系统极速入门[常用指令]

linux概述&#xff1a; Linux是一套免费使用和自由传播的操作系统 我们为什么要学&#xff0c;Linux&#xff1f; 主流操作系统&#xff1a; linux系统版本&#xff1a; 内核版&#xff1a; 由linux核心团队开发&#xff0c;维护 免费&#xff0c;开源 负责控制硬件 发行版&…

红队攻防实战之DC2

吾愿效法古圣先贤&#xff0c;使成千上万的巧儿都能在21世纪的中华盛世里&#xff0c;丰衣足食&#xff0c;怡然自得 0x01 信息收集: 1.1 端口探测 使用nmap工具 可以发现开放了80端口&#xff0c;网页服务器但是可以看出做了域名解析&#xff0c;所以需要在本地完成本地域名…

RISC Zero的Babybear域 及其 扩域

1. 引言 前序博客见&#xff1a; 有限域的Fast Multiplication和Modular Reduction算法实现 代码实现见&#xff1a; https://github.com/risc0/risc0/blob/main/risc0/core/src/field/baby_bear.rshttps://github.com/risc0/risc0/tree/main/risc0/circuit/rv32im-sys/cxx…