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

简介: 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的功能规划图:

image.gif编辑

2搭建环境

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

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

创建会让选择一些配置:(后面会出一期详细介绍)image.gif编辑

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

其次进行运行项目 npm run serve

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

image.gif编辑

       2.2整合element UI

进入项目目录下面:

image.gif编辑

vue add element 执行该命令

image.gif编辑

image.gif编辑

3.布局容器

       3.1布局容器

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

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

    image.gif编辑

    步骤二:修改src/App.vue所有内容,配置一级路由image.gif编辑

    步骤三:配置路由

    image.gif编辑

    image.gif编辑

    步骤四:编写Home.vue页面

    Element - The world's most popular Vue UI frameworkn

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

    image.gif编辑

    image.gif编辑

    复制到Home.vue

    image.gif编辑

    展示结果如下:image.gif编辑

           3.2reset.css

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

    去官网复制相关代码:

    在vue项目中创建

      1. 并创建 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;
      }
      1. image.gif进入main.js中插入如图所示:
        image.gif编辑
        现在Home.vue展示页面内容为:
        image.gif编辑

             3.3跨屏填充

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

      image.gif编辑

      第一步首页编写(App.vue)样式:如图所示

      image.gif编辑

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

      image.gif编辑

      即可达到跨屏填充

      4.表单

             4.1简单表单:登录

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

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

      image.gif编辑

      第二步骤编写Login.vue页面

      image.gif编辑

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

      image.gif编辑

      image.gif编辑

      选择该表单中合适代码:(下面是我的选用)

      <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>

      image.gif

      最后完成效果:

      image.gif编辑

             4.2复杂表单:注册

      效果图如下:

      image.gif编辑

      <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>

      image.gif

       

      相关文章
      |
      11天前
      |
      人工智能 JavaScript 关系型数据库
      【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
      【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
      57 14
      【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
      |
      4月前
      |
      JavaScript 索引
      Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
      Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
      315 0
      |
      4月前
      |
      存储 JavaScript 前端开发
      vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
      vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
      53 1
      |
      4月前
      |
      存储 JavaScript API
      vue尚品汇商城项目-day05【33.token令牌理解+34.用户登录携带token获取用户信息+35.退出登录】
      vue尚品汇商城项目-day05【33.token令牌理解+34.用户登录携带token获取用户信息+35.退出登录】
      49 0
      |
      5月前
      |
      JavaScript
      Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
      这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
      Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
      |
      6月前
      |
      开发者 Android开发 UED
      打造流畅应用:深入探索如何在Xamarin项目中选择并实现最佳UI/UX设计的实践指南
      【8月更文挑战第31天】在数字化时代,UI/UX设计成为应用成功的关键。Xamarin以高效开发和强大兼容性著称,其设计理念“一次编写,处处运行”需充分适应多平台特性,提供一致体验。选择Xamarin.Forms或结合Xamarin.Native可实现跨平台UI设计;遵循各平台设计指南,保持布局一致性和简洁性;通过用户测试不断优化。最终,结合技术和用户需求,打造美观实用的应用,脱颖而出。
      76 0
      |
      6月前
      |
      JavaScript 开发者 UED
      Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
      【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
      351 0
      |
      6月前
      |
      JavaScript 前端开发 安全
      [译] 在 Vue 组件中分离 UI 和业务逻辑。
      [译] 在 Vue 组件中分离 UI 和业务逻辑。
      |
      6月前
      |
      JavaScript
      vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
      vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
      351 49
      |
      11天前
      |
      前端开发 安全 开发工具
      【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
      【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
      141 90
      【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

      热门文章

      最新文章