Vue3 纯色背景登录界面

一、页面效果

二、页面代码

（1）在src 文件夹下创建 views 文件夹存放页面文件

（2）引入Element Plus标签

① 安装

npm install @element-plus/icons-vue

或

pnpm install @element-plus/icons-vue

② 修改 main.js 文件

修改前代码：

import { createApp } from 'vue'
import './styles.css'
import App from './App.vue'

createApp(App)mount('#app')

修改后代码：

import { createApp } from 'vue'
import './styles.css'
import App from './App.vue'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.mount('#app')

（3）创建LoginView.vue 文件

页面代码

（4）修改 App.vue 文件 

修改前代码

修改后代码