Vue3+tyepescript+ElementPlus+Axios前端技术栈

[Vue3 + Element Plus + Axios 技术栈介绍](#Vue3 + Element Plus + Axios 技术栈介绍)

[在项目中配置 Element Plus](#在项目中配置 Element Plus)

方式一：完整引入（简单但体积较大）

方式二：按需引入（推荐，减小打包体积）

[使用 Element Plus 组件](#使用 Element Plus 组件)

Vue3 + Element Plus + Axios 技术栈介绍

Vue3

最新的 Vue.js 版本，用于构建用户界面的渐进式JavaScript框架

使用 Composition API 和响应式系统管理组件状态

支持 TypeScript，具有更好的性能和更小的包体积

Element Plus

为 Vue3 设计的桌面端组件库

提供丰富的 UI 组件，如表格、表单、对话框、按钮等

支持按需引入，减少打包体积

Axios

基于 Promise 的 HTTP 客户端
可用于浏览器和 Node.js 中发送 HTTP 请求

支持请求拦截、响应拦截等功能

一、ElementPlus

Dialog 对话框 | Element Plus

cpp 复制代码

# 安装 Element Plus

npm install element-plus

# 如果需要使用 TypeScript 类型定义（推荐）
npm install @element-plus/icons-vue

在项目中配置 Element Plus

方式一：完整引入（简单但体积较大）

cpp 复制代码

// main.js 或 main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

方式二：按需引入（推荐，减小打包体积）

cpp 复制代码

首先安装 babel 插件：

npm install -D unplugin-vue-components unplugin-auto-import

在 Vite 配置中添加插件（vite.config.js）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

在 main.js 中无需手动引入组件：

javascript 复制代码

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// 无需引入 ElementPlus 和 CSS
const app = createApp(App)
app.mount('#app')

使用 Element Plus 组件

安装配置完成后，您就可以在 Vue 组件中直接使用 Element Plus 组件了：

javascript 复制代码

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
    <el-table :data="tableData">
      <el-table-column prop="name" label="名称"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
const tableData = [
  { name: '设备1' },
  { name: '设备2' }
]
</script>