使用 Vue 3 与 TypeScript 构建 Web 应用: Todo

引言 界面: Vue.js 3 JavaScript 超集: TypeScript 包管理器: pnpm 前端工程化/打包: Vite 路由: Vue Router 状态管理: Pinia CSS 预处理器: Less 代码格式化: Prettier 代码质量: ESLint 预览

技术栈

详细

1. 界面: Vue.js 3
   • GitHub: vuejs/core: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web .
   • 链接: Vue.js - The Progressive JavaScript Framework | Vue.js
   • create-vue
     • 注意: 本文使用 create-vue , 此模版源拥有更多模板
     • 模版
       • 模版 来源 -1: create-vite
       • 模版 来源 -2: create-vue , 即为 npm init vue@latest , 基于 Vite + Vue
       • 模版 来源 3: Vue CLI
     • 补充
       • 来自 Vue 的模版 来源 : Project Scaffolding | Vue.js
       • npm init vue@latest 等同于 npm create vue@3 , 将使用 create-vue 模版(基于 vite), 而不是 Vue CLI 模版(基于 webpack)
2. JavaScript 超集: TypeScript
   • GitHub: microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
   • 链接: TypeScript: JavaScript With Syntax For Types.
3. 包管理器: pnpm
   • GitHub: pnpm/pnpm: Fast, disk space efficient package manager
   • 链接: Fast, disk space efficient package manager | pnpm
4. 前端工程化/打包: Vite
   • GitHub: vitejs/vite: Next generation frontend tooling. It's fast!
   • 链接: Vite | Next Generation Frontend Tooling
5. 路由: Vue Router
   • GitHub: vuejs/router: 🚦 The official router for Vue.js
   • 链接: Vue Router | The official Router for Vue.js
6. 状态管理: Pinia
   • GitHub: vuejs/pinia: 🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
   • 链接: Pinia | The intuitive store for Vue.js
7. CSS 预处理器: Less
   • GitHub: less/less.js: Less. The dynamic stylesheet language.
   • 链接: Getting started | Less.js
8. 代码格式化: Prettier
   • GitHub: prettier/prettier: Prettier is an opinionated code formatter.
   • 链接: Prettier · Opinionated Code Formatter
9. 代码质量: ESLint
   • GitHub: eslint/eslint: Find and fix problems in your JavaScript code.
   • 链接: Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter
10. 其它三方库
    • 可拖拽: Vue.js 3: SortableJS/vue.draggable.next: Vue 3 compatible drag-and-drop component based on Sortable.js

本地开发环境

🦄  node --version
v18.14.0

1. 安装 pnpm

PowerShell

iwr https://get.pnpm.io/install.ps1 -useb | iex

🦄  pnpm --version
8.6.5

2. 使用 create-vue 的模版创建项目

pnpm create vue@latest

cd vue-project
pnpm install
pnpm format
pnpm dev

pnpm install 会生成 新文件 pnpm-lock.yaml pnpm format 此模版版本不会造成文件修改

PS: VITE v4.3.9

3. 安装 less

参考:

• Vue3 + Vite 使用 Less 配置_vite使用less_欢莱的博客-CSDN博客
• Shared Options | Vite

pnpm add -D less

Vite 和 Webpack 不同，不需要 less-loader 等，只需安装 less

4. 创建组件 TodoList.vue

清空 src/components

创建 src/components/TodoList.vue

<template>
  <div>TodoList</div>
</template>

修改 src/views/HomeView.vue

<script setup lang="ts">
import TodoList from '../components/TodoList.vue'
</script>
<template>
    <TodoList />
  </main>
</template>

修改 src/App.vue

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
  </header>
  <RouterView />
</template>
<style scoped>
</style>

预览

5. 创建组件 TodoGroup.vue

创建新文件: src/components/TodoGroup.vue

<template>
    <div>TodoGroup</div>
</template>

修改文件: src/components/TodoList.vue

<script setup lang="ts">
import TodoGroup from './TodoGroup.vue';
</script>
<template>
    <TodoGroup />
</template>

预览

6. 修改组件

修改 src/components/TodoGroup.vue

