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

先来了个截图

紧跟着，实现步骤也来了

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. 为什么有些IP无法PING通但又能访问

    背景 在调试板子的网络,突然发现板子无法ping通开发机(出现request timed out,),而电脑却可以ping通板子. 而scp.ssh以及nfs等工具却可以正常使用. 原理 找了一些资料 ...

  2. 【Mysql】Mysql字符集CHARACTER和COLLATE

    一:设置服务器默认字符集为 utf8mb4 创建数据库时,如果没有指定字符集,会采用服务器的默认字符集.设置服务器默认字符集为 utf8mb4 可以提高便利性. 编辑 MySQL 的配置文件,修改服务 ...

  3. Top cluster 树分块

    写点基础的东西.随便写的,勿喷. top cluster 一个 cluster 是一个联通子图,且至多有两个点与其他部分连接 这两个点被称为 boundary node 其余点被称为 internal ...

  4. VUEX - 手稿

  5. 输入Javac提示不是内部或外部命令

    先去百度搜索"jdk下载"下载最新版jdk,并安装,安装目录不用去更改,直接默认就好,下载完了之后,双击打开安装,jdk安装完成后,会接着安装jre包,(jre和jdk是配对的,不 ...

  6. 可视化—gojs 超多超实用经验分享(二)

    想了想序号还是接上一篇分享的的序号接着写,如果在本文中没有获取需要的答案,可以移步去看看上一篇的分享.gojs 超多超实用经验分享(一) 目录 22. 指定线段连接到节点的某一个特定的接口上 23. ...

  7. [oeasy]python0070_动态类型_静态类型_编译_运行_匈牙利命名法

    动态类型_静态类型 回忆上次内容   上次了解了 帮助文档的 生成 开头的三引号注释 可以生成 帮助文档 文档 可以写成网页   python3 本身 也有 在线的帮助手册   目前的程序 提高了 可 ...

  8. 使用 Node.js 和 Express 构建基本的 Web API

    使用 Node.js 和 Express 构建 Web API Web API Node.js 中的 http 模块 创建 Express 框架 Web 应用程序 Express 框架 Express ...

  9. 番外篇： go语言写的简要数据同步工具

    go-etl工具 作为go-etl工具的作者,想要安利一下这个小巧的数据同步工具,它在同步百万级别的数据时表现极为优异,基本能在几分钟完成数据同步. 1.它能干什么的? go-etl是一个数据同步工具 ...

  10. Python 按分类样本数占比生成并随机获取样本数据

    按分类样本数占比生成并随机获取样本数据 By:授客 QQ:1033553122 开发环境 win 10 python 3.6.5 需求 已知样本分类,每种分类的样本占比数,及样本总数,需要随机获取这些 ...