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

先来了个截图

紧跟着，实现步骤也来了

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. 在Linux驱动中使用timer定时器

    在Linux驱动中使用timer定时器 原文(有删改): https://www.cnblogs.com/chen-farsight/p/6226562.html 介绍 内核定时器是内核用来控制在未来 ...

  2. Linux 环境编程：errno的基本用法

    背景 error是一个包含在<errno.h>中的预定义的外部int变量,用于表示最近一个函数调用是否产生了错误.若为0,则无错误,其它值均表示一类错误. errno只在函数返回错误时才有 ...

  3. （sql语句试题练习及 参考答案解题思路+个人解题思路）

    SQL字段说明及数据 ======================================================================= 一.部门表字段描述:dp_no 部 ...

  4. MAPREDUCE中的序列化

    Java的序列化是一个重量级序列化框架(Serializable),一个对象被序列化后,会附带很多额外的信息(各种校验信息,header,继承体系....),不便于在网络中高效传输: 所以,hadoo ...

  5. Python数据分析方法与技巧

    背景介绍 数据分析是数据科学领域的核心技能之一,它涉及到数据的收集.清洗.处理.分析和可视化. 数据分析是指通过收集.清洗.处理.分析和可视化数据来发现隐藏的模式.趋势和关系的过程. 数据分析是数据科 ...

  6. python后端model模板

    from django.contrib.contenttypes.fields import GenericForeignKey, GenericRelation from django.contri ...

  7. Spring5.X bean自动装配Autowire属性

    属性注入 set方法.构造函数.POJO.list.map.ref,属于手工注入,点我直达 Spring自动注入 使用<bean>元素的autowire属性为一个bean定义指定自动装配模 ...

  8. PowerShell pnpm 报错

    Vue3> pnpm run dev pnpm : 无法加载文件 D:\program files\nodejs\node_global\pnpm.ps1.未对文件 D:\program fil ...

  9. MiniAuth 一个轻量 ASP.NET Core Identity Web 后台管理中间插件

    MiniAuth 一个轻量 ASP.NET Core Identity Web 后台管理中间插件 「一行代码」为「新.旧项目」 添加 Identity 系统跟用户.权限管理网页后台系统 开箱即用,避免 ...

  10. python os.path 模块详解

    python os.path 模块详解 os.path.basename() 返回最后一项,通常是文件名os.path.dirname() 返回的是目录,不包含文件名os.path.split() 返 ...