[Vue3实操] 开发Todo List

前言

使用Vue3最新的Composition API，开发一个Todo List应用。

Todo List应用比较简单，不会使用其他复杂的Vue3组件，但这也使得当前应用与真实的应用脱钩，所以本文重点是体会Vue3的最新语法，下篇文章会阅读element-plus-admin开源项目的源码，从而掌握Vue3目前最近技术栈的使用方式。

所谓Todo List应用主要用于记录你需要完成的工作，完成后，将其打钩，最终效果如下：

写点HTML+CSS吧

先用yarn基于vite构建出vue-ts的项目目录，命令如下。

yarn create vite TodoList --template vue-ts
yarn && yarn dev

在开始编码前，最好弄一下原型稿，我个人为求方便，通常使用PPT来构建原型稿，专业的前端可能会使用专门的原型设计软件，与后端开发前写功能设计一个道理，前端开发前，弄好原型稿，从而从整体把握开发出网页的样式、配色以及可能需要需要的组件。

在弄原型稿时，要刻意关注页面由那几部分组成，一个复杂的业务，拆分到最后，很发现都是一个简单的HTML元素的组合使用，此外，原型稿对CSS编写也很有帮助，复杂的样式效果，拆分到最后也是一些简单的CSS属性。

首先，我们基于原型稿，通过HTML搭建类似的结构，直接全部写到App.vue的template中，代码如下：

<div class="main">
<div class="container">
    <h1>欢迎使用Todo List</h1>
    <div class="add-todo">
      <input type="text" name="todo" />
      <button>
        <!-- 按钮上的加号元素 -->
        <i class="add-icon"></i>
      </button>
    </div>

    <div class="filters">
      <span class="filter active">全部</span>
      <span class="filter">已完成</span>
      <span class="filter">未完成</span>
    </div>

    <div class="todo-list">
      <div class="todo-item">
        <!-- 使用label包裹input与span，后续用户无论点击input还是span，都会触发checkbox事件，从而实现勾选了input的效果 -->
        <label>
          <input type="checkbox" />
          写开发Todo List的文章
          <span class="check-button"></span>
        </label>
      </div>
      <div class="todo-item">
        <label>
          <input type="checkbox" />
          写开发Todo List的文章
          <span class="check-button"></span>
        </label>
      </div>
      <div class="todo-item">
        <label>
          <input type="checkbox" />
          写开发Todo List的文章
          <span class="check-button"></span>
        </label>
      </div>
    </div>
  </div>
</div>

运行项目，会得到如下效果这个阶段，不需要考虑HTML元素的样式，只需要将原型图里的组件一步步通过HTML搭建出来就好了，然后再写CSS去美化它。

CSS对很多后端同学来说，是难啃的骨头，其原因在于CSS属性多，而且就算记住了这些属性，也不知道如何配合使用，从而构建出美丽的样式。

我对CSS的思考是，要掌握CSS中比较核心的内容，比如CSS的布局与位置相关的内容，然后多看一些项目，去掌握感觉，当然最重要的是，你要先画原型图，在脑海中，比较清晰的知道自己需要的样子，然后再利用CSS属性一点点组合并配合Chrome的可见可得的特性，一点点组合出来，后续我也会写一篇文章记录我认为比较重要的CSS属性。

回到本文，Todo List的CSS样式如下：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
}

/* 整个页面 */
.main {
  width: 100vw;
  min-height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  background: rgb(216, 243, 214);
}

.container {
  width: 60%;
  max-width: 400px;
  box-shadow: 0px 0px 24px rgba(26, 25, 25, 0.15);
  border-rad