Vue+Element-ui创建一个登陆页面

最新推荐文章于 2025-04-13 21:36:50 发布

李真真爱编码

最新推荐文章于 2025-04-13 21:36:50 发布

阅读量1w

点赞数 5

文章标签： vue.js node.js

本文链接：https://blog.youkuaiyun.com/qq_44155199/article/details/107871547

版权

本文将指导你如何利用Vue.js和Element-ui构建一个登录页面。步骤包括：创建Vue项目，安装Element-ui和sass-loader，编写相关代码，设置路由，并在main.js和App.vue中进行必要修改。完成这些步骤后，运行项目即可展示登录页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue+Element-ui创建一个登陆页面

效果图

在这里插入图片描述

1.创建一个Vue项目
2.安装element-ui组件
3.安装sass-loader组件
4.编写代码
5.运行项目

在当前目录下安装elemrnt-ui

PS D:\HBuilder\filer\MeetingManage> npm install element-ui -S

随后安装sass-loader

PS D:\HBuilder\filer\MeetingManage> npm install sass-loader node-sass --save-dev

开始编写代码
在components文件夹下创建一个content.vue文件

<template>
<div>
  <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
    <h3 class="login-title">欢迎登录</h3>
    <el-form-item label="账号" prop="username">
      <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type=<