Element-UI组件实现普通登录

一 代码

1 创建登录视图 Login.vue

2 配置登录路由 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/backTopOne',
        name: 'backTopOne',
        component: () => import('../views/BackTopOne')
    },
    {
        path: '/backTopTwo',
        name: 'backTopTwo',
        component: () => import('../views/BackTopTwo')
    },
    // 配置普通登录路由
    {
        path: '/login',
        name: 'login',
        component: () => import('../views/Login')
    },
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

3 主页面配置导航 Home.vue

4 创建AccountLogin.vue普通用户登录组件

5 注册全局组件index.js

// 导入组件
import Vue from "vue"
import BackTop from "../components/backTop/BackTop"
import AccountLogin from "../components/accountLogin/AccountLogin";
/* 注册全局组件 */
Vue.component('backTop', BackTop)
Vue.component('accountLogin', AccountLogin)

二 测试

三 开源参考

https://gitee.com/cakin24/ele-components