Vue全家桶

原创已于 2025-05-16 14:52:32 修改 · 置顶 · 352 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2025-05-14 16:02:10 首次发布

今天做项目，客户(ZWN)要求必须使用以下技术

vue3+setup语法糖+组合式api
vue-router
axios
pinia
ui框架Element plus

那这里，刚好总结一下这些技术（实例解释）

1. Vue 3 + Setup语法糖 + 组合式API

核心特性：
- 组合式API：通过 ref、reactive 管理响应式数据，computed 和 watch 处理逻辑，替代 Options API 的分散式代码结构。
- Setup语法糖：使用 <script setup> 简化代码，无需显式 return，直接声明变量/函数即可暴露给模板。
- 逻辑复用：通过自定义组合函数（Composables）封装可复用的业务逻辑（如用户权限校验）。
优势：代码更简洁、逻辑更聚合，适合复杂组件开发。

// Setup语法糖

<script setup>

// 组合式API

import { onMounted, ref } from 'vue';

const form = ref({})  // ref响应式

onMounted(() => {})   // 生命周期钩子

...

</script>

2. Vue Router

作用：实现单页面应用（SPA）的路由管理。
关键功能：
- 定义路由表（routes），配置路径与组件的映射关系。
- 通过 <router-view> 渲染组件，<router-link> 实现导航。
- 导航守卫（beforeEach）实现权限控制或路由拦截。
动态路由：支持参数化路径（如 /user/:id）和懒加载（component: () => import(...)）。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/customers',
    name: 'Customers',
    component: () => import('../views/Customers.vue')
  }
]

3. Axios

角色：基于 Promise 的 HTTP 客户端，用于前后端数据交互。
常用实践：
- 封装全局实例：配置 baseURL、请求拦截器（添加 Token）、响应拦截器（统一错误处理）。
- 结合 async/await 处理异步请求，替代回调地狱。
- 与 Pinia 配合，将数据请求逻辑集中在 Store 中。

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 5000
})

// 客户管理API
export const customerAPI = {
  getAll: (keyword = '') => api.get('/customers', { params: { keyword } }),
  create: (data) => api.post('/customers', data),
  update: (id, data) => api.put(`/customers/${id}`, data),
  delete: (id) => api.delete(`/customers/${id}`)
}
...

4. Pinia

定位：Vue 官方推荐的状态管理库，替代 Vuex。
核心概念：
- Store：通过 defineStore 定义，包含 state（数据）、getters（计算属性）、actions（同步/异步方法）。
- 模块化：天然支持多 Store 拆分，避免单一 Store 臃肿。
优势：TypeScript 友好、API 简洁，与组合式 API 风格无缝衔接。

const pinia = createPinia()

// Pinia Store - 定义数据管理store
export const useDataStore = defineStore('data', () => {
  // 状态定义
  const customers = ref([])
  const books = ref([])
  const products = ref([])
  const loading = ref(false)

  // Actions
  const fetchCustomers = async (keyword = '') => {
    loading.value = true
    try {
      const response = await customerAPI.getAll(keyword)
      customers.value = response.data
    } catch (error) {
      console.error('获取客户数据失败:', error)
    } finally {
      loading.value = false
    }
  }
...
})

5. Element Plus

定位：基于 Vue 3 的 UI 组件库，提供丰富的企业级组件。
典型组件：表单（el-form）、表格（el-table）、弹窗（el-dialog）、通知（el-message）。
按需引入：通过 unplugin-vue-components 插件自动导入组件，减少打包体积。
定制能力：支持主题定制、国际化（多语言）配置。

    <el-table :data="store.customers" style="width: 100%" v-loading="store.loading">
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="name" label="姓名" width="150" />
      <el-table-column prop="phone" label="电话" width="150" />
      <el-table-column prop="email" label="邮箱" width="220" />
      <el-table-column prop="address" label="地址" min-width="250" />
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

协作优势总结

高效开发：组合式 API + Element Plus 快速构建界面。
状态清晰：Pinia 集中管理全局状态（如用户登录信息）。
路由可控：Vue Router 实现细粒度的页面跳转与权限管理。
数据流规范：Axios 拦截器统一处理请求/响应，提升可维护性。
维护友好：模块化设计（Store、Composables）便于长期迭代。

适合中后台管理系统、数据可视化等复杂场景，满足客户对技术前瞻性和工程规范的要求！

6. Vite（补充）

定位：下一代前端构建工具，替代 Webpack，专为现代浏览器和框架设计。
核心特性：
- 极速启动：基于原生 ES 模块（ESM）和按需编译，开发服务器冷启动秒级完成。
- 高效热更新（HMR）：仅编译修改的模块，毫秒级更新，保持应用状态不丢失。
- 开箱即用：内置对 Vue、TypeScript、CSS 预处理器等的支持，无需复杂配置。
- 生产优化：基于 Rollup 的构建流程，自动代码分割、异步加载、Tree-shaking。
关键配置：
- 插件生态：通过插件扩展功能（如 @vitejs/plugin-vue 支持 Vue 3 单文件组件）。
- 环境变量：通过 .env 文件管理多环境变量，区分开发、测试、生产配置。
- 路径别名：简化模块导入路径（如 @ 指向 /src）。

与 Element Plus 整合：

// vite.config.js
import AutoImport from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()] // 自动导入 Element Plus 组件
    })
  ]
}

技术栈整合补充说明

项目初始化：
```
npm create vite@latest my-project -- --template vue
```
一键生成基于 Vue 3 + Vite 的项目结构，天然支持组合式 API 和 TypeScript。
开发体验提升：
- 开发阶段：通过 npm run dev 启动 Vite 开发服务器，享受极速响应。
- 生产构建：npm run build 生成优化后的静态资源，自动代码分割和压缩。
与现有技术协作：
- Pinia/Vue Router：Vite 天然支持 Vue 生态库，无需额外配置。
- Axios 拦截器：在 src/utils/request.js 中封装全局 Axios 实例，Vite 通过 ESM 自动处理依赖。

协作优势补充

工程化提效：Vite 彻底解决传统构建工具速度瓶颈，开发阶段构建耗时降低 90% 以上。
标准化配置：Vite 约定大于配置，减少 Webpack 复杂性的同时，允许通过插件灵活扩展。
未来兼容性：基于 ESM 的构建流程，天然支持浏览器新特性（如动态导入、CSS 变量）。

完整架构流程图

Vite 核心
│
├─ 开发服务器（ESM 按需编译）
├─ 构建引擎（Rollup 生产优化）
│
└─ 技术栈整合
   ├─ Vue 3（组合式 API + Setup 语法糖）
   ├─ Pinia（状态管理）
   ├─ Vue Router（路由控制）
   ├─ Axios（HTTP 请求）
   └─ Element Plus（UI 组件）

整合 Vite 后，技术栈覆盖开发工具、UI 框架、状态管理、路由、请求库，形成高效、现代的全链路解决方案，尤其适合对开发效率和性能有高要求的项目！