```vue
<template>
<div class="box">
<div class="head">
<h2>待办事项</h2>
<input type="text" placeholder="请输入您的待办事项，按回车添加">
</div>
<div class="main">
<ul>
<li>
<div class="text">
<input type="checkbox">
<span>学习Vue.js前端框架</span>
</div>
<div class="删除"><input type="button" value="删除"></div>
</li>
</ul>
</div>
<div class="foot">
<div class="left">
<input type="button" value="总计：">
</div>
<div class="right">
<input type="button" value="全部">
<input type="button" value="未完成">
<input type="button" value="已完成">
</div>
</div>
</div>
</template>
<script setup>
</script>
<style>
*{
margin: 0px;
padding: 0px;
}
#app{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 500px;
height: 500px;
border: 1px solid black;
background-color: #ddd;
display: flex;
flex-direction: column;
}
.box > div{
border: 1px solid black;
}
.head{
height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.head > input[type=text]{
width: 97%;
padding-left: 5px;
border: transparent;
margin-top: 5px;
font-size: 12px;
height: 30px;
border-radius: 7px;
}
.main{
flex:1;
}
.foot{
height: 50px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li{
list-style: none;
width: 97%;
border-radius: 7px;
display: flex;
flex-direction: row;
/* 分开左右两边 */
justify-content: space-between;
height: 35px;
background-color: white;
margin: 8px;
line-height: 50px;
}
li > div{
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
}
span{
display: inline-flexbox;
padding-left: 5px;
}
input[type=button]{
border: transparent;
margin: 10px;
font-size: 15px;
}
</style>
```
跑项目
- **克隆/下载项目**
-
确保已安装Git。
-
打开终端：Win+R打开运行窗口，输入`cmd`回车。
-
执行克隆命令：
```bash
git clone https://gitee.com/myhfw003/grade23-fullstack-class2-todos-demo.git
```
- **进入项目目录，安装依赖，运行项目**
```bash
cd todos // 进入项目目录
yarn // 安装依赖
yarn format // 格式化组件代码
yarn dev // 在开发环境中运行项目
```
- **打包项目**
```bash
yarn build // 打包项目，打包好的文件在dist目录
yarn review // 预览打包后的项目
```