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

先来了个截图

紧跟着，实现步骤也来了

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. get基于报错的sql注入

    get基于报错的sql注入发现 Less1: sqli-labs第一关提示说在网页上输入id,也就是?id=1. 但这个?是什么意思,它表示index.php?也就是默认页面.然后?id=1就是把id ...

  2. 哇塞，实测780MB/s！基于RK3568J与FPGA的PCIe通信案例详解

    ARM + FPGA架构有何种优势 近年来,随着中国新基建.中国制造2025的持续推进,单ARM处理器越来越难满足工业现场的功能要求,特别是能源电力.工业控制.智慧医疗等行业通常需要ARM + FPG ...

  3. win10 搭建 npm 环境

    前言 最近,根据CSDN和博客园等文章的帮助下,搭建了一个npm的环境,现在将搭建过程记录下来,留作参考. 搭建过程 下载nodejs,我是使用的zip包安装的,安装包官网地址https://node ...

  4. SpringBoot如何解决跨域问题

    什么是跨域 跨域问题的本质是浏览器为了保证用户的一种安全拦截机制,它的初衷是为了保证用户的安全,防止恶意网站窃取数据. 跨域三种情况 在发起请求时,如果出现了以下情况中的任意一种,那么它就是跨域请求: ...

  5. 虚拟 DOM 的优缺点？

    什么是虚拟dom用js模拟一颗dom树,放在浏览器内存中.当你要变更时,虚拟dom使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中, 反应到实际的dom树,减少了dom操作. 虚拟DOM ...

  6. [oeasy]python0141_自制模块_module_reusability_复用性

    自制包内容 回忆上次内容 上次导入了外部的py文件 import my_module 导入一个自己定义的模块   可以使用my_module中的变量 不能 直接使用 my_module.py文件中的变 ...

  7. Kafka kafka在windows下的安装与配置

    kafka在windows下的安装与配置   By: 授客 QQ:1033553122     1．测试环境.............................................. ...

  8. 硬件开发笔记（二十八）：TPS54331电源设计（一）：5V电源供电原理图设计

    前言   电源供电电路设计很重要,为了更好的给对硬件设计有需求的人,特意将电源设计的基础过程描述出来.  本篇描述设计常用的12V转5V电路3A.   TPS54331(DC-DC稳压器) 概述    ...

  9. JWT浅了解

    JWT通过数字签名的方式(让我想起了软考),以json对象为载体,在不同的服务终端之间安全传输信息 是一种授权认证 生成token的原理:通过header的加密方式,对payload进行加密.然后把h ...

  10. 一键导入抓包数据生成HTTP请求

    Jmeter一键导入抓包数据生成HTTP请求.路径:工具->Import from cURL 在弹框里粘贴cURL,点击"Create Test Plan"会自动生成HTTP ...