<script setup lang="ts">
enum TodoStatus {
  Pending = 'pending',
  InProgress = 'InProgress',
  Completed = 'completed'
interface Todo {
  id: number
  title: string
  description: string
  status: TodoStatus
const pendingTodos: Todo[] = [
    id: 1,
    title: '测试标题',
    description: '测试描述',
    status: TodoStatus.Pending
</script>
<template>
    <h3>Pending</h3>
      <li v-for="todo in pendingTodos" :key="todo.id">{{ todo.title }}</li>
</template>

修改 src/components/TodoList.vue

<script setup lang="ts">
import TodoGroup from './TodoGroup.vue';
</script>
<template>
    <TodoGroup />
    <TodoGroup />
    <TodoGroup />
</template>

预览

7. 进一步整理

将 TypeScript 公共自定义类型提取到 types.ts

src/types.ts

export enum TodoStatus {
  Pending = 'pending',
  InProgress = 'in progress',
  Completed = 'completed'
export interface Todo {
  id: number
  title: string
  description: string
  status: TodoStatus
}

src/components/TodoList.vue

<script setup lang="ts">
import TodoGroup from './TodoGroup.vue'
import { TodoStatus } from '@/types'
</script>
<template>
    <TodoGroup :status="TodoStatus.Pending" />
    <TodoGroup :status="TodoStatus.InProgress" />
    <TodoGroup :status="TodoStatus.Completed" />
</template>

src/components/TodoGroup.vue

<script setup lang="ts">
import { TodoStatus, type Todo } from '@/types'
import { computed } from 'vue'
interface Props {
  status: TodoStatus
const props = defineProps<Props>()
const pendingTodos: Todo[] = [
    id: 1,
    title: '测试标题',
    description: '测试描述',
    status: TodoStatus.Pending
const groupLabel = computed(() => {
  switch (props.status) {
    case TodoStatus.Pending:
      return 'Pending'
    case TodoStatus.InProgress:
      return 'In Progress'
    case TodoStatus.Completed:
      return 'Completed'
    default:
      return 'Todo Group'
</script>
<template>
    <h3>{{ groupLabel }}</h3>
      <li v-for="todo in pendingTodos" :key="todo.id">{{ todo.title }}</li>
</template>

预览

8. 利用 reactive 创建本地 stores/useTodos.ts

src/stores/useTodos.ts

import { TodoStatus, type Todo } from '@/types'
import { computed, reactive } from 'vue'
interface TodoStore {
  // 行末尾的分号 ; 可省
  [TodoStatus.Pending]: Todo[]
  [TodoStatus.InProgress]: Todo[]
  [TodoStatus.Completed]: Todo[]
const defaultVal = {
  [TodoStatus.Pending]: [
      id: 1,
      title: '测试标题',
      description: '测试描述',
      status: TodoStatus.Pending
  [TodoStatus.InProgress]: [],
  [TodoStatus.Completed]: []
const todoStore = reactive<TodoStore>(defaultVal)
export default () => {
  const getTodosByStatus = (todoStatus: TodoStatus) => {
    return computed(() => todoStore[todoStatus])
  return { getTodosByStatus }
}

src/components/TodoGroup.vue

<script setup lang="ts">
import { TodoStatus } from '@/types'
import { computed } from 'vue'
import useTodos from '@/stores/useTodos'
interface Props {
  status: TodoStatus
const props = defineProps<Props>()
const { getTodosByStatus } = useTodos()
const todoList = getTodosByStatus(props.status)
const groupLabel = computed(() => {
  switch (props.status) {
    case TodoStatus.Pending:
      return 'Pending'
    case TodoStatus.InProgress:
      return 'In Progress'
    case TodoStatus.Completed:
      return 'Completed'
    default:
      return 'Todo Group'
</script>
<template>
    <h3>{{ groupLabel }}</h3>
      <li v-for="todo in todoList" :key="todo.id">{{ todo.title }}</li>
</template>

预览

9. 简化 TodoGroup.vue 中 computed

src/components/TodoGroup.vue

<script setup lang="ts">
const groupLabel = {
  [TodoStatus.Pending]: 'Pending',
  [TodoStatus.InProgress]: 'In Progress',
  [TodoStatus.Completed]: 'Completed'
</script>
<template>
    <h3>{{ groupLabel[props.status] }}</h3>
</template>

10. 添加样式

src/components/TodoList.vue

...
<template>
  <div class="groups-wrapper">
    <TodoGroup :status="TodoStatus.Pending" />
    <TodoGroup :status="TodoStatus.InProgress" />
    <TodoGroup :status="TodoStatus.Completed" />
</template>
<style lang="less" scoped>
.groups-wrapper {
  display: flex;
  justify-content: space-around;
  gap: 20px;
</style>

src/components/TodoGroup.vue

...
<template>
  <div class="group-wrapper">
    <h3>{{ groupLabel[props.status] }}</h3>
      <li v-for="todo in todoList" :key="todo.id">
        {{ todo.title }}
          <span class="todo-description">{{ todo.description }}</span>
</template>
<style lang="less" scoped>
.group-wrapper {
  flex: 1;
  padding: 20px;
  background-color: rgb(56, 80, 103);
  width: 300px;
.group-wrapper li {
  list-style-type: none;
  background-color: aliceblue;
  color: rgb(56, 80, 103);
  padding: 2px 5px;
  cursor: grab;
  margin-bottom: 10px;
.todo-description {
  font-size: 12px;
</style>

预览

11. 可拖拽, 样式优化

参考:

• SortableJS/vue.draggable.next: Vue 3 compatible drag-and-drop component based on Sortable.js
  • Vue 3 可拖拽

pnpm add vuedraggable@next

src/components/TodoGroup.vue

<script setup lang="ts">
import Draggable from 'vuedraggable'
</script>
<template>
  <div class="group-wrapper">
    <h3>{{ groupLabel[props.status] }}</h3>
    <Draggable class="draggable" :list="todoList" group="todos" item-key="id">
      <template #item="{ element: todo }">
          {{ todo.title }}
            <span class="todo-description">{{ todo.description }}</span>
      </template>
    </Draggable>
</template>
<style lang="less" scoped>
.group-wrapper {
  flex: 1;
  padding: 20px;
  background-color: rgb(56, 80, 103);
  width: 300px;
    color: rgb(207, 221, 234);
  .draggable {
    min-height: 200px;
      list-style-type: none;
      background-color: aliceblue;
      color: rgb(56, 80, 103);
      padding: 2px 5px;
      cursor: grab;
      margin-bottom: 10px;
      .todo-description {
        font-size: 12px;
</style>

预览, 此时即可拖拽单项 Todo

12. 添加 Todo, 删除 Todo, 拖拽改变分组

src/stores/useTodos.ts

import { TodoStatus, type Todo } from '@/types'
import { computed, reactive } from 'vue'
interface TodoStore {
  // 行末尾的分号 ; 可省
  [TodoStatus.Pending]: Todo[]
  [TodoStatus.InProgress]: Todo[]
  [TodoStatus.Completed]: Todo[]
const defaultVal = {
  [TodoStatus.Pending]: [
      id: 1,
      title: '测试标题',
      description: '测试描述',
      status: TodoStatus.Pending
  [TodoStatus.InProgress]: [],
  [TodoStatus.Completed]: []
const todoStore = reactive<TodoStore>(defaultVal)
export default () => {
  const getTodosByStatus = (todoStatus: TodoStatus) => {
    return computed(() => todoStore[todoStatus])
  const updateTodo = (todo: Todo, newStatus: TodoStatus) => {
    todo.status = newStatus
  const addNewTodo = (todo: Todo) => {
    todoStore[todo.status].push(todo)
  const deleteTodo = (todoToDelete: Todo) => {
    todoStore[todoToDelete.status] = todoStore[todoToDelete.status].filter(
      (todo) => todo.id != todoToDelete.id
  return { getTodosByStatus, addNewTodo, deleteTodo, updateTodo }
}

src/components/CreateTodo.vue

<script setup lang="ts">
import { TodoStatus, type Todo } from '@/types'
import { reactive, ref } from 'vue'
import useTodos from '@/stores/useTodos'
interface Props {
  status: TodoStatus
const props = defineProps<Props>()
const shouldDisplayForm = ref(false)
const { addNewTodo } = useTodos()
// id 属性对于初始化时不能指定, 通过 Omit id 去除 id 属性
const newTodo = reactive<Omit<Todo, 'id'>>({
  title: '',
  description: '',
  status: props.status
const resetForm = () => {
  shouldDisplayForm.value = false
  newTodo.title = ''
  newTodo.description = ''
const handleSubmit = () => {
  // add new todo
  addNewTodo({
    id: Math.random() * 10000000000000000,
    ...newTodo
  resetForm()
</script>
<template>
    <h3 v-if="!shouldDisplayForm" @click="shouldDisplayForm = !shouldDisplayForm">Add New</h3>
    <template v-else>
      <form @submit.prevent="handleSubmit">
          <input type="text" placeholder="Title" v-model="newTodo.title" />
          <input type="text" placeholder="Description" v-model="newTodo.description" />
        <button type="submit">Submit</button>
        <button type="button" @click="resetForm">Cancel</button>
      </form>
    </template>
</template>
<style lang="less" scoped>
  color: rgb(207, 221, 234);
</style>

src/components/TodoGroup.vue

<script setup lang="ts">
import { TodoStatus } from '@/types'
import useTodos from '@/stores/useTodos'
import Draggable from 'vuedraggable'
import CreateTodo from './CreateTodo.vue'
interface Props {
  status: TodoStatus
const props = defineProps<Props>()
const { getTodosByStatus, deleteTodo, updateTodo } = useTodos()
const todoList = getTodosByStatus(props.status)
const groupLabel = {
  [TodoStatus.Pending]: 'Pending',
  [TodoStatus.InProgress]: 'In Progress',
  [TodoStatus.Completed]: 'Completed'
const onDraggableChange = (payload: any) => {
  console.log('payload', payload)
  if (payload?.added?.element) {
    // update todo status
    updateTodo(payload?.added?.element, props.status)
</script>
<template>
  <div class="group-wrapper">
    <h3>{{ groupLabel[props.status] }}</h3>
    <Draggable
      class="draggable"
      :list="todoList"
      group="todos"
      item-key="id"
      @change="onDraggableChange"
      <template #item="{ element: todo }">
          {{ todo.title }}
          {{ todo.status }}
          <span class="icon-delete" @click="deleteTodo(todo)">x</span>
            <span class="todo-description">{{ todo.description }}</span>
      </template>
    </Draggable>
    <CreateTodo :status="props.status" />
</template>
<style lang="less" scoped>
.group-wrapper {
  flex: 1;
  padding: 20px;
  background-color: rgb(56, 80, 103);
  width: 300px;
    color: rgb(207, 221, 234);
  .draggable {
    min-height: 200px;
      list-style-type: none;
      background-color: aliceblue;
      color: rgb(56, 80, 103);
      padding: 2px 5px;
      cursor: grab;
      margin-bottom: 10px;
      .icon-delete {
        float: right;
        cursor: pointer;
      .todo-description {
        font-size: 12px;
</style>

预览

13. 改为 Pinia 状态管理

src/stores/todo.ts

import { defineStore, acceptHMRUpdate } from 'pinia'
import { TodoStatus, type Todo } from '@/types'
interface TodoState {
  // 行末尾的分号 ; 可省
  [TodoStatus.Pending]: Todo[]
  [TodoStatus.InProgress]: Todo[]
  [TodoStatus.Completed]: Todo[]
export const useTodoStore = defineStore({
  id: 'todo',
  state: (): TodoState => ({
    [TodoStatus.Pending]: [
        id: 1,
        title: '测试标题',
        description: '测试描述',
        status: TodoStatus.Pending
    [TodoStatus.InProgress]: [],
    [TodoStatus.Completed]: []
  getters: {
    getTodosByStatus: (state) => {
      return (todoStatus: TodoStatus): Todo[] => state[todoStatus]
  actions: {
    updateTodo(todo: Todo, newStatus: TodoStatus) {
      console.log('updateTodo')
      // 注意: 经过测试, 可以这么更新, 可以在 Chrome Vue Pinia 标签页看到被正确更新到目标状态下
      // 不仅仅是 由于 getTodosByStatus 的原因 使其看起来像, 而是实际存储改变
      // 感觉挺神奇, 发现改变单个 todo 的 status 居然使其也同步转移到了 state 的 对应属性 下
      // TODO: 为什么不是仅仅改变了此 todo 的 status, 但在 state 中没有改变其所属属性, 导致属性与此 todo status 不匹配
      // 我更新 a.status 从 Pending 到 InProgress，
      // 最终居然还导致 state.Pending 中移除了 a, state.InProgress 添加了 a
      todo.status = newStatus
    addNewTodo(todo: Todo) {
      console.log('addNewTodo')
      this[todo.status].push(todo)
    deleteTodo(todoToDelete: Todo) {
      this[todoToDelete.status] = this[todoToDelete.status].filter(
        (todo) => todo.id != todoToDelete.id
if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useTodoStore, import.meta.hot))

src/components/CreateTodo.vue

 <script setup lang="ts">
 import { TodoStatus, type Todo } from '@/types'
 import { reactive, ref } from 'vue'
-import useTodos from '@/stores/useTodos'
+// import useTodos from '@/stores/useTodos'
+import { useTodoStore } from '@/stores/todo'
 interface Props {
   status: TodoStatus
@@ -11,7 +12,8 @@ const props = defineProps<Props>()
 const shouldDisplayForm = ref(false)
-const { addNewTodo } = useTodos()
+// const { addNewTodo } = useTodos()
+const todoStore = useTodoStore()
 // id 属性对于初始化时不能指定, 通过 Omit id 去除 id 属性
 const newTodo = reactive<Omit<Todo, 'id'>>({
@@ -28,7 +30,13 @@ const resetForm = () => {
 const handleSubmit = () => {
   // add new todo
-  addNewTodo({
+  // addNewTodo({
+  //   id: Math.random() * 10000000000000000,
+  //   ...newTodo
+  // })
+  // pinia
+  todoStore.addNewTodo({
     id: Math.random() * 10000000000000000,
     ...newTodo
   })

src/components/TodoGroup.vue

 <script setup lang="ts">
-import { TodoStatus } from '@/types'
-import useTodos from '@/stores/useTodos'
+import { TodoStatus, type Todo } from '@/types'
+// import useTodos from '@/stores/useTodos'
+import { useTodoStore } from '@/stores/todo'
 import Draggable from 'vuedraggable'
 import CreateTodo from './CreateTodo.vue'
+import { storeToRefs } from 'pinia';
 interface Props {
   status: TodoStatus
@@ -10,8 +12,13 @@ interface Props {
 const props = defineProps<Props>()
-const { getTodosByStatus, deleteTodo, updateTodo } = useTodos()
-const todoList = getTodosByStatus(props.status)
+// const { getTodosByStatus, deleteTodo, updateTodo } = useTodos()
+const todoStore = useTodoStore()
+// const todoList = getTodosByStatus(props.status)
+// 错误
+// const todoList = todoStore.getTodosByStatus(props.status)
+// 正确
+const { getTodosByStatus } = storeToRefs(todoStore)
 const groupLabel = {
   [TodoStatus.Pending]: 'Pending',
@@ -23,9 +30,17 @@ const onDraggableChange = (payload: any) => {
   console.log('payload', payload)
   if (payload?.added?.element) {
     // update todo status
-    updateTodo(payload?.added?.element, props.status)
+    // updateTodo(payload?.added?.element, props.status)
+    // pinia
+    todoStore.updateTodo(payload?.added?.element, props.status)
+const deleteTodo = (todo: Todo) => {
+  console.log('deleteTodo', todo)
+  todoStore.deleteTodo(todo)
 </script>
 <template>
@@ -34,7 +49,7 @@ const onDraggableChange = (payload: any) => {
     <Draggable
       class="draggable"
-      :list="todoList"
+      :list="getTodosByStatus(props.status)"
       group="todos"
       item-key="id"
       @change="onDraggableChange"

将 Pending 中的 a 拖动到 In Progress 中

拖动完成

即为索引为 1 的 In Progress 添加一项, 索引为 0 的 Pending 删除一项

Chrome 扩展 Vue

添加 watch ，

src/main.ts

 import './assets/main.css'
-import { createApp } from 'vue'
+import { createApp, watch } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 const app = createApp(App)
+const pinia = createPinia()
-app.use(createPinia())
+// 你可以在 pinia 实例上使用 watch() 函数侦听整个 state。
+watch(
+  pinia.state,
+  (state) => {
+    // 每当状态发生变化时，将整个 state 持久化到本地存储。
+    console.log('watch: pinia.state', state)
+    localStorage.setItem('piniaState', JSON.stringify(state))
+  },
+  { deep: true }
+app.use(pinia)
 app.use(router)
 app.mount('#app')

将 测试标题 从 Pending 拖动到 In Progress ，发现会神奇的触发两次, 而且两次输出都在 In Progress 内

Q&A

Q: Use volar-service-vetur instead of Vetur 参考: services/packages/vetur at master · volarjs/services · GitHub vuejs/vetur: Vue tooling for VS Code.

可尝试先禁用 Vetur 插件

补充

pnpm: node_modules

npm vs pnpm

ESLint + Prettier

ESLint 可以同时解决代码格式和代码质量，Prettier 没有使用的必要了？但其实 ESLint 主要解决的是代码质量的问题，代码格式这部分 ESLint 并没有全部做完。Prettier 就是接管了两类问题中的代码格式，并进行自动修复

Vue 中 @click

@ 是 v-on 的语法糖, @click 为点击事件

在原生 DOM 对象中，有 onclick , 传递一个函数调用, 即 onclick="add()"

在 vue 中，即可传递函数，也可以传递函数调用（只有当事件触发时，才会执行）

<button @click="add">+1</button>
methods: {
   add() {
			// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
			this.count += 1
}

或者

<!-- vue 提供了内置变量，名字叫 $event(固定写法)，它就是原生 DOM 的事件对象 e -->
<button @click="add(3, $event)"></button>
methods: {
   add(n, e) {
			// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
			this.count += 1
}

在 Vue.js 中，其中值甚至可以是一个表达式, 如 下方