精华内容
下载资源
问答
  • ElementUI 登录

    2020-06-17 10:47:44
    最基础的ElementUI -登录页,适合新手查看,下载后运行npm install npm run dev然后访问http://localhost:8080/#/login就可以看到登录页面
  • 登录时的填写密码显示文本或者显示黑点切换其实就是两个div的v-if/else判断; 下面详细说下具体实现过程;(附代码图) 第一步: 默认密码显示的是黑点: 代码部分这样写: 红线框圈住的①就是密码显示为...

    登录时的填写密码显示文本或者显示黑点切换其实就是两个div的v-if/else判断;

    下面详细说下具体实现过程;(附代码图)

    第一步:

         默认密码显示的是黑点:

    显示密码文本:

    代码部分这样写:

    红线框圈住的①就是密码显示为文本的部分;

    这里需要注意的一个重点是密码显示为黑点还是文本最主要是看你给input框的type设置的是什么值,如果想显示为文本就type=‘text’,如果想显示为黑点就type=“password”(如下图)

    第二步:

        不过有人会疑问你设置的不是文本吗为什么显示的是黑点?

       这就是第二部分 要说的点击事件切换密码;

      我们给显示文本的div和显示黑点的div绑定了v-if和v-else

     然后分别给两个div绑定了事件;(如下图)

    然后默认我们在数据里把closePssword设置为false就初始化时显示的是黑点;

    然后再通过点击切换密码显示是文本还是黑点(见下图)

    大概的实现流程就是这样;

     

     

    展开全文
  • 1.项目搭建 开始工作参考这个博客 创建一一个名为hello-vue 的工程vue init webpack hello-vue 安装依赖,我们需要安装vue-router、element-ui、 sass-loader 和node-sass四个插件 进入工程目录:cd hello-vue ...

    1.项目搭建

    开始工作参考这个博客

    1. 创建一一个名为hello-vue 的工程vue init webpack hello-vue
    2. 安装依赖,我们需要安装vue-router、element-ui、 sass-loader 和node-sass四个插件

    进入工程目录:cd hello-vue

    安装vue-router:npm install vue-router --save-dev

    安装element-ui:npm i element-ui -S

    安装依赖:npm install

    安装SASS加载器:cnpm install sass-loader node-sass --save-dev

    启动测试:npm run dev

    在这里插入图片描述


    2.用idea打开新建的vue项目

    删除多余的代码
    不废话了直接上代码吧,全部手敲,排错了好久才行。。。
    (中途webpack打包的时候可能因为SASS版本过高导致打包失败,就按照上面的指示操作就行,注意:要是使用idea的话要在管理员权限下运行)

    项目结构:
    在这里插入图片描述
    index.js

    import Vue from 'vue'
    import router from 'vue-router'
    
    import Main from '../views/Main'
    import Login from '../views/Login'
    
    Vue.use(router);
    
    export default new router({
      routes: [
        {
          path: '/main',
          component: Main
        }, {
          path: '/Login',
          component: Login
        }
      ]
    });
    
    

    Login.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="password" placeholder=" 请输入密码" v-model=" form.password"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
          </el-form-item>
        </el-form>
        <el-dialog
          title="温馨提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>请输入账号和密码</span>
          <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
    <script>
    export default {
      name: "Login",
      data() {
        return {
          form: {
            username: '',
            password: ''
          },
    // 表单验证, 需要在el-form-item- 元素中增加prop属性
          rules: {
            username: [{required: true, message: '账号不可为空', trigger: 'blur'}],
            password: [{required: true, message: '密码不可为空', trigger: 'blur'}]
          },
    //对话框显示和隐藏
          dialogVisible: false
        }
      },
      methods: {
        handleClose: function () {
          console.log("Handle Close,空函数");
        },
        onSubmit(formName) {
    //为表单绑定验证功能
          this.$refs [formName].validate((valid) => {
            if (valid) {
    //使用vue-router 路由到指定页面,该方式称之为编程式导航
              this.$router.push("/main");
            } else {
              this.dialogVisible = true;
              return false;
            }
          });
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    .login-box {
      border: 1px solid #DCDFE6;
      width: 350px;
      margin: 180px auto;
      padding: 35px 35px 15px 35px;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      box-shadow: 0 0 25px #909399;
    }
    
    .login-title {
      text-align: center;
      margin: 0 auto 40px auto;
      color: #303133;
    }
    </style>
    

    Main.vue

    <template>
    <h1>首页</h1>
    </template>
    
    <script>
    export default {
      name: "Main"
    }
    </script>
    
    <style scoped>
    
    </style>
    

    App.vue

    <template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    
    
    export default {
      name: 'App'
    }
    </script>
    

    main.js

    import Vue from 'vue'
    import App from './App'
    
    import router from './router'
    
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    
    Vue.use(router);
    Vue.use(ElementUI);
    
    Vue.config.productionTip = false
    
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    });
    

    效果:
    在这里插入图片描述


    3.路由嵌套

    就是界面中嵌套了其他界面

    先看效果:
    在这里插入图片描述

    项目结构:
    在这里插入图片描述

    更改了的代码:
    Main.vue

    <template>
      <div>
        <el-container>
    
          <!--aside 侧边栏-->
          <el-aside width="200px">
            <el-menu :default-openeds="['1']">
              <el-submenu index="1">
                <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
                <el-menu-item-group>
                  <el-menu-item index="1-1">
                    <router-link to="/user/profile">个人信息</router-link>
                  </el-menu-item>
                  <el-menu-item index="1-2">
                    <router-link to="/user/list">用户列表</router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
                <el-menu-item-group>
                  <el-menu-item index="2-1">分类管理</el-menu-item>
                  <el-menu-item index="2-2">内容列表</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-aside>
          <el-container>
            <el-header style="text-align: right; font-size: 12px">
              <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>个人信息</el-dropdown-item>
                  <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-header>
    
            <!--界面内容在 router-view 中显示-->
            <el-main>
              <router-view/>
            </el-main>
          </el-container>
        </el-container>
      </div>
    
    </template>
    <script>
    export default {
      name: "Main"
    }
    </script>
    <style scoped lang="scss">
    .el-header {
      background-color: #69a4f3;
      color: #333;
      line-height: 60px;
    }
    
    .el-aside {
      color: #333;
    }
    </style>
    

    index.js

    import Vue from 'vue'
    import router from 'vue-router'
    
    
    import Main from '../views/Main'
    import Login from '../views/Login'
    import UserList from '../views/user/List'
    import UserProfile from '../views/user/Profile'
    
    
    Vue.use(router);
    
    
    export default new router({
      routes: [
        {
          path: '/main',
          component: Main,
          //嵌套路由
          children: [
            {path: '/user/list',component: UserList},
            {path: '/user/profile',component: UserProfile},
          ]
        }, {
          path: '/Login',
          component: Login
        }
      ]
    });
    
    

    Profile.vue

    <template>
    <h1>个人信息</h1>
    </template>
    
    <script>
    export default {
      name: "Profile"
    }
    </script>
    
    <style scoped>
    
    </style>
    
    

    List.vue

    <template>
    <h1>用户列表</h1>
    </template>
    
    <script>
    export default {
      name: "List"
    }
    </script>
    
    <style scoped>
    
    </style>
    
    

    4.参数传递

    实现参数传递,主要更改三处,

    1. Main.vue 在router-link标签中,绑定路由的同时传递参数,绑定的路由要以路由的name进行绑定:
    <!--v-bind绑定,name 后传递路由的name值,params后是传递的参数-->
    <router-link v-bind:to="{name:'profile',params:{id:1}}">个人信息</router-link>
    
    1. 路由配置,要配置路径中接收参数的地方,和路由的name
      在这里插入图片描述
    2. 界面显示的地方(方式一)
      <div>
        {{ $route.params.id }}
      </div>
    

    一定要将组件包裹在一个div或者其他组件中,否则会报错

    1. 界面显示的地方(方式二)通过 props 解耦
      首先,路由要配置: props: true
      在这里插入图片描述
      Main.vue 界面不变
      在显示的界面进行绑定:
      在这里插入图片描述

    5.重定向

    在这里插入图片描述
    redirect 后是重定路径,’ / goHome ’ 是重定向的路由


    6.去除路径中的 ’ # ’

    在这里插入图片描述
    路由配置默认为 hash,需要手动配置为 history 还不会显示 #
    在这里插入图片描述
    在这里插入图片描述


    7.配置404界面

    在没有配置404接麦你的情况下,访问不存在的界面没有任何显示,就像这样:
    在这里插入图片描述
    新建一个 NotFound.vue 界面,并配置到路由中:

    <template>
    <div>
      <h1>404,你要访问的界面不存在</h1>
    </div>
    </template>
    
    <script>
    export default {
      name: "NotFound"
    }
    </script>
    
    <style scoped>
    
    </style>
    

    路由配置:
    在这里插入图片描述

    效果:
    在这里插入图片描述


    8.钩子函数

      beforeRouteEnter: (to,from,next) => {
        console.log('进入路由')
          next();
      },
      beforeRouteLeave: (to,from,next) => {
        console.log('离开路由')
        next();
      }
    

    在这里插入图片描述

    在钩子函数中使用异步请求:

    安装 axios
    cnpm install axios -s
    在main.js中引入
    Axios 官方文档

    npm install --save axios vue-axios(建议使用cnpm)

    将下面代码加入入口文件:

    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios, axios)
    

    按照这个顺序分别引入这三个文件: vue, axios and vue-axios

    准备json文件:

    {
      "name":"狂神说java",
      "url": "http://baidu.com",
      "page": 1,
      "isNonProfit":true,
      "address": {
        "street": "含光门",
        "city":"陕西西安",
        "country": "中国"
      },
      "links": [
        {
          "name": "B站",
          "url": "https://www.bilibili.com/"
        },
        {
          "name": 4399,
          "url": "https://www.4399.com/"
        },
        {
          "name": "百度",
          "url": "https://www.baidu.com/"
        }
      ]
    }
    

    运行查看是否可以访问到json文件:
    在这里插入图片描述

    代码:
    Profile.vue

    <template>
      <div>
        <h1>个人信息</h1>
        {{ id }}
      </div>
    </template>
    
    <script>
    export default {
      props: ['id'],
      name: "Profile",
      beforeRouteEnter: (to, from, next) => {
        console.log('进入路由')
        next(vm => {
          vm.getData();
        });
      },
      beforeRouteLeave: (to, from, next) => {
        console.log('离开路由')
        next();
      },
      methods: {
        getData: function () {
          this.axios({
            method: 'get',
            url: 'http://localhost:8080/static/mock/data.json'
          }).then(function (response) {
            console.log(response)
          })
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    

    在这里插入图片描述

    获取json数据并渲染到界面:

    <template>
      <div>
        <h1>个人信息</h1>
        {{ id }}
        <div>{{ info.name }}</div>
        <div>{{ info.address.country }}</div>
        <a v-bind:href="info.url">点击</a>
      </div>
    </template>
    
    <script>
    export default {
      props: ['id'],
      name: "Profile",
      data() {
        return {
          //请求的返回参数格式,必须和json格式一样(可以不都写,但是写了的格式必须相同)
          info: {
            name: null,
            address: {
              street: null,
              city: null,
              country: null
            },
            url: null
          }
        }
      },
      beforeRouteEnter: (to, from, next) => {
        console.log('进入路由')
        next(vm => {
          vm.getData();
        });
      },
      beforeRouteLeave: (to, from, next) => {
        console.log('离开路由')
        next();
      },
      methods: {
        getData: function () {
          this.axios({
            method: 'get',
            url: 'http://localhost:8080/static/mock/data.json'
          }).then((response)=>{
            this.info = response.data
            console.log(response.data)
          })
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    

    展开全文
  • 3、Vue+ElementUI制作用户登录页面

    万次阅读 多人点赞 2019-05-24 20:54:43
    前面两篇简单了解了一下vue和SPA,现在来用Vue+ElementUI做一个用户登录页面ElementUI是Element出的一套针对vue的UI库,类似的UI库非常多,ElementUI只是其中一个,只是在GitHub上ElementUI是使用人数最多的,也...

    前面两篇简单了解了一下vue和SPA,现在来用Vue+ElementUI做一个用户登录页面,ElementUI是Element出的一套针对vue的UI库,类似的UI库非常多,ElementUI只是其中一个,只是在GitHub上ElementUI是使用人数最多的,也可以使用其他的UI库,ElementUI官网地址:https://element.eleme.cn/#/zh-CN/component/installation

    使用npm的方式安装
    npm i element-ui -S:i表示install安装、-S表示-save安装在package.json文件下的dependencies下
    在这里插入图片描述在main.js中引入如下内容

    import Vue from 'vue';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import App from './App.vue';
    
    Vue.use(ElementUI);
    
    new Vue({
      el: '#app',
      render: h => h(App)
    });
    

    下载成功后在package.json文件下多了如下内容,如果有一天要进行版本升级,只需要修改一下后面的版本号,修改完成后执行npm install即可
    在这里插入图片描述
    然后新建一个Login.vue组建,把它引入到index.js页面并且定义到路由表routes中
    在这里插入图片描述App.vue页面如下,这样在首页中就只有Login.vue页面了
    在这里插入图片描述
    直接使用ElementUI中的card中的基础卡片
    在这里插入图片描述flex布局:弹性盒子布局http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
    登录页面Login.vue详细代码如下,具体说明在注释中

    <template>
      <div>
        <!--flex弹性盒子模型,justify-content:主抽 -->
        <div style="display: flex;justify-content: center;margin-top: 150px">
          <el-card style="width: 400px">
            <div slot="header" class="clearfix">
              <span>登录</span>
            </div>
            <table>
              <tr>
                <td>用户名</td>
                <td>
                  <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
                </td>
              </tr>
              <tr>
                <td>密码</td>
                <td>
                  <el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter.native="doLogin"></el-input>
                  <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
                </td>
              </tr>
              <tr>
                <!-- 占两行-->
                <td colspan="2">
                  <!-- 点击事件的两种不同的写法v-on:click和 @click-->
                  <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
                  <el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button>
                </td>
              </tr>
            </table>
          </el-card>
        </div>
      </div>
    </template>
    <script>
      export default {
        //单页面中不支持前面的data:{}方式
        data() {
          //相当于以前的function data(){},这是es5之前的写法,新版本可以省略掉function
          return{
            //之前是在里面直接写username,password等等,但是这里要写return
            //因为一个组件不管要不要被其他组件用,只要这样定义了,它就会认为可能这个组件会在其他的组件中使用
            //比如说在这里定义了一个变量,然后把这个组件引入到A组件中,A组件中修改了这个变量
            //同时这个组件也在B组件中引用了,这时候A里面一修改,B里面也变了,它们用的是一个值
            //可是一般来说可能希望在不同的组件中引用的时候,使用不同的值,所以这里要用return
            //这样在A组件和B组件分别引用这个变量的时候是不会互相影响的
            user:{
              username:'zhangsan',
              password:'123',
              //为了登录方便,可以直接在这里写好用户名和密码的值
            }
          }
        },
        methods:{
          doLogin(){//一点击登录按钮,这个方法就会执行
            alert(JSON.stringify(this.user))//可以直接把this.user对象传给后端进行校验用户名和密码
          }
        }
      }
    </script>
    
    

    一个vue+ElementUI的登录页面就算写好了,效果如下
    在这里插入图片描述

    展开全文
  • vue登录界面-elementplus 1.效果 2.代码 <template> <!-- 一 获取页面dom元素 <p ref="content">ref可以作为唯一标识</p> <button @click="hint">提示</button> methods:{ ...

    elementui登录界面的详细介绍

    1.效果

    在这里插入图片描述

    2.代码

    <template>
        <div class="container">
            <el-image
                    :src="url"
                    class="img"
            ></el-image>
            <!--
        ref 属性涉及Dom 元素的获取(el-form表单对象)。
        javaSrcipt 获取Dom 元素是通过:document.querySelector(".input")获取dom元素节点 。
        Vue 为简化DOM获取方法提出了ref 属性和$refs 对象。一般的操作流程是ref 绑定控件,$refs 获取控件。
        这里用ff来标记这个表单,this.$refs['ff']来获得表单
    -->
            <el-form
                    ref="ff"
                    :model="formItems"
                    :rules="rules">
                <!--label-width:标签的宽度-->
                <!--label:标签-->
                <!--
                Vue组件库element-ui中的Form表单组件提供了表单验证功能
                通过rules属性传入验证规则
                Form-Item中的prop属性设置需要校验的字段名,要和rules对象中保持一致,
                也等价于要和表单的属性名称保持一致
                -->
                <!--el-form-item元素的prop属性绑定字段名account,表单验证时,
                就会验证el-input元素绑定的变量formItems.account的值是否符合验证规则-->
                <el-form-item label="账号" prop="account">
                    <el-input v-model="formItems.account"></el-input>
                </el-form-item>
    
                <el-form-item label="密码" prop="password">
                    <!--show-password:密码框-->
                    <el-input v-model="formItems.password" show-password></el-input>
                </el-form-item>
                <!--提交按钮-->
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ff')">Create</el-button>
                    <el-button @click="resetForm('ff')">Reset</el-button>
                </el-form-item>
            </el-form>
    
    
        </div>
    
    </template>
    
    <script lang="">
        //导出组件
        export default {
    
            data() {
                return {
                    //图片地址
                    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    //表单属性对象,和表单进行双向绑定:model
                    formItems: {
                        //账号
                        account: '',
                        // 密码
                        password:''
                    },
                    //验证规则对象,其中的属性名称要和表单对象的属性名称保持一致,否则会失效
                    rules: {
                        account: [
                            {
                                required: true,
                                //错误提示
                                message: '请输入账号',
                                //事件,只有两个选项blur / change
                                trigger: 'blur',
                            },
                            {
                                min: 3,
                                max: 5,
                                message: '账号3到5位',
                                trigger: 'blur',
                            },
                        ],
                        password: [
                            {
                                required: true,
                                //输入框类型
                                message: '请示入密码',
                                trigger: 'blur',
                            },
                        ],
                    },
                }
            },
            methods: {
                //提交点击事件,传入表单属性对象
                submitForm(formName) {
                    //this.$refs[formName]获得这个表单,然后执行validate方法进行校验,
                    // 这里的校验是点击按钮之后才会进行的校验
                    this.$refs['ff'].validate((valid) => {
                        if (valid) {
                            //获得正确的属性
                            console.log(this.formItems.account+":"+this.formItems.password)
    
                        } else {
                            console.log('error submit!!');
                            return false
                        }
                    })
                },
                //重置点击事件
                resetForm(formName) {
                    this.$refs[formName].resetFields()
                },
            },
        }
    </script>
    
    <style>
    
        .container{
            position: absolute;
            left: 50%;
            top: 50%;
            /*向左和上偏移半个身位*/
            transform: translate(-50%, -50%);
            background: #70e53f;
            padding: 30px;
    
        }
    
        .container .img{
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
            border-radius:50%;
        }
    
    </style>
    
    展开全文
  • 下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 有两个输入框和一个提交按钮,一个输入用户名,另一个输入密码,点击提交按钮后发起一个 post 请求到 http://www.baidu.com
  • elementui实现登录页面效果及验证

    千次阅读 2019-03-20 14:59:53
    1.当前页面 <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item prop="account"> <el-input type="text" ...
  • vue+elementui 登录页面

    2021-11-13 11:22:07
    vue+elementui 登录页面 html代码 <template> <div class="login"> <el-form :model="form" status-icon :rules="rules" ref="loginForm" label-width="80px" class="login-box"> <h3 ...
  • " @click="submitLoginRuleForm" :loading="logining">登录el-button> el-form-item> el-form> div> template> <script> export default { data() { return { logining: false, userLoginRuleForm: { userName: '', ...
  • 成果: src目录 下周再补偿,要先去做首页布局了。。。。
  • 通过这篇文章,我们可以知道如何通过Vue路由方式实现登录页面的访问。主要知识点包括:Vue组件路由访问一、通过Vue-Cli创建一个项目安装Vue-Cli之后,通过vue ui命令启动项目管理器页面。如果是第一次创建项目会自动...
  • loading">登录</span> 登录中</span> </el-button> 重置</el-button> </div> </el-form> </el-card> </div> </template> <script> const Base64 = require('js-base64').Base64; import {api_login} from '@/api/...
  • vue结合element-ui美化登录页面

    万次阅读 2019-11-25 16:47:37
    import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' // 设置反向代理,前端请求默认发送到 http://localhost:8443/api var axios=require('axios') axios.defaults.baseURL='...
  • 登陆页面element-ui实现

    千次阅读 2020-04-20 12:18:13
    创建分支 git checkout -b login 查看分支 git branch 打开开vue ui 运行server 运行app 修改 <template> <div id="app"> app 根组件 </div>...export default...
  • https://blog.csdn.net/maidu_xbd/article/details/87943243已经搭建好了vue开发环境,在本博客中,来介绍些结合element-ui实现登录注册界面界面效果展示如下图: 实现的功能包括: 首先安装:通过npm方式...
  • vue +element ui 登录页面

    万次阅读 2019-08-16 16:43:31
    >登录 class="loginBut" type="primary" plain @click="resetForm()" >重置 export default { data() { return { logining: false, form: { name: 'admin', password: '123456' }, ...
  • 华联超市管理系统-登录 账号" prop="username"> <el-input type="text" v-model="loginForm.username"></el-input> 密码" prop="password"> ...
  • Element-UI登录页面案例分享(Demo)

    千次阅读 2021-02-27 21:54:09
    简单的分享一个登录vue + element-ui逻辑 注意事项: 1、正则表达式的相关校验(电话号码,邮箱登录校验等等) 2、登录 如果成功路由跳转到下一个页面 如果失败弹出提示 相关页面的详情,我在如下代码写了很详细的...
  • 在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能,需要的朋友可以参考下
  • vue+elementui搭建后台管理界面(登录)

    千次阅读 2020-04-05 11:54:54
    转载 https://www.cnblogs.com/wbjxxzx/p/9942648.html
  • vue+elementUI+Node+MySQL搭建用户登录页面

    千次阅读 热门讨论 2019-05-09 17:27:55
    在componens目录下创建一个登录页面login.vue <el-input type="text" v-model="loginForm.userName" auto-complete="off"></el-input> ...
  • vue2+elementUI后台管理系统,页面源代码,src和static目录,大神必备神器,导入即可,无需更改!
  • 炫酷登录界面效果

    2018-10-19 15:19:16
    一个炫酷的登录界面,背景清爽、炫酷、不失逼格,你值得拥有!
  • vue+elementUI完成注册及登陆

    万次阅读 2019-08-11 22:41:47
    vue怎么引入和配置使用element-ui框架 1.1 使用vue-cli脚手架工具创建一个vue项目 vue init webpack pro01 ... 1.2 npm安装elementUI cd pro01 #进入新建项目的根目录 npm install element-ui -S ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,068
精华内容 1,627
关键字:

elementui登录页面