[教程]Vue3入门实战：轻松上手，项目实战解析

引言Vue.js 是一个流行的前端JavaScript框架，它允许开发者构建用户界面和单页应用程序。Vue3 是 Vue.js 的最新版本，带来了许多改进和新的特性。本文旨在帮助初学者轻松上手 Vue...

引言

Vue.js 是一个流行的前端JavaScript框架，它允许开发者构建用户界面和单页应用程序。Vue3 是 Vue.js 的最新版本，带来了许多改进和新的特性。本文旨在帮助初学者轻松上手 Vue3，并通过实际项目实战来加深理解。

Vue3 简介

Vue3 是 Vue.js 的第三个主要版本，它引入了Composition API，使得组件的编写更加灵活和模块化。以下是一些 Vue3 的关键特性：

• Composition API：提供了一种新的声明式组件编写方式。
• 性能优化：包括Tree-shaking、SSR（服务器端渲染）等。
• 响应式系统：基于Proxy的响应式系统，更加高效。
• 全局API和指令：例如<script setup>、<teleport>等。

环境搭建

在开始之前，你需要安装 Node.js 和 npm。然后，使用 Vue CLI 创建一个新的 Vue3 项目：

npm install -g @vue/cli
vue create my-vue3-project
cd my-vue3-project

项目结构

一个典型的 Vue3 项目结构如下：

my-vue3-project/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ ├── main.js
│ └── router/
│ └── index.js
├── package.json
└── ...

Composition API 基础

Composition API 允许你将逻辑抽取到单独的函数中，这些函数称为“组合函数”。以下是一个简单的例子：

// src/components/MyComponent.vue
<template> <div>{{ count }}</div>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const count = ref(0); const increment = () => { count.value++; }; return { count, increment }; }
};
</script>

路由管理

Vue3 使用 Vue Router 进行路由管理。以下是如何设置一个基本的路由：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
const routes = [ { path: '/', name: 'Home', component: Home }
];
const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes
});
export default router;

状态管理

Vue3 使用 Vuex 进行状态管理。以下是如何创建一个简单的 Vuex store：

// src/store/index.js
import { createStore } from 'vuex';
export default createStore({ state() { return { count: 0 }; }, mutations: { increment(state) { state.count++; } }, actions: { increment(context) { context.commit('increment'); } }
});

项目实战

现在，让我们通过一个简单的待办事项列表应用来实践 Vue3 的使用。以下是应用的组件结构：

src/
├── components/
│ ├── TodoList.vue
│ ├── TodoItem.vue
│ └── TodoFooter.vue
└── App.vue

在 TodoList.vue 中，我们创建一个列表来展示待办事项：

<template> <div> <input v-model="newTodo" @keyup.enter="addTodo" /> <ul> <li v-for="(todo, index) in todos" :key="todo.id"> <TodoItem :todo="todo" @remove="removeTodo(index)" /> </li> </ul> <TodoFooter :todos="todos" @clear-completed="clearCompleted" /> </div>
</template>
<script>
import TodoItem from './TodoItem.vue';
import TodoFooter from './TodoFooter.vue';
export default { components: { TodoItem, TodoFooter }, data() { return { newTodo: '', todos: [] }; }, methods: { addTodo() { if (this.newTodo.trim() !== '') { this.todos.push({ id: Date.now(), content: this.newTodo, completed: false }); this.newTodo = ''; } }, removeTodo(index) { this.todos.splice(index, 1); }, clearCompleted() { this.todos = this.todos.filter(todo => !todo.completed); } }
};
</script>

TodoItem.vue 用于展示单个待办事项：

<template> <li> <span :class="{ completed: todo.completed }">{{ todo.content }}</span> <button @click="$emit('remove')">Remove</button> </li>
</template>
<script>
export default { props: { todo: Object }
};
</script>
<style>
.completed { text-decoration: line-through;
}
</style>

TodoFooter.vue 用于展示和清除已完成的待办事项：

<template> <div> <span>{{ completedTodosCount }} items completed</span> <button @click="$emit('clear-completed')">Clear Completed</button> </div>
</template>
<script>
export default { props: { todos: Array }, computed: { completedTodosCount() { return this.todos.filter(todo => todo.completed).length; } }
};
</script>

最后，在 App.vue 中，我们使用路由和状态管理来整合所有组件：

<template> <router-view/>
</template>
<script>
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');
</script>

总结

通过本文的介绍，你现在已经对 Vue3 有了一定的了解，并且通过一个待办事项列表应用的实际项目实战，加深了对 Vue3 的理解。希望这篇文章能够帮助你轻松上手 Vue3，并在未来的项目中发挥其强大的能力。