一：直接引用

①从git下载文件夹后放入vue项目工程src文件夹下

②在main.js文件中引入组件：

    import LoginModules from './loginComponents'

③将组件注册入Vue实例中：

    Vue.use(LoginModules)

④在项目中根据规则新建对应页面

登录login.vue， 注册register.vue， 忘记密码forgetPwd.vue

⑤使用组件

1、在登录页使用组件

    <Login :backgroundImage="backgroundImage"  :logoImg="logoImg"></Login>

2、在注册页使用组件

    <Register 
        :backgroundImage="backgroundImage" 
        :logoImg="logoImg"  
        @registerSuccess="handleRegisterSuccess"
        ></Register>

3、在忘记密码页使用组件

    <ForgetPwd
            :backgroundImage="backgroundImage"
            :logoImg="logoImg"
            @changePwdSuccess="handleChangePwdSuccess"
    ></ForgetPwd>

backgroundImage:背景图相对路径

    backgroundImage:'assets/images/login_bg.png',

logoImg:logo图片相对路径

    logoImg:'assets/images/iBot_logo.png',

其他参数可以参考backgroundImage用法自行拓展。

⑥登录页面分账号登录和验证码登录，内部使用动态组件拆分，使用provide/inject实现数据传递。开发者需要在login.vue页面实现如下逻辑：

    methods: {
        loginSuccess(obj){
            //obj登录成功后组件返回的参数，用于各系统自主实现功能
            //目前obj结构：{
                code:200,
                data{
                   token:'xxxxxx',
                    userinfoVo:{
                        xxx:xxx
                    } 
                },
                msg:'操作成功'
            }
        }
    },
    provide(){
        return {
            loginSuccess: this.loginSuccess
        }
    }

⑦注册页面使用$emit获取成功的参数，开发者需要在register.vue页面实现如下逻辑：

    //注意在第⑤步中第2项组件要绑定handleRegisterSuccess事件
    methods: {
        //注册成功之后的页面逻辑，根据各自系统自行实现
        handleRegisterSuccess(obj){
            //obj登录成功后组件返回的参数，用于各系统自主实现功能
            //目前obj结构：{
                code:200,
                data{
                   token:'xxxxxx',
                    userinfoVo:{
                        xxx:xxx
                    } 
                },
                msg:'操作成功'
            }
        }
    },

⑧忘记密码页面使用$emit获取成功的参数，开发者需要在forgetPwd.vue页面实现如下逻辑：

    //注意在第⑤步中第2项组件要绑定handleChangePwdSuccess事件
    methods: {
        //注册成功之后的页面逻辑，根据各自系统自行实现
        handleChangePwdSuccess(obj){
            //obj登录成功后组件返回的参数，用于各系统自主实现功能
            //目前obj结构：{
                code:200,
                msg:'操作成功'
            }
        }
    },

二：开发者也可以在npm下载组件：ibotlogin

①使用npm或者yarn安装

    npm install ibotlogin
    yarn add ibotlogin

②参考第一种方式的第②步操作，后面都一样

注：====使用本组件要求==== 开发者使用vue2.0框架搭建项目工程，且安装有如下控件：

"axios": "0.24.0",

"element-ui": "2.14.1",及以上版本

开发环境下需要在vue.config.js文件下配置代理:/baseLogin

    devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      '/baseLogin': {
      //process.env.VUE_APP_BASE_URL为.env.development文件下后台开发者项目地址，也可直接配置为http://36.137.215.140:90
        target: process.env.VUE_APP_BASE_URL,
        changeOrigin: true,
        pathRewrite: {
          '^/baseLogin': ''
        }
      }
    },
    disableHostCheck: true
  },