Vue 3.0全家桶实战：从Composition API到Vite构建

1. Vue 3.0 全家桶完整使用指南从入门到实战Vue 3.0作为当前最流行的前端框架之一其全家桶Vue Router、Vuex/Pinia、Vite等的完整使用一直是开发者关注的焦点。本文将带你全面掌握Vue 3.0全家桶的核心用法从基础配置到高级技巧涵盖实际开发中的各种场景。无论你是刚接触Vue的新手还是想升级到Vue 3.0的老手都能在这里找到实用的解决方案。2. Vue 3.0 核心特性解析2.1 Composition API 深度解析Vue 3.0最大的变革就是引入了Composition API它彻底改变了我们组织组件逻辑的方式。与Options API相比Composition API最大的优势在于逻辑复用和代码组织。通过setup()函数我们可以更灵活地组合和复用逻辑代码。import { ref, computed } from vue export default { setup() { const count ref(0) const double computed(() count.value * 2) function increment() { count.value } return { count, double, increment } } }在实际开发中我建议将复杂逻辑抽离到独立的composition函数中这样可以大大提高代码的可维护性。例如我们可以将上面的计数器逻辑抽离到useCounter.js中// useCounter.js import { ref, computed } from vue export function useCounter() { const count ref(0) const double computed(() count.value * 2) function increment() { count.value } return { count, double, increment } }注意在setup()函数中ref创建的响应式变量需要通过.value访问但在模板中会自动解包不需要.value2.2 响应式系统优化Vue 3.0的响应式系统完全重写基于Proxy实现带来了更好的性能和更丰富的功能。相比Vue 2.x的Object.definePropertyProxy可以检测到更多类型的变化包括数组索引变化、对象属性添加/删除等。const state reactive({ items: [] }) // Vue 2.x中无法检测到这种变化 state.items[0] new item // Vue 3.x中可以正常工作 watchEffect(() { console.log(state.items[0]) // 会响应式更新 })在实际项目中我经常使用watchEffect来处理副作用逻辑它比watch更简洁适用于不需要精确控制依赖的场景。3. Vue Router 4.x 完全指南3.1 路由基础配置Vue Router 4.x是专为Vue 3.0设计的路由版本。安装非常简单npm install vue-router4基本配置如下import { createRouter, createWebHistory } from vue-router const routes [ { path: /, component: Home }, { path: /about, component: () import(./views/About.vue) // 路由懒加载 } ] const router createRouter({ history: createWebHistory(), routes })在Vue 3.0中路由的使用方式有所变化import { useRouter, useRoute } from vue-router export default { setup() { const router useRouter() const route useRoute() function navigate() { router.push(/about) } return { navigate } } }3.2 路由高级技巧在实际项目中路由守卫是非常有用的功能。Vue Router 4.x提供了全局守卫、路由独享守卫和组件内守卫。router.beforeEach((to, from) { // 返回false取消导航 if (!isAuthenticated() to.meta.requiresAuth) { return { path: /login } } })对于大型项目我建议使用路由模块化将路由配置拆分到不同文件中然后在主路由文件中合并// router/index.js import { createRouter } from vue-router import adminRoutes from ./admin import userRoutes from ./user const router createRouter({ // ...其他配置 routes: [ ...adminRoutes, ...userRoutes ] })4. 状态管理Vuex 4 vs Pinia4.1 Vuex 4 核心概念Vuex 4是Vue 3.0的官方状态管理库基本概念与Vuex 3相同import { createStore } from vuex const store createStore({ state: { count: 0 }, mutations: { increment(state) { state.count } }, actions: { incrementAsync({ commit }) { setTimeout(() { commit(increment) }, 1000) } }, getters: { doubleCount(state) { return state.count * 2 } } })在组件中使用import { useStore } from vuex export default { setup() { const store useStore() return { count: computed(() store.state.count), double: computed(() store.getters.doubleCount), increment: () store.commit(increment), incrementAsync: () store.dispatch(incrementAsync) } } }4.2 Pinia新一代状态管理Pinia是Vue 3.0官方推荐的状态管理库相比Vuex更简单、更符合Composition API的风格import { defineStore } from pinia export const useCounterStore defineStore(counter, { state: () ({ count: 0 }), actions: { increment() { this.count }, async incrementAsync() { setTimeout(() { this.increment() }, 1000) } }, getters: { doubleCount: (state) state.count * 2 } })在组件中使用import { useCounterStore } from /stores/counter export default { setup() { const counter useCounterStore() return { counter } } }Pinia的优势在于更简洁的API更好的TypeScript支持不需要mutations直接修改state模块化设计更自然5. Vite下一代前端构建工具5.1 Vite基础配置Vite是Vue 3.0官方推荐的构建工具相比Webpack有更快的启动速度和热更新速度。创建Vue 3.0项目npm create vitelatest my-vue-app --template vue基本项目结构my-vue-app/ ├── node_modules/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.js ├── vite.config.js └── package.json5.2 Vite高级配置在vite.config.js中我们可以进行各种自定义配置import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], resolve: { alias: { : path.resolve(__dirname, ./src) } }, server: { port: 8080, proxy: { /api: { target: http://localhost:3000, changeOrigin: true } } } })对于大型项目我建议使用Vite的按需加载功能可以显著提高构建速度// vite.config.js export default defineConfig({ build: { rollupOptions: { output: { manualChunks: { vendor: [vue, vue-router, pinia], chart: [echarts], utils: [lodash, dayjs] } } } } })6. 实战构建一个完整的Vue 3.0应用6.1 项目结构设计一个良好的项目结构对维护大型应用至关重要。我推荐的结构如下src/ ├── api/ # API请求封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── composables/ # Composition函数 ├── router/ # 路由配置 ├── stores/ # Pinia状态管理 ├── styles/ # 全局样式 ├── utils/ # 工具函数 ├── views/ # 页面组件 ├── App.vue # 根组件 └── main.js # 应用入口6.2 API请求封装使用axios封装API请求// api/http.js import axios from axios const http axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000 }) // 请求拦截器 http.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) // 响应拦截器 http.interceptors.response.use( response response.data, error { if (error.response.status 401) { // 处理未授权 } return Promise.reject(error) } ) export default http6.3 全局状态管理使用Pinia管理用户状态// stores/user.js import { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ user: null, token: null }), actions: { login(payload) { return api.login(payload).then(res { this.user res.user this.token res.token localStorage.setItem(token, res.token) }) }, logout() { this.user null this.token null localStorage.removeItem(token) } }, getters: { isAuthenticated: state !!state.token } })6.4 路由权限控制结合路由守卫实现权限控制// router/index.js import { createRouter } from vue-router import { useUserStore } from /stores/user const router createRouter({ // ...路由配置 }) router.beforeEach((to) { const userStore useUserStore() if (to.meta.requiresAuth !userStore.isAuthenticated) { return { path: /login, query: { redirect: to.fullPath } } } if (to.meta.guestOnly userStore.isAuthenticated) { return { path: / } } })7. 性能优化与最佳实践7.1 组件性能优化Vue 3.0提供了多种性能优化手段使用v-memo优化大型列表div v-foritem in list :keyitem.id v-memo[item.id selected] {{ item.text }} /div合理使用异步组件const AsyncComponent defineAsyncComponent(() import(./components/HeavyComponent.vue) )使用keep-alive缓存组件状态router-view v-slot{ Component } keep-alive component :isComponent / /keep-alive /router-view7.2 构建优化使用Vite的代码分割// vite.config.js export default defineConfig({ build: { rollupOptions: { output: { manualChunks: { vendor: [vue, vue-router, pinia] } } } } })开启gzip压缩npm install vite-plugin-compression -D// vite.config.js import viteCompression from vite-plugin-compression export default defineConfig({ plugins: [ viteCompression() ] })7.3 开发体验优化配置路径别名// vite.config.js export default defineConfig({ resolve: { alias: { : path.resolve(__dirname, ./src) } } })使用unplugin-auto-import自动导入APInpm install unplugin-auto-import -D// vite.config.js import AutoImport from unplugin-auto-import/vite export default defineConfig({ plugins: [ AutoImport({ imports: [vue, vue-router, pinia] }) ] })8. 常见问题与解决方案8.1 响应式问题排查为什么我的ref变量不更新确保在setup()函数中使用ref确保在修改值时使用.value确保在模板中没有使用.value为什么我的reactive对象不更新确保使用reactive包装对象避免直接替换整个对象使用Object.assign或展开运算符对于数组使用push/splice等方法而不是直接索引赋值8.2 路由问题排查路由跳转不工作确保router实例已正确挂载到应用确保使用了useRouter()而不是直接导入router实例检查路由守卫是否阻止了导航动态路由不匹配确保路由路径参数格式正确如/user/:id确保使用了正确的导航方法push/replace8.3 状态管理问题Pinia状态不持久化考虑使用pinia-plugin-persistedstate插件或者手动实现localStorage/sessionStorage持久化Vuex action不触发确保使用dispatch而不是commit调用action检查action是否返回Promise确保没有在mutations中直接调用异步代码9. 项目部署与持续集成9.1 生产环境构建npm run build构建完成后dist目录就是可以部署的静态文件。对于不同的服务器部署方式略有不同Nginx配置示例server { listen 80; server_name yourdomain.com; location / { root /path/to/dist; try_files $uri $uri/ /index.html; } }使用Docker部署FROM nginx:alpine COPY dist /usr/share/nginx/html EXPOSE 80 CMD [nginx, -g, daemon off;]9.2 CI/CD配置以GitHub Actions为例name: Deploy to Production on: push: branches: [main] jobs: build-and-deploy: runs-on: ubuntu-latest steps: - uses: actions/checkoutv2 - name: Install dependencies run: npm install - name: Build project run: npm run build - name: Deploy to server uses: appleboy/scp-actionmaster with: host: ${{ secrets.SSH_HOST }} username: ${{ secrets.SSH_USER }} key: ${{ secrets.SSH_KEY }} source: dist/* target: /var/www/html10. 生态工具推荐10.1 UI组件库Element Plus适合企业级后台系统Vant适合移动端应用Naive UI高质量组件库设计精美Quasar全功能框架支持多平台10.2 开发工具Vue DevTools必备的浏览器扩展VolarVue 3.0官方推荐的VSCode扩展ESLint Prettier代码风格检查与格式化Vitest基于Vite的测试框架10.3 实用库VueUse丰富的Composition工具集AxiosHTTP客户端Day.js轻量级日期处理Lodash实用工具函数在实际项目中我通常会根据项目需求选择合适的工具组合。对于中小型项目Element Plus Axios VueUse的组合已经能满足大部分需求对于大型复杂项目可能需要更全面的解决方案如Quasar。