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

先来了个截图

紧跟着，实现步骤也来了

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. 超大容量 | 瑞芯微RK3588J工业核心板新增16GB DDR + 128GB eMMC配置！

    作为瑞芯微的金牌合作伙伴,创龙科技在2023年9月即推出搭载瑞芯微旗舰级处理器RK3588J的全国产工业核心板--SOM-TL3588. SOM-TL3588工业核心板是基于瑞芯微RK3588J/RK ...

  2. Excel插件之连接数据数据库秒数处理，办公轻松化

    接上文,对excel连接数据库需求的进一步优化: Excel 更改数据同步更新到Mysql数据库 1.通过mysql for excel 插件的思路,了解到一个新的插件 sqlcel,通过这个插件ex ...

  3. 一个难忘的json反序列化问题

    前言 最近我在做知识星球中的商品秒杀系统,昨天遇到了一个诡异的json反序列化问题,感觉挺有意思的,现在拿出来跟大家一起分享一下,希望对你会有所帮助. 案发现场 我最近在做知识星球中的商品秒杀系统,写 ...

  4. 日常工作中需要避免的9个React坏习惯

    前言 React是前端开发领域中最受欢迎的JavaScript库之一,但有时候在编写React应用程序时,可能陷入一些不佳的习惯和错误做法.这些不佳的习惯可能导致性能下降.代码难以维护,以及其他问题. ...

  5. tp5命名规范

    tp5中对类,文件名,函数和方法的命名规范如下: 类名和类文件名保持一致,并统一采用驼峰法命名(首字母大写) 类的命名采用驼峰法,并且首字母大写,例如 User.UserType,不需要添加contr ...

  6. tp5生命周期

    https://www.kancloud.cn/manual/thinkphp5/118011 1.入口文件 用户发起的请求都会经过应用的入口文件,通常是 public/index.php文件.当然, ...

  7. 基于Java“花鸣”B2C电子商务平台设计实现(源码+lw+部署文档+讲解等)

    \n文末获取源码联系 感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询 系统介绍: 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件 ...

  8. 常见的SQL数值型数据处理函数

    在数据驱动的时代,SQL 已成为数据分析和管理中不可或缺的工具.无论是处理简单的查询还是复杂的数据分析,SQL 都能帮助我们高效地完成任务. 然而,在处理数值型数据时,你是否感到过困惑,不知道如何运用 ...

  9. JMeter While循环控制器应用之遍历获取文件参数

    While循环控制器应用之遍历获取文件参数 by: 授客 QQ:1033553122 测试环境 JMeter-5.4.1 应用 实现单线程在单次迭代内遍历获取文件参数 说明:上图仅给出关键配置信息 注 ...

  10. 第十二节 JMeter基础-中级地址信息【IF控制器】

    声明:本文所记录的仅本次操作学习到的知识点,其中商城IP错误,请自行更改. 背景:提交订单前,我们需要核对一些信息,比如商品信息,收货地址,支付方式等.现在核对一下收货地址信息. 思路: 1.前提条件 ...