此“华仔”，不是彼“华仔”，你懂的！

先来了个截图

紧跟着，实现步骤也来了

1. 安装 Node.js，终端运行 npm create vue@latest，项目名 vue-to-do，后面的选项全选 No；

2. cd vue-to-do 进入项目目录，npm install 安装依赖，npm run dev 启动 Vite 开发服务器；

3. 修改 index.html 和 main.js；

index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <link rel="icon" href="/favicon.ico">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>华仔待办</title>

  </head>

  <body>

    <!-- 根组件容器 -->

    <div id="app"></div>

    <script type="module" src="/src/main.js"></script>

  </body>

</html>

src/main.js

import './assets/main.css'

import { createApp } from 'vue'

import App from './App.vue'

// 创建应用 传根组件

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

4. 修改 App.vue 根组件，添加 ToDoHead.vue ToDoBody.vue 两个子组件；

src/App.vue

<script setup>

import ToDoHead from './components/ToDoHead.vue';

import ToDoBody from './components/ToDoBody.vue';

</script>

<template>

  <ToDoHead />

  <ToDoBody />

</template>

<style scoped>

</style>

src/components/ToDoHead.vue

<script setup>

</script>

<template>

  <h1>华仔待办</h1>

</template>

<style scoped>

</style>

src/components/ToDoBody.vue

<script setup>

import { ref } from 'vue';

let tasks = ref([])  // ref 对象 任务列表 { name: '任务名', state: '状态' } active completed

let taskName = ref("")  // ref 对象 .value

// 添加任务

function addTask() {

  if (taskName.value.trim() === "") {

    return

  }

  tasks.value.push({

    name: taskName.value,

    state: 'active'

  })

  taskName.value = ""

}

// 完成任务

function completeTask(index) {

  tasks.value[index].state = 'completed'

}

// 删除任务

function deleteTask(index) {

  tasks.value.splice(index, 1)

}

// 删除所有

function deleteAll() {

  tasks.value.splice(0, tasks.value.length)

}

</script>

<template>

  <input type="text" placeholder="请输入任务" v-model="taskName" v-on:keyup.enter="addTask">

  <p v-if="tasks.length === 0">还没有任务，请添加。</p>

  <div>

    <p v-for="(task,index) in tasks" v-bind:class="task.state" v-on:click="completeTask(index)" v-on:dblclick="deleteTask(index)">{{ index+1 }}. {{ task.name }}</p>

  </div>

  <span class="stats">共 {{ tasks.length }} 个</span> <button v-on:click="deleteAll">清理</button>

</template>

<style scoped>

</style>

5. 修改 main.css 页面样式；

src/assets/main.css

.stats {

  color: #888;

}

.completed {

  color: #888;

  text-decoration: line-through;

}

What？You can't understand？

问时迟，那时快。这五个步骤突然化身为五枚金币，不慢不快地，躲进一个金光闪闪的“宝盒”里。大侠！还不快去 take 走？

