【端午节】用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。