转载请注明出处，如有问题请联系我们！ Vue3 基础知识地图：组件、路由、状态管理怎么学

Vue3 基础知识地图：组件、路由、状态管理怎么学 这篇文章适合刚开始学习 Vue3，或者准备维护 Vue3 前端项目的人。很多新手学 Vue 时容易东学一点、西学一点，最后组件会写一点，路由会配一点，但项目结构、状态管理、接口请求和打包上线串不起来。

一、Vue3 学习顺序不要乱

Vue3 的知识点很多，但学习顺序很重要。推荐按照下面路线走：

1. 先理解页面如何被组件拆分。
2. 再学习 ref、reactive、computed、watch。
3. 然后学习父子组件传值。
4. 再学习 Vue Router 路由。
5. 最后学习 Pinia 状态管理和接口请求。

不要一开始就去看大型后台模板源码，新手很容易被工程化配置吓住。

二、组件是 Vue 项目的基本单位

一个 Vue 页面通常不是一个大文件写到底，而是拆成多个组件。例如一个资源网站首页可以拆成：

components/
  HeaderNav.vue
  HomeBanner.vue
  CategoryCard.vue
  ArticleList.vue
  FooterInfo.vue

这样做的好处是结构清晰，后期修改某个模块时不会影响整个页面。

三、Composition API 怎么理解

Vue3 常用 setup 和组合式 API。简单理解：把数据、方法、监听逻辑放在一起，更适合复杂页面。

<script setup>
import { ref, computed } from "vue"

const count = ref(0)

const doubleCount = computed(() => {
  return count.value * 2
})

function add(){
  count.value++
}
</script>

注意：ref 定义的数据在 JS 里要用 .value，模板里不需要。

四、路由 Vue Router

Vue Router 负责页面切换。例如登录页、用户中心、文章详情页都可以配置路由。

import { createRouter, createWebHistory } from "vue-router"

const routes = [
  { path: "/", component: () => import("./pages/Home.vue") },
  { path: "/login", component: () => import("./pages/Login.vue") },
  { path: "/user", component: () => import("./pages/User.vue") }
]

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

如果部署到 Nginx 后刷新页面 404，需要配置伪静态，把路由交给 index.html。

五、状态管理 Pinia

当多个页面都要用用户信息、登录状态、网站配置时，不建议每个组件自己请求一遍。可以使用 Pinia。

import { defineStore } from "pinia"

export const useUserStore = defineStore("user", {
  state: () => ({
    token: "",
    userInfo: null
  }),
  actions: {
    setUser(user){
      this.userInfo = user
    }
  }
})

六、接口请求怎么组织

不要在每个页面里乱写 axios。建议封装一个请求文件：

src/
  api/
    user.js
    article.js
  utils/
    request.js

request.js 里统一处理 baseURL、token、错误提示和登录失效。

七、项目结构建议

src/
  assets/       静态资源
  components/   公共组件
  pages/        页面
  router/       路由
  stores/       Pinia 状态
  api/          接口
  utils/        工具函数
  App.vue
  main.js

八、常见错误

• 组件拆分太碎，反而不好维护。
• 所有数据都放 Pinia，导致状态混乱。
• 接口请求没有统一封装，错误处理重复。
• 路由部署后刷新 404，没有配置 Nginx。
• 打包后资源路径错误，页面空白。

九、总结

Vue3 入门不要只背 API，要建立知识地图：组件负责页面拆分，Composition API 负责逻辑组织，Router 负责页面切换，Pinia 负责跨页面状态，接口封装负责数据请求。把这几个模块串起来，才算真正能维护 Vue3 项目。