Vue3 + Vite项目实战：从零搭建企业级前端架构

华夏教育集团

前言

Vue3已经正式发布，成为前端开发的主流框架。结合Vite构建工具，开发体验大幅提升。本文从零搭建一个企业级Vue3项目，包含路由、状态管理、API封装、权限控制等核心模块。

一、环境准备

# Node.js >= 16
node -v

# 创建项目
npm create vite@latest my-vue3-app -- --template vue

cd my-vue3-app
npm install
npm run dev

二、项目目录结构

src/
├── api/           # API接口
├── assets/        # 静态资源
├── components/    # 公共组件
├── composables/    # 组合式函数
├── layouts/       # 布局组件
├── router/        # 路由配置
├── stores/        # Pinia状态管理
├── utils/         # 工具函数
├── views/         # 页面组件
├── App.vue
└── main.js

三、安装必要依赖

npm install vue-router@4 pinia axios element-plus
npm install -D unplugin-auto-import unplugin-vue-components

四、配置路由

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

const routes = [
  {
    path: '/',
    component: () => import('@/layouts/MainLayout.vue'),
    children: [
      { path: '', name: 'Home', component: () => import('@/views/Home.vue') },
      { path: '/about', name: 'About', component: () => import('@/views/About.vue') },
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

五、状态管理（Pinia）

// stores/user.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
  const token = ref(localStorage.getItem('token') || '')
  const userInfo = ref(null)

  const isLoggedIn = computed(() => !!token.value)

  function login(credentials) {
    // 登录逻辑
    token.value = 'mock-token'
    localStorage.setItem('token', token.value)
  }

  function logout() {
    token.value = ''
    userInfo.value = null
    localStorage.removeItem('token')
  }

  return { token, userInfo, isLoggedIn, login, logout }
})

六、API封装

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

const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) config.headers.Authorization = `Bearer ${token}`
    return config
  },
  error => Promise.reject(error)
)

// 响应拦截器
service.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response?.status === 401) {
      // token过期，跳转登录
    }
    return Promise.reject(error)
  }
)

export default service

七、Setup语法糖使用

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}

onMounted(() => {
  console.log('组件挂载完成')
})
</script>

<template>
  <div>
    <p>Count: {{ count }}, Doubled: {{ doubled }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

八、常用组件示例

<!-- TableList.vue -->
<script setup>
defineProps({
  data: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false }
})
defineEmits(['row-click', 'delete'])
</script>

<template>
  <el-table :data="data" v-loading="loading" @row-click="$emit('row-click', $event)">
    <slot />
  </el-table>
</template>

九、性能优化技巧

• 路由懒加载：使用`() => import()`按需加载
• 组件懒加载：`defineAsyncComponent`
• KeepAlive：缓存组件状态
• 虚拟列表：大数据列表使用vue-virtual-scroller

总结

Vue3 + Vite的组合是现代前端开发的标配。掌握路由、状态管理、API封装等核心技能，就能快速搭建企业级应用。

本文由AI辅助创作。

--- 📌 **如果觉得文章对你有帮助，欢迎点赞👍收藏⭐！** 💬 有问题或建议？欢迎在评论区留言讨论~ 🔗 更多技术干货请关注作者：弥烟袅绕 📚 本文地址：https://www.cnblogs.com/czlws/p/19790969

来源：https://www.cnblogs.com/czlws/p/19790969