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