Falasool

Vue3 | ToDoList

Posted on Jun 21, 2023

实现功能

  • 展示任务的列表

    • 使用 v-for 在模板中循环渲染任务项组件，并根据任务的状态（完成或未完成）进行不同的展示样式

  • 新增 todo

    • v-model 实现输入框和数据的双向绑定

  • 修改 todo

  • 删除 todo

  • 全选/取消全选

  • 统计任务

  • 隐藏已完成 todo

  • 本地储存

进阶

  1. 編輯 List 順序
  2. 將完成的項目移至Finish區域，並且將字體改成刪除線效果
  3. 增加 Icon 以及開場動畫
  4. 設定日期與時間推播

项目安装

用 npm 和 vite 新建项目

npm init vite-app ToDoList

进入项目、安装依赖、启动

cd ToDoList
npm install
npm run dev

工程目录结构

.
├── index.html
├── node_modules # 项目依赖
├── package-lock.json
├── package.json # 存放依赖包管理及命令管理信息文件
├── public
│   └── favicon.ico
└── src # 存放vue文件
    ├── App.vue # 项目的root组件，用来引入其它模块
    ├── assets
    ├── components # 存放自定义的公共组件（=非路由组件）
    │   └── Helloworld.vue
    ├── index.css
    └── main.js # 入口文件，用于初始化vue实例

思路

  1. 先搭建好框架：写死数据看页面效果并调整

  2. 然后把代码拆分进三个组件：Header、List、Footer（标题和任务输入框、任务列表项、按钮选择项和计数）

  3. 写JS，并更换模板页面中的数据，用动态的数据代替。在setup()入口函数中写数据源和要实现功能的函数

实现步骤

HTML

这不是最终结构，后面有修改

image

CSS

安装和配置 TailwindCSS

在Vue的根目录下，安装 Tailwind 及其依赖项（PostCSS & auto-prefixer）

npm install -D tailwindcss postcss autoprefixer

生成配置文件并添加所有模板文件的路径

npx tailwindcss init -p

//tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建一个tailwind.css样式文件，用于初始化并引入tailwindcss的基础样式

复制代码/* /src/tailwindcss.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

导入css/tailwindcss.css到main.js

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
+ import "./tailwind.css"

createApp(App).mount('#app')

image