vue-element-admin——登录页面添加自定义背景

vue-element-admin 初始是纯色背景，下面添加一张自己选的背景图片。

0. 效果图

初始效果：

更改背景后效果：

1. 操作步骤

1.1 准备图片

准备一张想要用作背景的图片，放在下面路径

vue-element-admin-master\src\assets\login_images\login_bg.jpg

1.2 更改代码

打开下面路径的 index.vue 文件

vue-element-admin-master\src\views\login\index.vue

对 .login-container 代码块内代码做如下图所示修改（代码在图片下面）。

首先将下面代码注释掉

  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

然后在下面添加以下代码

  width: 100%;
  height: 100%;
  background-image: url("../../assets/login_images/login_bg.jpg");
  background-size: cover;
  background-position: center;
  position: relative;

2. 保存并运行代码

保存代码后，在终端中输入

npm run dev

然后在浏览器中输入以下链接即可预览效果

http://localhost:9527