vite+vue3+ts简单例子todolist

置顶 已于 2022-03-01 20:29:22 修改
阅读量4.8k 收藏 10
点赞数 5
分类专栏： Vue3 文章标签： vite+vue3练习 vue3 todoList vue3简单使用 vite+vue3+ts项目 vite+vue3+antd
于 2022-03-01 20:28:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jason_renyu/article/details/123211625
版权

vue3发布以来备受瞩目，与之起来的vite都是倍感神秘，在这里我们用一个todolist的小例子，来揭秘vue3+vite的面纱。
本文是在《Vite + Vue3 初体验 —— Vue3 篇》的启发下写的，由于原文的代码和过程有一些需要注意的坑点，在这里我们会把步骤详细的整理以及简单的优化。

创建项目

使用vite创建

npm init vite@latest

输入项目名 如 vue-todolist
在这里插入图片描述
vite可以构建多种框架的项目，这里选用vue
在这里插入图片描述
选用vue-ts的组合，如果你对ts还不熟，需要抓紧时间上车了
在这里插入图片描述

这样项目就创建好了，剩下就是装依赖和运行项目了
在这里插入图片描述

开始编写 todolist

为了项目开起来稍微美观一点，这里使用ant-design-vue的UI框架，另外框架的组件按需引入还需要使用（unplugin-vue-components）。
在项目里边安装：

// 按需引入插件
npm install unplugin-vue-components -D
// UI框架
npm install ant-design-vue@next --save

**这里可以用npm也可以用yarn，根据个人情况使用，本文全部使用npm方式

配置按需引入

上边安装了按需引入的插件，还需要进行配置，在vite.config.js中配置
在这里插入图片描述

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from "unplugin-vue-components/vite"
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        AntDesignVueResolver()
      ]
    })
  ]
})

然后在main.ts中引入ant-design-vue的样式
在这里插入图片描述

基本结构

在components中创建TodoList.vue文件，并引入App.vue中，在TodoList.vue中编写基本todolist的结构：
TodoList.vue

<template>
  <div class="todo-list-container" >
    <div class="todo-wrapper" >
      <input class="todo-input" placeholder="请输入待办项" />
      <ul class="todo-list" >
        <li class="todo-item" >
          <span>Todo Items</span>
          <div class="operator-list" >
            <DeleteOutlined />
            <CheckOutlined />
            <ToTopOutlined />
          </div>
        </li>
        <li class="todo-item" >
          <span>Todo Items</span>
          <div class="operator-list" >
            <DeleteOutlined />
            <CheckOutlined />
            <ToTopOutlined />
          </div>
        </li>
        <li class="todo-item todo-completed" >
          <span>Todo Items</span>
          <div class="operator-list" >
            <CheckCircleFilled />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
// Input组件
import {Input} from 'ant-design-vue';
// 图标组件 
import { DeleteOutlined, CheckOutlined, CheckCircleFilled, ToTopOutlined } from "@ant-design/icons-vue";
</script>

