企业官网建设流程全解析

1. Vue3全家桶核心工具解析

Vue3全家桶是构建现代化前端应用的利器，主要由三个核心工具组成：Vue-Router负责页面路由管理，Pinia实现状态管理，Axios处理网络请求。这三个工具各司其职又紧密配合，形成了Vue3开发的"黄金三角"。

我在实际项目中发现，很多开发者容易混淆它们的职责边界。简单来说：

• Vue-Router：管理URL与组件的映射关系，实现SPA的无刷新页面切换
• Pinia：集中管理跨组件共享的状态数据
• Axios：处理所有HTTP请求，包括请求拦截和响应处理

这三个工具配合使用时，典型的数据流是这样的：用户操作触发路由跳转 → 组件通过Axios获取数据 → 数据存入Pinia → 其他组件从Pinia消费数据。这种架构让应用逻辑清晰可维护。

2. Vue-Router深度配置指南

2.1 路由模式选择

Vue-Router支持两种路由模式，我在项目中会根据实际需求选择：

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router' // Hash模式（兼容性好，URL带#） const routerHash = createRouter({ history: createWebHashHistory(), routes: [] }) // History模式（URL简洁，需要服务端支持） const routerHistory = createRouter({ history: createWebHistory(), routes: [] })

实测下来，如果项目对SEO有要求，建议使用History模式。但要注意需要在服务端配置fallback，否则刷新页面会出现404。我在部署Next.js项目时就踩过这个坑。

2.2 动态路由实战

动态路由是处理详情页的利器。比如电商商品页可以这样配置：

const routes = [ { path: '/product/:id', component: () => import('@/views/ProductDetail.vue') } ]

在组件中获取路由参数有三种方式：

<script setup> import { useRoute } from 'vue-router' // 推荐方式：Composition API const route = useRoute() console.log(route.params.id) // Options API方式 export default { created() { console.log(this.$route.params.id) } } </script> <!-- 模板中直接使用 --> <template> <div>{{ $route.params.id }}</div> </template>

2.3 路由守卫进阶技巧

路由守卫是权限控制的绝佳场所。这里分享一个登录拦截的实用案例：

router.beforeEach((to) => { const isAuthenticated = localStorage.getItem('token') // 需要登录但未登录 if (to.meta.requiresAuth && !isAuthenticated) { return '/login' } // 已登录但访问登录页 if (to.path === '/login' && isAuthenticated) { return '/dashboard' } })

对于后台管理系统，我通常会结合路由meta信息实现动态菜单：

{ path: '/admin', meta: { title: '管理后台', icon: 'el-icon-s-tools', roles: ['admin'] } }

3. Pinia状态管理实战

3.1 为什么选择Pinia？

Pinia是Vue3官方推荐的状态管理库，相比Vuex有这些优势：

• 更简洁的API设计
• 完整的TypeScript支持
• 无需modules的模块化设计
• 更友好的DevTools集成

我在迁移项目时做过性能测试，Pinia的包体积比Vuex小30%左右，运行时内存占用也更低。

3.2 核心概念与使用

创建Store的典型模式：

// stores/counter.js import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, user: null }), getters: { doubleCount: (state) => state.count * 2 }, actions: { increment() { this.count++ }, async fetchUser() { this.user = await api.getUser() } } })

在组件中使用：

<script setup> import { useCounterStore } from '@/stores/counter' const counter = useCounterStore() </script> <template> <div>{{ counter.count }}</div> <button @click="counter.increment">+1</button> </template>

3.3 状态持久化方案

前端状态刷新会丢失，我常用pinia-plugin-persistedstate实现持久化：

import { createPinia } from 'pinia' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' const pinia = createPinia() pinia.use(piniaPluginPersistedstate) // 在store中配置 export const useUserStore = defineStore('user', { persist: { key: 'user', paths: ['token'] } })

4. Axios网络请求封装

4.1 基础封装策略

我习惯将Axios封装成服务层，避免在组件中直接调用：

// utils/request.js import axios from 'axios' const service = axios.create({ baseURL: import.meta.env.VITE_API_BASE, timeout: 10000 }) // 请求拦截 service.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) // 响应拦截 service.interceptors.response.use( response => response.data, error => { if (error.response.status === 401) { router.push('/login') } return Promise.reject(error) } ) export default service

4.2 API模块化组织

按业务模块组织API请求更利于维护：

// api/user.js import request from '@/utils/request' export const login = (data) => request.post('/auth/login', data) export const getProfile = () => request.get('/user/profile') // 在组件中使用 import { login } from '@/api/user' const handleLogin = async () => { try { const user = await login(form.value) userStore.setUser(user) } catch (err) { console.error(err) } }

4.3 取消重复请求

在处理表单提交时，这个技巧非常实用：

const pendingMap = new Map() // 生成唯一key const generateKey = (config) => { return [config.method, config.url].join('&') } // 请求拦截 service.interceptors.request.use(config => { const key = generateKey(config) if (pendingMap.has(key)) { pendingMap.get(key).abort() } const controller = new AbortController() config.signal = controller.signal pendingMap.set(key, controller) return config }) // 响应拦截 service.interceptors.response.use(response => { const key = generateKey(response.config) pendingMap.delete(key) return response })

5. 项目实战：电商系统集成

5.1 项目结构设计

这是我常用的目录结构：

src/ ├── api/ # API请求 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── composables/ # 组合式函数 ├── router/ # 路由配置 ├── stores/ # Pinia状态 ├── utils/ # 工具函数 └── views/ # 页面组件

5.2 路由懒加载优化

使用动态import实现路由懒加载：

const routes = [ { path: '/product', component: () => import(/* webpackChunkName: "product" */ '@/views/Product.vue') } ]

配合webpack的魔法注释，可以自定义chunk名称，方便调试和分析包体积。

5.3 全局状态设计

电商系统典型的状态设计：

// stores/cart.js export const useCartStore = defineStore('cart', { state: () => ({ items: [], checkoutStatus: null }), getters: { totalPrice: (state) => { return state.items.reduce((total, item) => { return total + item.price * item.quantity }, 0) } }, actions: { addItem(product) { const existing = this.items.find(i => i.id === product.id) existing ? existing.quantity++ : this.items.push({ ...product, quantity: 1 }) }, async checkout() { const { data } = await api.checkout(this.items) this.items = [] this.checkoutStatus = 'success' } } })

5.4 性能优化实践

1. 请求合并：商品列表和分类可以并行请求

const [products, categories] = await Promise.all([ api.getProducts(), api.getCategories() ])

2. 数据缓存：使用Pinia持久化热门数据

// stores/products.js persist: { paths: ['hotProducts'] }

3. 组件懒加载：非首屏组件延迟加载

<template> <Suspense> <template #default> <ProductRecommendations /> </template> <template #fallback> <LoadingSpinner /> </template> </Suspense> </template> <script setup> const ProductRecommendations = defineAsyncComponent(() => import('@/components/ProductRecommendations.vue') ) </script>