【端午节】用Vue3写粽子——从零开始
前言
在端午节即将到来之际,我们来一起写一个粽子组件来庆祝这个传统节日。
准备工作
首先,我们需要安装Vue3及其相关依赖,这里使用Vue CLI来创建项目。
# 安装Vue CLI
npm install -g @vue/cli
# 创建Vue3项目
vue create zongzi
接下来,我们需要安装一些必要的依赖。
# 安装Tailwind CSS
npm install tailwindcss
# 安装Vue Router
npm install vue-router
# 安装Vuex
npm install vuex
创建组件
在/src/components目录下创建一个Zongzi.vue文件,并编写以下代码。
<template><div class="zongzi-wrapper"><div class="zongzi"><div class="zongzi-top"></div><div class="zongzi-middle"></div><div class="zongzi-bottom"></div></div></div>
</template>
<script>
export default {name: 'Zongzi',
}
</script>
<style scoped>
.zongzi-wrapper {display: flex;justify-content: center;align-items: center;height: 100%;
}
.zongzi {position: relative;width: 100px;height: 150px;
}
.zongzi-top {position: absolute;top: 0;left: 0;right: 0;height: 40px;background-color: #9b4d19;transform: skewY(-30deg); /* 顶部斜面 */
}
.zongzi-middle {position: absolute;top: 40px;left: 0;right: 0;height: 70px;background-color: #d6ab73; /* 中间部分颜色 */
}
.zongzi-bottom {position: absolute;bottom: 0;left: 0;right: 0;height: 40px;background-color: #9b4d19;transform: skewY(30deg); /* 底部斜面 */
}
</style>
这段代码创建了一个名为Zongzi的Vue组件,它包含一个div元素和三个子div元素。子元素的样式使用CSS来实现,通过transform属性来实现斜面效果。
使用组件
在/src/App.vue文件中引入Zongzi组件,并在template中使用。
<template><div class="app"><Zongzi /></div>
</template>
<script>
import Zongzi from './components/Zongzi.vue';
export default {name: 'App',components: {Zongzi,}
}
</script>
<style>
.app {height: 100vh;background-color: #f5f5f5; /* 应用背景颜色 */
}
</style>
这段代码将Zongzi组件引入到App.vue文件中,然后在template中使用它。同时,定义了一个名为“app”的样式类,用于设置整个应用的背景颜色和高度。
配置Tailwind CSS
在根目录下创建tailwind.config.js文件,并编辑以下内容。
module.exports = {purge: [],darkMode: false, // or 'media' or 'class'theme: {extend: {},},variants: {extend: {},},plugins: [],
}
然后在/main.js文件中引入Tailwind CSS。
import './assets/css/index.css';
最后,创建/assets/css/index.css文件,并添加以下内容。
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* 自定义样式 */
结束语
通过以上步骤,我们成功地创建了一个Vue3粽子组件,并使用Tailwind CSS进行了样式配置。希望这篇博客能够对你有所帮助,祝大家端午节快乐!完整代码请参考:https://github.com/yourusername/zongzi。
相关文章:
【端午节】用Vue3写粽子——从零开始
前言 在端午节即将到来之际,我们来一起写一个粽子组件来庆祝这个传统节日。 准备工作 首先,我们需要安装Vue3及其相关依赖,这里使用Vue CLI来创建项目。 # 安装Vue CLI npm install -g vue/cli # 创建Vue3项目 vue create zongzi接下来&a…...
大象机器人人工智能套装2023版深度学习协作机器人、先进机器视觉与应用场景
引言: 介绍当前的版本 今天我们要介绍的是aikit2023,aikit2023是aikit的全新升级版。 AIkit 2023 是一套集视觉,定位抓取、自动分拣模块为一体的入门级人工智能套装。 该套装基于python平台,可通过开发软件实现机械臂的控制&am…...
Cesium Token申请
一、什么是Cesium ion? Cesium ion是一个提供瓦片图和3D地理空间数据的平台,支持把数据添加到用户自己的应用程序中。 二、为什么需要access token? 使用Cesium ion需要申请access token,当用户将数据添加到自己的账户后,便可以…...
ubuntu系统自带的Text Editor编辑器不高亮解决办法
平时在写launch文件时,我喜欢用ubuntu系统自带的text编辑器,但发现使用text打开launch 文件时,没有高亮功能了,如下图所示: 解决办法非常简单,因为launch和xml文件语法规则类似,只需将text编辑…...
Docker NGINX 加载Geoip模板
前提环境: Docker 环境 涉及参考文档: ngx_http_geoip_module 模块Loki NGINX Service MeshGeoIP IP库 一、下载GeoIP IP库 二、配置Nginx主配置文件 vim /data/nginx/MangoMoh/dos/nginx.confuser nginx; worker_processes auto;error_log /var…...
springboot基于协同过滤算法商品推荐系统
开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器&…...
基于机器学习算法:朴素贝叶斯和SVM 分类-垃圾邮件识别分类系统(含Python工程全源码)
目录 前言总体设计系统整体结构图系统流程图 运行环境Python 环境安装pytesseract注册百度云账号 模块实现1. 数据模块2. 模型构建3. 附加功能 系统测试1. 文字邮件测试准确率2. 网页测试结果 工程源代码下载其它资料下载 前言 本项目采用朴素贝叶斯和支持向量机(S…...
在Linux下将PNG和JPG批量互转的四种方法
计算机术语中,批处理指的是用一个非交互式的程序来执行一序列的任务的方法。这篇教程里,我们会使用 Linux 命令行工具,并提供 4 种简单的处理方式来把一些 .PNG 格式的图像批量转换成 .JPG 格式的,以及转换回来。 计算机术语中&a…...
Scala中使用 break 和 continue
Scala中没有 break 和 continue 关键字,但是我们可以用 Breaks 类提供的相应方法来实现对应功能。 在Java中,break continue return的区别 1、break:break不仅可以结束其所在的循环,还可结束其外层循环,但一次只能结束…...
【全栈开发指南】打包sentinel-dashboard镜像推送到Docker Hub镜像仓库
在使用sentinel-dashboard的时候,发现官方并没有把jar包发布到Docker Hub镜像仓库,所以,我们需要自己手动将需要版本的sentinel-dashboard.jar发布到Docker Hub镜像仓库。首先需要在Docker Hub镜像仓库网站 https://hub.docker.com/ 上注册账…...
【数据可视化】SVG(一)
一、邂逅SVG和初体验 什么是SVG SVG全称为(Scalable Vector Graphics),即可缩放矢量图形。(矢量定义:既有大小又有方向的量。在物理学中称作矢量,如一个带箭头线段:长度表示大小࿰…...
linux 系统errno 对应参考及代码
结论 linux下系统errno都有对应的说明描述,发生错误时获取errno即可知道具体问题描述 如下图 代码如下 golang版 package main import ("syscall""strings""fmt" ) func main() {for i : 0; i < 200; i {if !strings.HasPrefi…...
PowerShell快速ssh
文件 ~/.ssh/config 内容 Host masterHostName 192.168.10.154User root访问 $ ssh master 效果 进阶 免密的方式ssh 本地生成秘钥 ssh-keygen输入文件名称然后两次回车,完成后,在~/.ssh目录下会生成my_rsa和 my_rsa.pub两个文件 linux服务器上…...
从php5.6到golang1.19-文库App性能跃迁之路
作者 | 百度文库App 导读 本文深入浅出地分享了百度文库App服务端技术栈从PHP迁移至Go的实战经验,包含了技术选型、基础建设、流量迁移的具体方案,以及核心项目案例的重构实践。 全文6209字,预计阅读时间16分钟。 01 动机 长期以来ÿ…...
成功解决 AttributeError: ‘Field‘ object has no attribute ‘vocab‘
最近复现代码过程中,需要用到 torchtext.data 中的 Field 类。本篇博客记录使用过程中的问题及解决方式。 注意 torchtext 版本不宜过新 在较新版本的 torchtext.data 里面并没有 Field 方法,这一点需要注意。 启示:在复现别人代码时&#…...
ikbc键盘2.4G接收器丢失,重新对码
我的键盘:ikbc W200 1.键盘关掉重开; 2.新接收器插在电脑上; 3.电脑上打开软件,点开始对码,一会就连接上了。 对码软件放在这里: 我用夸克网盘分享了「IKBC 对码.rar」,点击链接即可保存。打开…...
STM32 Proteus仿真医用仓库环境控制系统紫外线消毒RS232上传CO2 -0066
STM32 Proteus仿真医用仓库环境控制系统紫外线消毒RS232上传CO2 -0066 Proteus仿真小实验: STM32 Proteus仿真医用仓库环境控制系统紫外线消毒RS232上传CO2 -0066 功能: 硬件组成:STM32F103R6单片机 LCD1602显示器DHT11温度湿度电位器模拟…...
Docker(二)之容器技术所涉及Linux内核关键技术
容器技术所涉及Linux内核关键技术 一、容器技术前世今生 1.1 1979年 — chroot 容器技术的概念可以追溯到1979年的UNIX chroot。它是一套“UNIX操作系统”系统,旨在将其root目录及其它子目录变更至文件系统内的新位置,且只接受特定进程的访问。这项功…...
计算机网络_ 1.3 网络核心 (数据交换_电路交换)
计算机网络_数据交换_电路交换 计算机网络_数据交换_电路交换 计算机网络_数据交换_电路交换 最典型电路交换网络:电话网络电路交换的三个阶段 建立连接(呼叫/电路建立)通信释放连接(拆除电路) 独占资源 电路交换网络…...
Kafka高性能集群部署与优化
Kafka高性能集群部署与优化 一、简介1. 基本概念2. Kafka生态系统 二、Kafka集群部署1. Kafka节点规划2. 集群环境准备3. 集群容错设计原则 三、Kafka高性能优化1. 硬件优化CPU优化内存优化磁盘IO优化 2. Kafka参数配置优化Broker配置Producer配置Consumer配置 3. 数据压缩和批…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...