Vite+Vue3 项目 华仔待办的更多相关文章

  1. vite vue3 规范化与Git Hooks

    在 <JS 模块化>系列开篇中,曾提到前端技术的发展不断融入很多后端思想,形成前端的"四个现代化":工程化.模块化.规范化.流程化.在该系列文章中已详细介绍了模块化的发 ...

  2. vite + ts 快速搭建 vue3 项目 以及介绍相关特性

    博客地址:https://ainyi.com/98 Vue3.0,One Piece 接下来得抽空好好学习了 vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vu ...

  3. 基于 vite 创建 vue3 全家桶项目（vite + vue3 + tsx + pinia）

    vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...

  4. vue3.0+vite+ts项目搭建--初始化项目(一)

    vite 初始化项目 使用npm npm init vite@latest 使用yarn yarn create vite 使用pnpm pnpx create-vite 根据提示输入项目名称,选择v ...

  5. 什么，你还使用 webpack？别人都在用 vite 搭建项目了

    一.vite 到底是干嘛的? vite 实际上就是一个面向现代浏览器,基于 ES module 实现了一个更轻快的项目构建打包工具. vite 是法语中轻快的意思. vite 的特点: 1.轻快的冷服 ...

  6. Vue3项目的简单搭建与项目结构的简单介绍

    Vue3项目的创建与运行 本文记录下自己近期学习的Vue3项目的创建,以及如何去运行一个Vue应用,同时包括对Vue项目结构进行一个简单的介绍. 一.node与npm的安装 通常平常进行开发的同学应该 ...

  7. 【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具

    前言 一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的 ...

  8. 手把手带你实现基于 Vite+Vue3 的在线Excel表格系统

    今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 2020年09月18日Vue.js 3.0发布, ...

  9. 如何开发一款基于 Vite+Vue3 的在线表格系统（上）

    今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 Vue是什么?大多前端开发者对这个词已毫不陌生了 ...

  10. 如何开发一款基于 vite+vue3 的在线表格系统（下）

    在上篇内容中我们为大家分享了详细介绍Vue3和Vite的相关内容.在本篇中我们将从项目实战出发带大家了解Vite+Vue3 的在线表格系统的构建. 使用Vite初始化Vue3项目 在这里需要注意:根据 ...

随机推荐

  1. Freertos学习：04-任务的调试函数

    --- title: rtos-freertos-04-任务的调试函数 EntryName: rtos-freertos-04-task-debug date: 2020-06-22 08:49:06 ...

  2. QT学习：03 信号与槽

    --- title: framework-cpp-qt-03-信号与槽 EntryName: framework-cpp-qt-03-signal-slot date: 2020-04-09 13:5 ...

  3. 3568F-麒麟KylinOS国产操作系统演示案例

  4. Spring MVC 中使用 RESTFul 编程风格

    1. Spring MVC 中使用 RESTFul 编程风格 @ 目录 1. Spring MVC 中使用 RESTFul 编程风格 2. RESTFul 编程风格 2.1 RESTFul 是什么 2 ...

  5. CF1860C 题解

    显然是一个博弈论题,考虑 dp. 定义状态 \(dp_i\) 表示先手走到 \(i\) 之后是否有必胜策略,不难发现以下几点: 若走到 \(i\) 之后无路可走,那么就必败. 若走到 \(i\) 之后 ...

  6. Luogu P2036 [COCI2008-2009 #2] PERKET

    今天我们来看一道题:Luogu P2036 [COCI2008-2009 #2] PERKET 这道题不难,典型的暴力枚举 由于食材数量随机,无法直接用循环解,但是可以使用递归 \(MY_{CODE: ...

  7. Sql Server 按日统计产量

    碰到一个这样的需求,需要查询每天的产量,直接 group 是可以分出不同天的产量,但是如果当天没有生产,就会少一条那一天的记录,而不是那一天显示产量为0,这样不方便前端显示曲线. 于是找到下面的办法, ...

  8. 使用GSAP制作动画视频

    GSAP 3Blue1Brown给我留下了深刻印象.利用动画制作视频,内容简洁,演示清晰.前两天刚好碰到一件事,我就顺便学习了一下怎么用代码做动画. 以javascrip为例,有两个动画引擎,GSAP ...

  9. 【楔子】单细胞测序-最佳的分析Pipeline

    作者:starlitnightly 日期:2023.07.14 !!! note 楔子 从事单细胞分析也有一段时间了,国内大部分中文教程都是使用R语言进行分析,使用Python的还比较少,或者是直译s ...

  10. MySQL原始密码登录出现错误

    1.首先查看自己的MySQL安装目录下有没有data文件夹,和bin目录是同级的.要是有就删除,然后执行下列操作.没有就直接执行操作: 2. 以管理员身份运行 cmd.遇到个同学,可能我强调的不够明显 ...