前端整合

（1）Element Plus 安装使用

　　Element Plus 是一套为构建基于 Vue 3 的组件库而设计的 UI 组件库（UI Kit）。它为开发者提供了一套丰富的 UI 组件和扩展功能，帮助开发者快速构建高质量的 Web 应用。（https://element-plus.org/zh-CN/）

• 安装 npm install element-plus --save

2、项目实施

（1）创建项目

（2）简化项目

①删除App.vue多余内容，保留内容如下：

<script setup>

</script>

<template>


  <RouterView />
</template>

<style scoped>

</style>

② 修改router目录下index.js文件

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login,
    }
  ],
})

export default router

（3）登入页面编写

  ①、在main.js文件中配置element-plus，

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(router)
app.use(ElementPlus)
app.mount('#app')