首页 > 其他分享 >Vite+Vue3 项目 华仔待办

Vite+Vue3 项目 华仔待办

时间:2024-08-26 11:04:30浏览次数:14  
标签:index tasks vue value 待办 import 华仔 Vite

此“华仔”,不是彼“华仔”,你懂的!

先来了个截图

紧跟着,实现步骤也来了

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

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

3. 修改 index.htmlmain.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 走?

标签:index,tasks,vue,value,待办,import,华仔,Vite
From: https://www.cnblogs.com/huajianketang/p/18380610

相关文章

  • JavaScript 构建一个简单的待办事项应用
    包含添加、删除、标记任务功能。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>TodoList&......
  • React 和 Vite 环境下 TailwindCSS 的配置指南
    1.安装tailwindcssnpminstall-Dtailwindcsspostcssautoprefixer2.生成tailwindcss配置文件npxtailwindinit-p3.tailwind.config.js配置/**@type{import('tailwindcss').Config}*/exportdefault{content:["./index.html",&q......
  • 为什么用Vite框架?来看它的核心组件案例详解
    Vite是一个前端构建工具,它以其快速的开发服务器和生产优化的打包器而闻名前端界,今天的内容,必须得唠唠Vite的关键能力,以下是Vite的核心组件分析,以及使用案例:原理分析:Vite利用了现代浏览器对ESModule语法的支持,在开发环境中不进行打包编译,而是通过启动本地devServer......
  • 挑选最佳待办事项工具:专家指南
    国内外主流的10款好用的待办事项软件对比:1.PingCode;2Worktile;3.微软ToDo;4.MeisterTask;5.Airtable;6.Wrike;7.Basecamp;8.ProofHub;;9.嘀嗒清单(TickTick);10.番茄ToDo。在管理日常任务时,挑选一款合适的待办事项软件可能是个挑战,尤其是市面上有如此多的选项。如何确保你选择的工具不仅......
  • 创建uni-app项目(vue3+ts+vite)
     npxdegitdcloudio/uni-preset-vue#vite-tsm-uni-demo1跳转到对应目录,装包,运行cdm-uni-demo1yarnyarndev:h5tsconfig.json:{"extends":"@vue/tsconfig/tsconfig.json","compilerOptions":{"ignoreDeprecations&quo......
  • 顶尖待办事项软件对比:找到你的最佳匹配
    国内外主流的10款待办事项管理软件对比:PingCode、WorktileTodoist、TickTick、Teambition、MicrosoftToDo、.Asana、Tower、番茄ToDo、飞书。在面对日益复杂的工作和个人任务时,找到一款能够有效帮助你管理日常待办事项的软件,变得越来越重要。无论是在提高个人生产力,还是在......
  • vue3---vite框架
    在使用VUE3的时候,可以使用vite脚手架:Vite的特点:1.快速的冷启动,不需要等待打包2.即时的热模块更新3.真正的按需编译,不用等待整个项目编译完成1、构建vite项目npminitvite@latest#初始化vite项目或者npmcreatevite@latest#创建vite项目选择Vue根据醒目需要选......
  • 如何从零编写一个vite插件 创建 vite 插件通用模板
    初始化mkdirvite-progress&&cdvite-progress&&pnpminit1.2安装typescriptpnpmitypescript@types/node-D1.3配置tsconfig.json{"compilerOptions":{"module":"ESNext","target":"esnext&quo......
  • lit tailwindcss vite模板
    pnpmcreatevite@latestmy-project----templatelitcdmy-projectpnpminstall-Dtailwindcsspostcssautoprefixersass-embeddednpxtailwindcssinit-ptailwindcss.config.js:/**@type{import('tailwindcss').Config}*/exportdefault{core......
  • 如何优化 Vite 项目中的 Lodash 引入:从 Tree Shaking 到自动化测试
    文章目录前言问题背景解决方案概述思路1:使用Lodash-ES替代Lodash思路2:使用Babel插件babel-plugin-lodash思路3:大规模替换后的验证与测试Babel的工作流程回顾最终选择及实践经验自动化测试:使用Puppeteer验证替换后的代码结论前言在现......