<style scoped lang="less">
*{
  padding: 0;
  margin: 0;
}
.todo-list-container {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding-top: 100px;
  background: linear-gradient(rgba(93, 190, 129, 0.02), rgba(125, 185, 222, 0.02));
  display: flex;
  justify-content: center;
  .todo-wrapper {
    width: 60vw;
    .todo-input {
      width: 100%;
      height: 50px;
      border: 2px solid rgba(255, 177, 27, 0.5);
      border-radius: 5px;
      padding-left: 10px;
      font-size: 18px;
      color: #f05e1c;
      &::placeholder {
        color: #f05e1c;
        opacity: 0.4;
      }
      &:hover, &:focus {
        border-color: #ffb11b;
        box-shadow: 0 0 0 2px rgba(255, 177, 27, 0.2);
        outline: none;
      }
    }
    .todo-list {
      margin-top: 20px;
      list-style: none;
      .todo-item {
        margin-bottom: 10px;
        padding: 15px 10px;
        box-sizing: border-box;
        border-bottom: 2px solid rgba(255, 177, 27, 0.3);
        border-radius: 5px;
        font-size: 16px;
        color: #f05e1c;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all .5s;
        &:hover {
          box-shadow: 0 0 5px 8px rgba(255, 177, 27, 0.2);
          border-bottom: 2px solid transparent;
        }
        // 完成列表样式
        &.todo-completed {
          color: rgba(199,199,199,1);
          border-bottom-color: rgba(199,199,199,0.4);
          &:hover {
            box-shadow: none;
            border-bottom-color: rgba(199,199,199,0.4);
          }
        }
        // 置顶列表样式
        &.todo-top {
          box-shadow: none;
          background-color: #f05e1c;
          color: #fff;
        }

        // 操作列表
        .operator-list {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          &:first-child {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>

这里使用了less，vite搭建这套脚手架中，已经配置了less/sass，只需要安装即可：

npm install -D less less-loader

然后运行项目：
在这里插入图片描述

会得到上边的结构，如果你的有差异，不要慌张耐心查看自己的问题以及代码是否和文中一致，如果实在解决不了可以留言，也可以加博主微信文末有介绍。

然后就是逻辑部分的代码

先上完整的TodoList.vue组件代码

<template>
  <div class="todo-list-container" >
    <div class="todo-wrapper" >
      <input 
        class="todo-input" 
        placeholder="请输入待办项" 
        v-model="todoText"
        @keydown.enter="addTodoList"
      />
      <ul class="todo-list" >
        <li 
          v-for="(item, index) in todoList"
          class="todo-item" 
          :class="{'todo-completed': item.is_completed, 'todo-top': item.is_top}"
        >
          <span>{{item.title}}</span>
          <div class="operator-list" >
            <CheckCircleFilled v-if="item.is_completed"/>
            <ToTopOutlined v-if="!item.is_completed" @click="topTodoList(index)" />
            <DeleteOutlined v-if="!item.is_completed" @click="deleteTodoList(index)" />
            <CheckOutlined v-if="!item.is_completed" @click="completedTodoList(index)" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
// Input组件
import {Input} from 'ant-design-vue';
// 图标组件 
import { DeleteOutlined, CheckOutlined, CheckCircleFilled, ToTopOutlined } from "@ant-design/icons-vue";
import { ref } from 'vue'

// 声明存储数据数组
// let todoList = ref<{
//   title: string,
//   is_completed: Boolean,
//   is_top: Boolean
// }[]>([]);
// 上边采用了ts泛型结合的写法，也可以将类型分开
interface TodoType {
  title: string,
  is_completed: boolean,
  is_top: boolean
};
let todoList = ref<TodoType[]>([]);
// 这里声明一个对数组进行排序的方法，在增删改查后对list进行排序
const todoListSort = (list: TodoType[]):TodoType[] => {
  // 置顶的列表
  let topList:TodoType[] = [];
  // 完成的列表
  let completedList:TodoType[] = [];
  // 其他列表
  let otherList:TodoType[] = [];
  list.forEach(item => {
    if(item.is_top){
      topList.push(item);
    }else{
      if(item.is_completed){
        completedList.push(item);
      }else{
        otherList.push(item);
      }
    }
  });
  return [...topList, ...otherList, ...completedList];
}

// 创建一个变量，用于输入框的绑定
const todoText = ref('');
// 这里ref看似没有使用泛型，实际上是省略了，上边的等于
// const todoText = ref<string>('');

// 然后是增加list
const addTodoList = () => {
  // 如果input内容为空则不继续执行
  if(!todoText.value) return;
  // 将input的内容添加到todoList
  todoList.value.unshift({
    title: todoText.value,
    is_completed: false,
    is_top: false
  });
  // 添加完成后，清空todoText的值
  todoText.value = '';
  // 插入后排序
  todoList.value = todoListSort(todoList.value);
}

// 删除List
const deleteTodoList = (index:number) => {
  todoList.value.splice(index, 1);
}

// 完成List
const completedTodoList = (index:number) => {
  todoList.value[index].is_completed = true;
  // 修改后排序，将完成的放后边
  todoList.value = todoListSort(todoList.value);
}

// 置顶列表list
const topTodoList = (index:number) => {
  todoList.value[index].is_top = true;
  // 置顶后排序，将完成的放前边
  todoList.value = todoListSort(todoList.value);
}


</script>

<style scoped lang="less">
*{
  padding: 0;
  margin: 0;
}
.todo-list-container {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding-top: 100px;
  background: linear-gradient(rgba(93, 190, 129, 0.02), rgba(125, 185, 222, 0.02));
  display: flex;
  justify-content: center;
  .todo-wrapper {
    width: 60vw;
    .todo-input {
      width: 100%;
      height: 50px;
      border: 2px solid rgba(255, 177, 27, 0.5);
      border-radius: 5px;
      padding-left: 10px;
      font-size: 18px;
      color: #f05e1c;
      &::placeholder {
        color: #f05e1c;
        opacity: 0.4;
      }
      &:hover, &:focus {
        border-color: #ffb11b;
        box-shadow: 0 0 0 2px rgba(255, 177, 27, 0.2);
        outline: none;
      }
    }
    .todo-list {
      margin-top: 20px;
      list-style: none;
      .todo-item {
        margin-bottom: 10px;
        padding: 15px 10px;
        box-sizing: border-box;
        border-bottom: 2px solid rgba(255, 177, 27, 0.3);
        border-radius: 5px;
        font-size: 16px;
        color: #f05e1c;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all .5s;
        &:hover {
          box-shadow: 0 0 5px 8px rgba(255, 177, 27, 0.2);
          border-bottom: 2px solid transparent;
        }
        // 完成列表样式
        &.todo-completed {
          color: rgba(199,199,199,1);
          border-bottom-color: rgba(199,199,199,0.4);
          &:hover {
            box-shadow: none;
            border-bottom-color: rgba(199,199,199,0.4);
          }
        }
        // 置顶列表样式
        &.todo-top {
          box-shadow: none;
          background-color: #f05e1c;
          color: #fff;
        }

        // 操作列表
        .operator-list {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          &:first-child {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>

上边就是完整的代码，增加、完成和置顶使用排序，这里是练习时候为了达到一定的效果编写的，实际应用中要在增加和设置的地方单个操作更好，不然每次都给整个数据排序效率太低。
以上完成后如下图
在这里插入图片描述

以上就是本文全部内容，如对你有帮助欢迎点赞留言
如有疑问可以留言，也可以到QQ群一起探讨：
QQ群1: 657011407， QQ群2: 492593055，也可以到微信找我 shenzhipeng1023

shenzhipeng1023
关注
专栏目录
Vite2 + Vue3 + Typescript 入门级教程
人生代码 ---- 公众号
03-14 2373
Vite2 + Vue3 + Typescript 入门级教程 资源代码可以在这里下载 https://download.csdn.net/download/qq_36772866/15791490 新建项目 创建项目目录 todoList 我们来到 Vite2 的官网，网址如下： https://vitejs.dev/guide/#scaffolding-your-first-vite-project Vite2 内置了很多中模板： vanilla vue vue-ts react react-ts p
使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件
都随它大小便吧
02-28 2789
记录一下使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件。
vue3+ts入门（todolist案例）
02-10
vue3+ts入门（todolist案例）
vue3+ts实现todolist功能
DOM曼珠沙华的博客
08-31 3254
先看一下实现效果： 可以看到内部实现的内容有enter输入，单项删除，全选，以及删除选中项等功能 具体在实现前需要常见有ts的vue3项目 项目创建 具体项目创建 就是 vue create 项目名称 在创建后，选择的时候有vue2和vue3的选择，第三项是自定义，在自定义时需要选中ts(选择的键分别是向下键和空格键) 在创建项目之后，先运行，查看是否可运行 TodoList实现 目录结构： 运行文件：App.vue 组件：components下的文件 ...
[vue3]vue3+typescript上手案例：实现todoList
SCUhzs
01-26 2482
前言 todoList是常见的手撸代码题了。通过vue3的composition api实现todoList，掌握setup、ref、reactive、watch、toRefs、toRef等钩子函数，快速上手vue3+ts技术栈。建议有vue2基础的边看官方文档边做，以便快速熟悉相关hook，最后的实现效果图如下： 下面直接上代码。 Index页面 App.vue <template> <div class="todo-container"> <h1>Tod
vue3+ts部分场景示例
Debug的博客
11-22 1495
【代码】vue3+ts部分场景示例。
vue3+ts+案例
小管管的博客
07-18 2178
组合式 API 征求意见稿 | Vue 组合式 API在线笔记vue3基础Vue3基础综合案例vue3+ts基础知道：什么是字面量类型js 字面量如：18 ‘jack’ [‘a’] {age: 10} 等等。使用 js字面量 作为变量类型，这种类型就是字面量类型。// : 'jack' 是字面量类型 let name : 'jack' = 'jack';// : 18 是字面量类型 let age : 18 = 18;// 报错：不能将类型“19”分配给类型“18” age = 19;
vue3+ts+vite todoList小案例
04-09
在本项目中，我们探索的是一个基于Vue3、TypeScript和Vite构建的简单`todoList`应用。这个小案例展示了现代前端开发的一些关键技术和工具的整合，它们为高效开发提供了强大支持。以下是对每个核心组件的详细说明： ...
Vite + Vue3 初体验 —— Vue3 篇
qq_34621851的博客
01-27 1635
在上一篇 Vite + Vue3 初体验 —— Vite 篇 博客中，我感受到了 Vite 带来的运行时效率提升，这一期再来感受感受 Vue3 带来的新变化 —— 关注点分离。 Todo List 设计 这次体验 Vue3，我想做一个能体验（部分） Vue3 新特性的功能模块。 想了想，用一个 Todo List 应该是比较合适的。 我们来规划一下它的功能清单吧。 输入 Todo，按下回车即可添加一条新的 Todo Item。 以列表的形式显示所有的 Todo Item。 可以将 Todo Item 标记
首个 Vue3.x教程_Vue3.x+Ts+Vuex+Antd Ui框架入门进阶视频教程(34讲)-大地老师
01-30
Vue3.x环境搭建、Vue/cli脚手架使用、Vite脚手架使用、Vue目录结构 核心文件分析、Vue模板语法、Vue事件、Vue表单、Vue双休数据绑定、Vue Dom操作以、JavaScript表达式 、条件判断、 计算属性、watch侦听器、Vue3...
大地老师深度解析：Vue3.x+Ts+Vuex+Antd全栈实战教程
6. **双向数据绑定**：通过实际例子展示Vue3.x的响应式系统，让学员理解数据是如何实时同步的，提高开发效率。 7. **DOM操作与计算属性**：涉及Vue的DOM操作方法，以及如何使用计算属性来简化复杂的逻辑计算。 8. ...
记录一下用vue3结合ts实现todolist的详细过程，非常适合用ts结合vue快速实战上手项目
edison4499的博客
10-31 1248
(宁渡课堂)记录快速用ts结合vue进行实战的详细过程
vue3+ts实战
最新发布
qq_44930306的博客
05-17 3529
/(vue下面有红色波浪线)注意：如果下载成功，可以在项目的package.json文件里看到对应的版本号。在src包下创建http/api文件夹，并在文件夹下创建http.ts文件;在src包下创建router文件夹，并在文件夹下创建index.ts文件;(1)、router下的index.ts代码。
简单易上手的vue3.0+ts实战小项目！！附带后台接口
热门推荐
qq_44812835的博客
01-26 1万+
1.前言 一直想体验一下vue3的开发使用，但是一直在推脱，正好最近也在学习Ts那不如直接做个小项目好了，在找项目的时候发现有的项目都比较大，但是一个经典todoList有闲的太单调。???? 拿起手机突然看到我小米手机中的原生便签应用，看起来还不错，于是就有了下面这个小demo。还在犹豫没有上手项目的同学赶快动起来吧！???? github地址：https://github.com/1034637588/ToDoList 2.项目演示 通过增、删、改、查的顺序进行一下简单的演示✋ 3.项目介绍 其实就是
Vue3(ts)写todolist
m0_48799309的博客
08-12 332
2.List中用defineprops接收到数据，循环item组件，并把每条数据传给item，由 item进行展示。1.在list中给接收到的数据进行类型约束，放在本文件中就会报错，放在别的文件中 进行引入就不会有问题。②第二个功能可以使用自定义事件，App中给Footer创建自定义事件，接收一个done值参 数，遍历数据全修改为传过来的done值。
vue3+ts小案例：代办事项
ScumStudy的博客
05-11 495
<template> <div class="home"> <h1>待办事项</h1> <div> <input type="text" v-model="inpVal"> <button @click="add">增加</button> </div> <div v-for="(item,index) in todoList">
使用TS写一个Vue版todolist
guxin_duyin的博客
01-17 1194
说实话，之前虽然简单学习过TS，但是一直没在项目中使用过。今天，就尝试了一把，虽然一开始使用有各种不适应，但是不得不说，使用TS写代码确实比用JS写会少很多bug。 话不多说，先了解一下TS是什么东东？ TypeScript是什么？ TS是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TS有什么好处？ TypeScript能从可维护性、...
Vue3+TS从零到一开发通用组件—导航栏(案例详细流程，含源码)
weixin_45745641的博客
11-22 3515
Vue3+TS从零到一开发通用组件—导航栏前言一、准备工作二、开始整活1.创建组件样式部分TS部分2.注册组件使用总结 前言 Vue3+TS是目前前端vue开发的趋势，Vue3相对2来说有更好的响应式，函数式，模板编译优化等等，Ts是js的超集，可读性和维护性更高。这篇文章教大家如何从零到一利用Vue3+TS开发一个通用组件——导航栏，前端ui使用的是bootstrap框架，先来看一下实现的效果： 未登录状态： 登录状态： 一、准备工作 这里就默认你们电脑装了Vue以及Ts （不会的点我）,然后创建
搭建一个vue3+ts项目（超祥/必看）
c_qianxia5040的博客
07-24 1万+
Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的state、并添加甚至删除state、actions和getters。@types/node 模块 在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。当修改代码时，HMR。能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。
如何用vite+vue3+ts创建项目
01-25
使用vite+vue3+ts创建项目的步骤如下： 1. 首先，确保你已经安装了Node.js和npm。可以在终端中运行以下命令来检查它们的版本： ```shell node -v npm -v ``` 2. 使用以下命令全局安装vite脚手架： ```shell npm install -g create-vite ``` 3. 创建一个新的vite+vue3+ts项目。在终端中运行以下命令： ```shell create-vite my-v3 --template vue-ts ``` 这将创建一个名为my-v3的项目，并使用vue-ts模板。 4. 进入项目目录： ```shell cd my-v3 ``` 5. 安装项目依赖： ```shell npm install ``` 6. 启动开发服务器： ```shell npm run dev ``` 这将启动一个本地开发服务器，并在浏览器中打开项目。 现在，你已经成功创建了一个vite+vue3+ts项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值