Vue3 + Vite项目实战：从零搭建企业级前端架构
<h2>前言</h2><p>Vue3已经正式发布，成为前端开发的主流框架。结合Vite构建工具，开发体验大幅提升。本文从零搭建一个企业级Vue3项目，包含路由、状态管理、API封装、权限控制等核心模块。</p>
<h2>一、环境准备</h2>
<pre><code># Node.js >= 16
node -v
# 创建项目
npm create vite@latest my-vue3-app -- --template vue
cd my-vue3-app
npm install
npm run dev</code></pre>
<h2>二、项目目录结构</h2>
<pre><code>src/
├── api/ # API接口
├── assets/ # 静态资源
├── components/ # 公共组件
├── composables/ # 组合式函数
├── layouts/ # 布局组件
├── router/ # 路由配置
├── stores/ # Pinia状态管理
├── utils/ # 工具函数
├── views/ # 页面组件
├── App.vue
└── main.js</code></pre>
<h2>三、安装必要依赖</h2>
<pre><code>npm install vue-router@4 pinia axios element-plus
npm install -D unplugin-auto-import unplugin-vue-components</code></pre>
<h2>四、配置路由</h2>
<pre><code>// 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</code></pre>
<h2>五、状态管理（Pinia）</h2>
<pre><code>// 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 }
})</code></pre>
<h2>六、API封装</h2>
<pre><code>// 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</code></pre>
<h2>七、Setup语法糖使用</h2>
<pre><code><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></code></pre>
<h2>八、常用组件示例</h2>
<pre><code><!-- 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></code></pre>
<h2>九、性能优化技巧</h2>
<ul>
<li><strong>路由懒加载</strong>：使用`() => import()`按需加载</li>
<li><strong>组件懒加载</strong>：`defineAsyncComponent`</li>
<li><strong>KeepAlive</strong>：缓存组件状态</li>
<li><strong>虚拟列表</strong>：大数据列表使用vue-virtual-scroller</li>
</ul>
<h2>总结</h2>
<p>Vue3 + Vite的组合是现代前端开发的标配。掌握路由、状态管理、API封装等核心技能，就能快速搭建企业级应用。</p>
<p><em>本文由AI辅助创作。</em></p>
</div>
<div id="MySignature" role="contentinfo">
---
📌 **如果觉得文章对你有帮助，欢迎点赞👍收藏⭐！**
💬 有问题或建议？欢迎在评论区留言讨论~
🔗 更多技术干货请关注作者：弥烟袅绕
📚 本文地址：https://www.cnblogs.com/czlws/p/19790969<br><br>
来源：https://www.cnblogs.com/czlws/p/19790969
頁:
[1]