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,一经查实,立即删除!

相关文章

VCG 角度弧度互转

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 VCG为我们提供了角度域弧度互相转换的函数vcg::math::ToRad与vcg::math::ToDeg,虽然两者的转换很简单,不过既然VCG已经我们提供了相关函数,这里还是用起来,下面是一个简单的演示代码。 二、实现代码 //VCG #in…

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

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

vite 打包二级目录记录

1、react 配置 首先放一个简单粗暴的方法 使用 HashRouter&#xff0c; 缺点就是路由会带 # <HashRouter><App /> </HashRouter>使用 BrowserRouter 时需要进行下面配置 1、package 配置 {...other,"homepage": "/web" }2、vite.con…

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…

【PostgreSQL】表操作-修改表

【PostgreSQL】表操作快速链接 创建表及基础表命令 修改表 表权限 添加列 ALTER TABLE products ADD COLUMN description text;新列最初填充给定的任何默认值DEFAULT&#xff08;如果未指定子句&#xff0c;则为 null&#xff09;。 注意&#xff1a; 从 PostgreSQL 11 开始…

12.1 【Screen配置】概括

写在前面 在使用Screen服务前,我们需要对Screen进行配置或了解Screen配置信息,对我们的开发调试很重要。 一,配置文件介绍 graphics.conf 文件位于以下目录中: 源码目录:$QNX_TARGET/processor/usr/lib/graphics/platform 终端目录:/usr/lib/graphics/platform 其中处…

leetcode 76. 最小覆盖子串

题目链接&#xff1a;leetcode 76 1.题目 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 “” 。 注意&#xff1a; 对于 t 中重复字符&#xff0c;我们寻找的子字符串中该字符数…

JavaScript 常用事件演示

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍在在JavaScript 常用事件演示以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任何问题可以在评论区…

回归预测 | 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;今天开电脑…

CISSP 第2章: 人员安全和风险管理概念

第二章 人员安全和风险管理概念 2.1 促进人员安全策略 构建工作描述方面的重要因素包括: 职责分离: 把关键的、重要的和敏感工作任务分配给若干不同的管理员或高级执行者&#xff0c;防止共谋 工作职责:最小特权原则 岗位轮换:提供知识冗余&#xff0c;减少伪造、数据更改、偷…

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;计算机专业应届生 今天给大家聊聊开源数据可视化分析工…

SQL IN 操作符

IN 操作符 IN 操作符允许您在 WHERE 子句中规定多个值。 SQL IN 语法 SELECT column1, column2, ... FROM table_name WHERE column IN (value1, value2, ...); 参数说明&#xff1a; column1, column2, ...&#xff1a;要选择的字段名称&#xff0c;可以为多个字段。如果…

阶段七-Bootstrap

Bootstrap&#xff1a;为应用场景设计的前端框架 一、Bootstrap介绍 1. 前端框架介绍 Java框架都是对Java SE技术或Java EE的技术进行封装&#xff0c;按照框架的要求进行搭建环境后可以简化开发流程。 前端框架是对CSS、JavaScript的封装。有的框架只封装了CSS&#xff0c…