vue 使用element组件 实现用户的注册登录功能以及根据登录状态显示或隐藏状态栏的相关菜单

我的qq 2038373094

 

 效果如下

 

vue项目环境搭建篇

搭建vue项目{

1、nodejs

2、vue-cli脚手架

3、webpack打包

}

详细教程看 https://blog.csdn.net/qq_37591637/article/details/89944336

初级入门篇

对vue项目目录都不懂的人：VScode vue工程项目入门小白必看 https://blog.csdn.net/qq_37591637/article/details/90022267

第一步、你可以根据element组件官网https://element.eleme.cn/#/zh-CN/component/input，学会使用组件，如果组件都不会使用，复杂的就更不用提了

Vue 组件库Element入门教程之使用上传组件  https://blog.csdn.net/qq_37591637/article/details/89954080

第二步、一个html页面如何引入多个element ui组件  https://blog.csdn.net/qq_37591637/article/details/90037778

第三步、前后端交互  vue实战——vue中发送AJAX请求   https://blog.csdn.net/qq_37591637/article/details/90047745

---

项目篇

导航栏组件

登录/注册组件

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Head from '../components/common/Head' //头部导航栏
import Zmd from '../components/home/Zmd'   //走马观灯
import hhome from '../components/home/home' //首页
import user from '../page/user/user'  //用户页面
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/Head',
      name: 'Head',
      component: Head
    },
{
      path: '/user',
      name: 'user',
      component: user
    },
    {
      path: '/Zmd',
      name: 'Zmd',
      component: Zmd
    },
    {
      path: '/',
      name: 'home',
      component: hhome
    }
  ]
})

这里涉及到跨域请求  、路由跳转

 

我的后台是ssh框架（java语言）