3.1　登录静态页面

在views目录下新增login.vue页面并且在路由文件中定义登录的路由匹配规则，路由匹配规则示例代码如下。

访问/login进入login.vue组件，视图层代码如下。

CSS样式代码如下。

代码解析：

登录页面布局使用了Element Plus提供的Layout网格布局，el-row表示行，el-col表示列，其中每一行分为24个分栏。

登录页面为左右分栏布局，并且采用响应式布局。当浏览器大于1200像素时，左列占16个分栏，右列占8个分栏；当浏览器大于992像素时，左右两列各占12个分栏；当浏览器小于992像素时，左右两列各占24个分栏。

注意：

CSS采用less预处理器，在项目终端运行npm install less命令即可安装less预处理器。

返回浏览器，登录页面如图3-1所示。

图3-1

为了提高页面的交互效果，Element Plus提供了一套常用的图标集合—icon图标，使用方法分为以下两步。

（1）安装icon图标。运行下述命令安装icon图标。

npm install @element-plus/icons-vue

在login.vue页面的script标签中按需求导入用户名和密码图标，示例代码如下。

<script setup>
import { UserFilled, Lock } from '@element-plus/icons-vue'
</script>

（2）在组件中按需求导入图标。在template标签中引用导入的图标，示例代码如下。

icon图标的页面展示效果如图3-2所示。

图3-2