Vue|Element-UI组件实现普通登录 Vue|vue

一代码 1 创建登录视图 Login.vue

.login { margin-top: 30px; margin-left: 30px; }.account { width: 500px; }

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

【Vue|Element-UI组件实现普通登录】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)

二测试