从零开始学习Vue3和Naive UI打造一个待办事项应用。

在如今快节奏的生活中，每个人都需要有一个良好的时间管理方式，待办事项应用是其中一个常用的工具。在这篇博客中，我们将一步步学习如何使用Vue3和Naive UI构建一个待办事项应用。Vue是一个流行的JavaScript框架，它帮助开发人员构建交互式用户界面。而Naive UI则是一款Vue3的组件库，它提供了大量的高质量组件和工具，使得开发者能够更加快速、高效地构建应用程序。

项目效果图

vue3+Naive UI环境的搭建

初始化vue3

终端下输入：

npm init vue@latest

起好项目的名称，然后一路回车即可。

  cd vue3

  npm install

  npm run dev

至此Vue3的项目已经搭建完毕，打开http://127.0.0.1:5173/就可以看到项目的默认首页了。

安装Naive UI依赖库

npm i -D naive-ui
npm i -D vfonts

然后我们根据官方出的配置对项目进行简单的修改vue3项目下边的main.js

import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'

const app = createApp(App)
app.use(naive)
app.mount('#app')

好啦，Naive UI的依赖也安装好了。

基本功能介绍

这个简单的待办事项的小项目功能很简答，事项了代办事项的添加、删除、完成、分类显示代办事项中的已完成和未完成事项，额外添加了主题的切换。

如何开始一个项目？

前端项目的开始我觉得在项目的功能确定后，就可以使用前端的框架开始布置界面了，这里我们使用Naive UI来搭建前端的界面。这里为了便于学习我把所有的组件都系在了一个Vue的文件里，方便大家查看学习。

App.vue：

<template>
  <n-config-provider :theme="theme">
    <header>
      <div>
        <n-h1>
          <n-text type="success">Todos</n-text>
        </n-h1>
        <n-text>
          本项目依赖
          <n-a href="https://cn.vitejs.dev/" target="_blank" rel="noopener">Vite</n-a> +
          <n-a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</n-a> +
          <n-a
            href="https://https://www.naiveui.com/zh-CN/dark.dev/"
            target="_blank"
            rel="noopener"
            >Naive UI</n-a
          >
          搭建。
        </n-text>
      </div>
    </header>

    <main>
      <n-layout-header>
        <n-space vertical>
          <n-input
            v-model:value="newTodo"
            @keyup.enter="addTodo"
            size="small"
            placeholder="按回车键添加代办事项"
            autosize
            style="min-width: 50%"
            ref="inputRef"
          ></n-input>
        </n-space>
      </n-layout-header>
      <n-layout-content>
        <n-list v-for="todo in filteredTodos" :key="todo.id">
          <n-list-item>
            <n-space>
              <n-checkbox v-model:checked="todo.done" size="large" name="basic-demo">
              </n-checkbox>
              <n-text :delete="todo.done"
                ><label>{{ todo.text }}</label></n-text
              >
              <n-button @click="removeTodo(todo)" size="tiny">x</n-button>
            </n-space>
          </n-list-item>
        </n-list>
      </n-layout-content>
      <n-layout-footer>
        <n-space>
          <n-button-group>
            <n-button @click="all"> 所有条目 </n-button>
            <n-button @click="completed"> 已完成 </n-button>
            <n-button @click="active"> 未完成 </n-button>
          </n-button-group>
          <n-button @click="changetheme">
            {{ themebtntit }}
          </n-button>
        </n-space>
      </n-layout-footer>
    </main>
    <n-global-style />
  </n-config-provider>
</template>

上边就是使用Naive UI构建的完整的界面代码，关于UI的组件使用可以查阅官方的组件文档，这里就不一一介绍了。

功能的实现

我们是用的是Vue3的组合式代码，请修改script为下边的形式。

<script setup>
</script>

数据的存储

这里我们把整个项目的数据存储到浏览器的localStorage中，通过Vue3中的watchEffect对数据的变化进行一个响应，用来修改保存localStorage中的数据。

const todos = ref(JSON.parse(localStorage.getItem("mytodos") || "[]")); // 整个项目的数据数组
// 状态持久
watchEffect(() => {
  localStorage.setItem("mytodos", JSON.stringify(todos.value));
});

数据的渲染

在页面渲染的时候，我们遍历的是filteredTodos，这个数组有三种状态，分别对应：all、active、completed。通过Vue3的computed来监听filterkey的值，在进行数据的过滤filter()，最终显示不同的数据。下边是实现代码：

const filteredTodos = computed(() => {
  if (filterkey.value == 1) {
    return todos.value;
  } else if (filterkey.value == 2) {
    return todos.value.filter((t) => !t.done);
  } else if (filterkey.value == 3) {
    return todos.value.filter((t) => t.done);
  }
});

const all = () => {
  filterkey.value = 1;
};
const active = () => {
  filterkey.value = 2;
};
const completed = () => {
  filterkey.value = 3;
};

通过页面点击不同的按钮修改filterkey的值实现展示不同数据的功能。

数据的增加和删除

这个很简单，具体看代码：

/**
 * 删除
 * @param {*} todo
 */
const removeTodo = (todo) => {
  // console.log(todo);
  todos.value = todos.value.filter((t) => t !== todo);
};

/**
 * 增加
 * @param {*} e
 */
const addTodo = (e) => {
  // console.log(newTodo.value);
  todos.value.push({ id: id++, text: newTodo.value, done: false });
  newTodo.value = "";
};

切换主题

Naive UI主题的切换分两个部分：
模板里：

<n-config-provider :theme="theme">
// 中间是你的组件
</n-config-provider>
<style scoped></style>

JavaScript代码：

const theme = ref(null); //主题变量
/**
 * 切换亮色和暗色主题
 */
const changetheme = () => {
  theme.value = theme.value == null ? darkTheme : null;
  themebtntit.value = themebtntit.value == "亮色主题" ? "暗色主题" : "亮色主题";
};

最后通过模板里的按钮点击事件来切换主题的展示，效果如下：

写在最后

这个待办事项的小项目还是有很多功能可以添加的，比如编辑项目内容，按照一定的属性排列项目等。能够搭建此项目并编写出项目的代码，我觉得可以算是入门了Vue3了。

本项目代码仓库：
https://github.com/bosichong/vue_naive_todos