Vue3和Vite不得不说的那些事

下面是关于“Vue3和Vite不得不说的那些事”的完整攻略。

什么是Vue3和Vite

Vue3是Vue.js在2020年9月正式发布的一次重大版本更新，Vue3相较于Vue2来说，带来许多令人激动的新特性，包括Composition API、性能优化等。其中，Composition API是最大的亮点之一，它能够让开发者更好地组织和重用组件逻辑。

Vite则是一个由Vue.js核心团队开发的构建工具。它利用了ES模块的特性，实现了快速的HMR（Hot Module Replacement）热更新，并且在开发过程中使用了原生的ES模块，在构建打包时只需要转换成浏览器可用的代码，大幅提高了构建速度。

使用Vue3和Vite

下面是使用Vue3和Vite搭建一个简单的TodoList示例的步骤，供参考：

安装Vite

首先，我们需要安装Vite：

npm install -g vite

初始化项目

使用Vite初始化一个新的项目：

vite create my-todo-list

然后进入到项目目录并安装依赖：

cd my-todo-list
npm install

添加Vue3

现在我们需要添加Vue3依赖：

npm install vue@next

编写组件

接下来我们编写一个TodoList组件，它可以显示一个待办事项列表，并且支持添加、完成和删除任务。

<template>
  <div class="todo-list">
    <input v-model="newTask" @keyup.enter="addTask" placeholder="New task...">
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <input type="checkbox" v-model="task.complete">
        <span :class="{ 'is-complete': task.complete }">{{ task.title }}</span>
        <button @click="removeTask(index)">X</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const newTask = ref('');
    const tasks = ref([
      { title: 'Learn Vue3', complete: false },
      { title: 'Build a TodoList', complete: false },
    ]);

    function addTask() {
      if (!newTask.value.trim()) return;
      tasks.value.push({ title: newTask.value, complete: false });
      newTask.value = '';
    }

    function removeTask(index) {
      tasks.value.splice(index, 1);
    }

    return {
      newTask,
      tasks,
      addTask,
      removeTask,
    };
  },
};
</script>

<style>
  .is-complete {
    text-decoration: line-through;
  }
</style>

在页面中使用组件

在App.vue中使用我们刚才编写的TodoList组件：

<template>
  <div id="app">
    <h1>Todo List</h1>
    <TodoList />
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue';

export default {
  components: {
    TodoList,
  },
};
</script>