【端午节】用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. 数据压缩和批…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入,一个是通过INMP441麦克风模块采集音频,一个是通过PCM5102A模块播放音频,那如果我们将两者结合起来,将麦克风采集到的音频通过PCM5102A播放,是不是就可以做一个扩音器了呢…...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】,分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
