当前位置: 首页 > news >正文

【端午节】用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写粽子——从零开始

前言 在端午节即将到来之际&#xff0c;我们来一起写一个粽子组件来庆祝这个传统节日。 准备工作 首先&#xff0c;我们需要安装Vue3及其相关依赖&#xff0c;这里使用Vue CLI来创建项目。 # 安装Vue CLI npm install -g vue/cli # 创建Vue3项目 vue create zongzi接下来&a…...

大象机器人人工智能套装2023版深度学习协作机器人、先进机器视觉与应用场景

引言&#xff1a; 介绍当前的版本 今天我们要介绍的是aikit2023&#xff0c;aikit2023是aikit的全新升级版。 AIkit 2023 是一套集视觉&#xff0c;定位抓取、自动分拣模块为一体的入门级人工智能套装。 该套装基于python平台&#xff0c;可通过开发软件实现机械臂的控制&am…...

Cesium Token申请

一、什么是Cesium ion&#xff1f; Cesium ion是一个提供瓦片图和3D地理空间数据的平台&#xff0c;支持把数据添加到用户自己的应用程序中。 二、为什么需要access token&#xff1f; 使用Cesium ion需要申请access token,当用户将数据添加到自己的账户后&#xff0c;便可以…...

ubuntu系统自带的Text Editor编辑器不高亮解决办法

平时在写launch文件时&#xff0c;我喜欢用ubuntu系统自带的text编辑器&#xff0c;但发现使用text打开launch 文件时&#xff0c;没有高亮功能了&#xff0c;如下图所示&#xff1a; 解决办法非常简单&#xff0c;因为launch和xml文件语法规则类似&#xff0c;只需将text编辑…...

Docker NGINX 加载Geoip模板

前提环境&#xff1a; Docker 环境 涉及参考文档&#xff1a; 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基于协同过滤算法商品推荐系统

开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏览器&…...

基于机器学习算法:朴素贝叶斯和SVM 分类-垃圾邮件识别分类系统(含Python工程全源码)

目录 前言总体设计系统整体结构图系统流程图 运行环境Python 环境安装pytesseract注册百度云账号 模块实现1. 数据模块2. 模型构建3. 附加功能 系统测试1. 文字邮件测试准确率2. 网页测试结果 工程源代码下载其它资料下载 前言 本项目采用朴素贝叶斯和支持向量机&#xff08;S…...

在Linux下将PNG和JPG批量互转的四种方法

计算机术语中&#xff0c;批处理指的是用一个非交互式的程序来执行一序列的任务的方法。这篇教程里&#xff0c;我们会使用 Linux 命令行工具&#xff0c;并提供 4 种简单的处理方式来把一些 .PNG 格式的图像批量转换成 .JPG 格式的&#xff0c;以及转换回来。 计算机术语中&a…...

Scala中使用 break 和 continue

Scala中没有 break 和 continue 关键字&#xff0c;但是我们可以用 Breaks 类提供的相应方法来实现对应功能。 在Java中&#xff0c;break continue return的区别 1、break&#xff1a;break不仅可以结束其所在的循环&#xff0c;还可结束其外层循环&#xff0c;但一次只能结束…...

【全栈开发指南】打包sentinel-dashboard镜像推送到Docker Hub镜像仓库

在使用sentinel-dashboard的时候&#xff0c;发现官方并没有把jar包发布到Docker Hub镜像仓库&#xff0c;所以&#xff0c;我们需要自己手动将需要版本的sentinel-dashboard.jar发布到Docker Hub镜像仓库。首先需要在Docker Hub镜像仓库网站 https://hub.docker.com/ 上注册账…...

【数据可视化】SVG(一)

一、邂逅SVG和初体验 什么是SVG  SVG全称为&#xff08;Scalable Vector Graphics&#xff09;&#xff0c;即可缩放矢量图形。&#xff08;矢量定义&#xff1a;既有大小又有方向的量。在物理学中称作矢量&#xff0c;如一个带箭头线段&#xff1a;长度表示大小&#xff0…...

linux 系统errno 对应参考及代码

结论 linux下系统errno都有对应的说明描述&#xff0c;发生错误时获取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输入文件名称然后两次回车&#xff0c;完成后&#xff0c;在~/.ssh目录下会生成my_rsa和 my_rsa.pub两个文件 linux服务器上…...

从php5.6到golang1.19-文库App性能跃迁之路

作者 | 百度文库App 导读 本文深入浅出地分享了百度文库App服务端技术栈从PHP迁移至Go的实战经验&#xff0c;包含了技术选型、基础建设、流量迁移的具体方案&#xff0c;以及核心项目案例的重构实践。 全文6209字&#xff0c;预计阅读时间16分钟。 01 动机 长期以来&#xff…...

成功解决 AttributeError: ‘Field‘ object has no attribute ‘vocab‘

最近复现代码过程中&#xff0c;需要用到 torchtext.data 中的 Field 类。本篇博客记录使用过程中的问题及解决方式。 注意 torchtext 版本不宜过新 在较新版本的 torchtext.data 里面并没有 Field 方法&#xff0c;这一点需要注意。 启示&#xff1a;在复现别人代码时&#…...

ikbc键盘2.4G接收器丢失,重新对码

我的键盘&#xff1a;ikbc W200 1.键盘关掉重开&#xff1b; 2.新接收器插在电脑上&#xff1b; 3.电脑上打开软件&#xff0c;点开始对码&#xff0c;一会就连接上了。 对码软件放在这里&#xff1a; 我用夸克网盘分享了「IKBC 对码.rar」&#xff0c;点击链接即可保存。打开…...

STM32 Proteus仿真医用仓库环境控制系统紫外线消毒RS232上传CO2 -0066

STM32 Proteus仿真医用仓库环境控制系统紫外线消毒RS232上传CO2 -0066 Proteus仿真小实验&#xff1a; STM32 Proteus仿真医用仓库环境控制系统紫外线消毒RS232上传CO2 -0066 功能&#xff1a; 硬件组成&#xff1a;STM32F103R6单片机 LCD1602显示器DHT11温度湿度电位器模拟…...

Docker(二)之容器技术所涉及Linux内核关键技术

容器技术所涉及Linux内核关键技术 一、容器技术前世今生 1.1 1979年 — chroot 容器技术的概念可以追溯到1979年的UNIX chroot。它是一套“UNIX操作系统”系统&#xff0c;旨在将其root目录及其它子目录变更至文件系统内的新位置&#xff0c;且只接受特定进程的访问。这项功…...

计算机网络_ 1.3 网络核心 (数据交换_电路交换)

计算机网络_数据交换_电路交换 计算机网络_数据交换_电路交换 计算机网络_数据交换_电路交换 最典型电路交换网络&#xff1a;电话网络电路交换的三个阶段 建立连接&#xff08;呼叫/电路建立&#xff09;通信释放连接&#xff08;拆除电路&#xff09; 独占资源 电路交换网络…...

Kafka高性能集群部署与优化

Kafka高性能集群部署与优化 一、简介1. 基本概念2. Kafka生态系统 二、Kafka集群部署1. Kafka节点规划2. 集群环境准备3. 集群容错设计原则 三、Kafka高性能优化1. 硬件优化CPU优化内存优化磁盘IO优化 2. Kafka参数配置优化Broker配置Producer配置Consumer配置 3. 数据压缩和批…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...