elment plus vue3 spring

### 集成Element Plus与Vue3

为了使Vue3项目能够利用Element Plus组件库，首先需要安装必要的依赖项。通过npm或yarn来完成此操作：

npm install element-plus vue@next

或者使用yarn:

yarn add element-plus vue@next

之后，在`main.js`文件中引入并注册Element Plus[^1]。

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

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

这样就完成了前端部分对于Element Plus的基础配置工作。

### 与Spring后端交互

构建前后端分离的应用程序时，通常会采用RESTful API的方式让两者通信。在Spring Boot应用程序里定义API接口可以非常简便地实现这一目标。由于大多数Spring Boot应用只需要少量的Spring配置就能运行良好，因此开发者可以把更多精力放在业务逻辑上而不是框架本身的设置上面。

假设有一个简单的GET请求用于获取数据列表，则可以在Spring控制器内编写如下代码片段：

@RestController
@RequestMapping("/api/items")
public class ItemController {

    @GetMapping("")
    public ResponseEntity<List<Item>> getAllItems() {
        List<Item> items = itemService.findAll();
        return new ResponseEntity<>(items, HttpStatus.OK);
    }
}

而在Vue3这边则可以通过Axios发起HTTP请求读取这些资源：

<template>
  <div v-if="loading">Loading...</div>
  <el-table :data="tableData">
    <!-- 表格列定义 -->
  </el-table>
</template>

<script setup>
import axios from "axios";
import { ref, onMounted } from "vue";

let tableData = ref([]);
let loading = ref(true);

onMounted(() => {
  axios.get('/api/items')
       .then(response => (tableData.value = response.data))
       .finally(() => loading.value = false);
});
</script>

上述例子展示了如何创建一个表格展示来自服务器的数据，并且当页面加载完成后自动执行查询动作。