基于Vue项目整合Element UI 做登录和注册表单，如果你看不懂就是我的问题。

2022-08-23 646

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 1什么是Element Ul1.1概述1.2 功能结构2搭建环境

1什么是Element Ul

1.1 概述：

Element ，一套为开发者，设计师和产品经理准备的基于Vue2.0的桌面端组件库。

1，Element UI 是基于Vue2.0的

2，Element UI提供一组组件

3，Element UI提供组件的参考实例，直接复制

1.2 功能结构

下面是基于Vue和Element的功能规划图：

编辑

2搭建环境

2.1创建vue项目（前端选用的Visual Studio Code编辑器）

首先进行创建项目：vue create day100；项目名可以自定义

创建会让选择一些配置：（后面会出一期详细介绍）编辑

进入刚刚创建的目录下 cd .\day14_element_exam\

其次进行运行项目 npm run serve

即出现该页面证明vue项目创建成功：

编辑

2.2整合element UI

进入项目目录下面：

编辑

vue add element 执行该命令

编辑

3.布局容器

3.1布局容器

使用element-ui的布局容器(Container) 进行页面布局。对页面进行划分（上、下、左、中）
编辑

步骤一：修改src/main.js 调整 element-ui 导入位置

编辑

步骤二：修改src/App.vue所有内容，配置一级路由编辑

步骤三：配置路由

编辑

步骤四：编写Home.vue页面

Element - The world's most popular Vue UI frameworkn

进入官方网站：进入布局容器复制代码

编辑

复制到Home.vue

编辑

展示结果如下：编辑

3.2reset.css

在上图中可以清晰看到整个boby中存在一圈空白，开发中通常选择重置

去官网复制相关代码：

在vue项目中创建

并创建 assets/reset.css ,拷贝样式 (复制下面样式即可)

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

进入main.js中插入如图所示：
编辑
现在Home.vue展示页面内容为：
编辑

3.3跨屏填充

下面做一个跨屏填充现在效果如图所示：

编辑

第一步首页编写（App.vue）样式：如图所示

编辑

第二步Home.vue进行编写样式：如图所示

编辑

即可达到跨屏填充

4.表单

4.1简单表单：登录

下面做一个基于element ui的登录表单（Login.vue）

第一步：配置路由进行访问：如图所示

编辑

第二步骤编写Login.vue页面

编辑

第三步去官网element ui官网（网站链接已经放在上面）找到表单组件进行复制代码更改

编辑

选择该表单中合适代码：（下面是我的选用）

<template>
<div class="login">
  <!-- 选择一组卡片 -->
  <el-card class="login-card">
    <div slot="header" class="clearfix">
      <span>爱吃豆的土豆</span>
    </div>
    <el-form ref="form" :model="userVo" label-width="80px">
      <el-form-item label="用户姓名">
        <el-input
          v-model="userVo.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户密码">
        <el-input
          placeholder="请输入密码"
          v-model="userVo.password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">登录</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  </div>
</template>
<script>
export default {
  name: "SpaceworkSpaLogin",
  data() {
    return {
      //定义一个对象接收参数
      userVo: {},
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style>
.login-card{
    width: 500px;
}
.login {
  height: 100%;
  /* flex样式呈现*/
  display: flex;
  /*垂直排列*/
  flex-direction: column;
  align-items: center; /*由于flex-direction: column，因此align-items代表的是水平方向*/
  justify-content: center; /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
}
</style>

最后完成效果:

编辑

4.2复杂表单：注册

效果图如下：

编辑

<template>
<div class="register">
  <el-card class="register-card">
       <div slot="header" class="clearfix">
        <el-button type="text" prefix-icon="el-icon-s-home">注册</el-button>
      </div>
    <el-form label-position="left" label-width="80px" :model="user">
      <el-form-item label="用户名">
        <el-input
          v-model="user.username"
          placeholder="请输入用户名"
          prefix-icon="el-icon-user"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          placeholder="请输入密码"
          v-model="user.password"
          prefix-icon="el-icon-lock"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input
          placeholder="请输入确认密码"
          v-model="user.repassword"
          prefix-icon="el-icon-lock"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="user.birthday"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="学历">
        <el-select v-model="user.education" placeholder="请选择学历">
          <el-option label="本科" value="shanghai"></el-option>
          <el-option label="硕士" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="user.sex">
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动性质">
        <el-checkbox-group v-model="user.hobbies">
          <el-checkbox label="cy" name="type">抽烟</el-checkbox>
          <el-checkbox label="hj" name="type">喝酒</el-checkbox>
          <el-checkbox label="tf" name="type">烫头</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="婚否">
        <el-switch v-model="user.marry"></el-switch>
      </el-form-item>
      <el-form-item label="省市县">
        <div class="block">
          <el-cascader
            v-model="user.city"
            :options="options"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange"
          ></el-cascader>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">注册</el-button>
        <el-button type="info">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- {{ user }} -->
  </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        hobbies: [],
        sex:'2'
        },
        options:[{
            value: 'prevence',
          label: '江苏省',
            children: [{
            value: 'shi',
            label: '宿迁市',
             children: [{
              value: 'xian',
              label: '沭阳县'
            }, {
              value: 'xian',
              label: '泗阳县'
            },]
            }]
        }]
    };
  },
  mounted() {},
  methods: {
       handleChange(value) {
        console.log(value);
      }
  },
};
</script>
<style>
.register{
     height: 100%;
  /* flex样式呈现*/
  display: flex;
  /*垂直排列*/
  flex-direction: column;
  align-items: center; /*由于flex-direction: column，因此align-items代表的是水平方向*/
  justify-content: center; /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
}
.register-card {
  width: 500px;
}
</style>

基于Vue项目整合Element UI 做登录和注册表单，如果你看不懂就是我的问题。

1什么是Element Ul

1.1 概述：

1.2 功能结构

2搭建环境

2.1创建vue项目（前端选用的Visual Studio Code编辑器）

2.2整合element UI

3.布局容器

3.1布局容器

3.2reset.css

3.3跨屏填充

4.表单

4.1简单表单：登录

编辑

4.2复杂表单：注册

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

基于Vue项目整合Element UI 做登录和注册表单，如果你看不懂就是我的问题。

1什么是Element Ul

1.1 概述：

1.2 功能结构

2搭建环境

2.1创建vue项目（前端选用的Visual Studio Code编辑器）

2.2整合element UI

3.布局容器

3.1布局容器

3.2reset.css

3.3跨屏填充

4.表单

4.1简单表单：登录

编辑

4.2复杂表单：注册

热门文章

最新文章

相关课程

相关电子书