vue+elementUI完成注册及登陆

一、vue怎么引入和配置使用element-ui框架

使用vue-cli脚手架工具创建一个vue项目

 vue init webpack 项目名称（必要要英文）

npm安装elementUI

详细安装步骤
https://blog.csdn.net/qq_46964039/article/details/108147317

加载完之后

进入这个文件中，然后进行下载一些东西

 npm install element-ui -S                  #安装element-ui模块

注：重要的事情说三遍：在指定位置!!!在指定位置!!!在指定位置!!!~~~添加三行代码

然后再npm run dev 启动项目
打开HBuilder把vuepro这个文件放进去

在项目中src目录下找到main.js，并在指定位置添加三行代码（main.js是入口文件，所以在这里引入就行，页面就不用引入了）

import ElementUI from 'element-ui' //新添加1
 
import 'element-ui/lib/theme-chalk/index.css' //新添加2

Vue.use(ElementUI)   //新添加3

二、写登录/注册操作步骤

1、先到element的官网找到我们需要的界面样式

https://element.eleme.cn/#/zh-CN

2、登录与注册都是表单类型的，找到组件，在找到表单，从表单中找到一个适合的表单样式

再copy这一段代码，进行修改就是我们需要的样子了

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

给一个样式，添加到App.vue和login.vue中

当然可以也可以自己写

App.vue

<style> 
html,
body {
   
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}
#app {
   
    font-family: "Avenir", Helvetica, Arial, sans-serif