好的，阿杰 👍 我来帮你整理一份 Vue3全家桶入门教程，一步步带你上手。内容会覆盖：Vue3 核心 → Vue Router → Pinia → Axios → 项目实践。你可以把它作为学习大纲，也可以边学边做一个小项目。

🚀 Vue3全家桶上手教程

1. 环境准备

  • 安装 Node.js（推荐 18+ 版本）node -v npm -v
  • 创建 Vue3 项目（使用 Vite 搭建）npm create vite@latest my-vue3-app cd my-vue3-app npm install npm run dev

2. Vue3 核心语法

2.1 Composition API

Vue3 最大变化就是引入了 Composition API。

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

const count = ref(0)
const add = () => count.value++
</script>

<template>
  <button @click="add">点击 {{ count }}</button>
</template>
  • ref：定义响应式数据
  • reactive：定义响应式对象
  • computed：计算属性
  • watch：监听数据变化

2.2 生命周期钩子

import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件挂载完毕')
})

onUnmounted(() => {
  console.log('组件卸载')
})

2.3 父子组件通信

<!-- 父组件 -->
<Child :msg="title" @changeTitle="title=$event" />

<!-- 子组件 -->
<script setup>
defineProps({ msg: String })
defineEmits(['changeTitle'])
</script>

3. Vue Router (路由管理)

安装：

npm install vue-router

配置：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('../views/About.vue') }
]

export default createRouter({
  history: createWebHistory(),
  routes
})

在 main.js 引入：

import router from './router'
app.use(router)

4. Pinia (状态管理)

安装：

npm install pinia

配置：

// store/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ }
  }
})

使用：

<script setup>
import { useCounterStore } from '../store/counter'
const counter = useCounterStore()
</script>

<template>
  <button @click="counter.increment">计数 {{ counter.count }}</button>
</template>

5. Axios (网络请求)

安装：

npm install axios

封装：

// utils/request.js
import axios from 'axios'

const request = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
})

export default request

使用：

import request from './utils/request'
request.get('/users').then(res => console.log(res.data))

6. 实战小项目（Todo List）

功能点：

  1. 添加、删除、完成任务
  2. 数据持久化（localStorage 或请求 API）
  3. 使用 Pinia 管理任务状态
  4. 使用 Router 切换 “全部 / 已完成 / 未完成”

7. 学习路线总结

  1. 先掌握 Vue3 Composition API
  2. 学会 组件通信 + 生命周期
  3. 用 Vue Router 搭建页面导航
  4. 用 Pinia 管理全局状态
  5. 用 Axios 请求后端接口
  6. 做一个 完整小项目

好的 👍 阿杰，我来帮你写一个 Vue3 + Vite + Router + Pinia + Axios 的 TodoList 示例项目，代码结构清晰，可以直接运行。

🗂 项目结构

my-vue3-todo
│── src
│   ├── main.js
│   ├── App.vue
│   ├── router/index.js
│   ├── store/todo.js
│   ├── utils/request.js
│   ├── views
│   │   ├── Home.vue
│   │   └── About.vue
│   └── components
│       └── TodoList.vue

1. main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

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

2. App.vue

<template>
  <div class="app">
    <h1>✅ Vue3 Todo List</h1>
    <nav>
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view />
  </div>
</template>

<style>
.app {
  font-family: Arial, sans-serif;
  padding: 20px;
}
nav a {
  margin: 0 8px;
}
</style>

3. router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

export default createRouter({
  history: createWebHistory(),
  routes
})

4. store/todo.js

import { defineStore } from 'pinia'

export const useTodoStore = defineStore('todo', {
  state: () => ({
    todos: []
  }),
  actions: {
    addTodo(text) {
      this.todos.push({ id: Date.now(), text, done: false })
    },
    toggleTodo(id) {
      const todo = this.todos.find(t => t.id === id)
      if (todo) todo.done = !todo.done
    },
    removeTodo(id) {
      this.todos = this.todos.filter(t => t.id !== id)
    }
  }
})

5. utils/request.js

（这里用 Axios 你可以替换成真实 API，我先写一个简单示例）

import axios from 'axios'

const request = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000
})

export default request

6. components/TodoList.vue

<script setup>
import { ref } from 'vue'
import { useTodoStore } from '../store/todo'

const store = useTodoStore()
const newTodo = ref('')

const add = () => {
  if (!newTodo.value.trim()) return
  store.addTodo(newTodo.value)
  newTodo.value = ''
}
</script>

<template>
  <div>
    <input v-model="newTodo" placeholder="输入任务..." @keyup.enter="add" />
    <button @click="add">添加</button>

    <ul>
      <li v-for="todo in store.todos" :key="todo.id">
        <input type="checkbox" v-model="todo.done" @change="store.toggleTodo(todo.id)" />
        <span :style="{ textDecoration: todo.done ? 'line-through' : '' }">
          {{ todo.text }}
        </span>
        <button @click="store.removeTodo(todo.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<style>
ul { list-style: none; padding: 0; }
li { margin: 5px 0; }
input { margin-right: 5px; }
</style>

7. views/Home.vue

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

<template>
  <div>
    <h2>我的任务</h2>
    <TodoList />
  </div>
</template>

8. views/About.vue

<template>
  <div>
    <h2>关于</h2>
    <p>这是一个 Vue3 + Router + Pinia + Axios 的 TodoList 示例项目。</p>
  </div>
</template>

🚀 运行步骤

npm create vite@latest my-vue3-todo
cd my-vue3-todo
npm install
# 把上面代码复制到 src 目录
npm run dev