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