PS：Mpvue是不是已经停更了？我也不知道，但是这是类Vue来说，比较好用的一个框架。希望能持续维护吧

假设你在mpvue上已经做好了配置,框架中使用ui为有赞的vantUI

关于button按钮

 <van-button open-type= "getUserInfo" @getuserinfo= "getUserInfo" @click="login" >登录测试</van-button>

调用小程序原生的open-type 
getUserInfo 获取用户详细信息,从而调起小程序登录授权框

参考文档:
https://developers.weixin.qq.com/miniprogram/dev/component/button.html

js部分

 mounted () {
    // 看用户是否授权过
    this.getUserData()
  },

methods: {
    getUserData () {
      wx.getSetting({
        success: function (res) {
          console.log(res)
          if (res.authSetting['scope.userInfo'] === true) {
            wx.getUserInfo({
              success: function (userData) {
                console.log(userData)
              }
            })
          } else {
            console.log('用户还未授权过')
          }
        }
      })
    },
    login () {
      console.log('触发')
    },
    getUserInfo (e) {
      console.log(e.mp.detail.userInfo)
    }
  }

说明部分：

当触发wx.getSetting，返回scope.userInfo结果为true
则触发wx.getUserInfo,获得5个参数给后端，来进行后续操作

 wx.getSetting 获取用户的当前设置
参考文档：
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.getSetting.html

wx.getUserInfo 获取获取用户信息。
https://developers.weixin.qq.com/minigame/dev/api/open-api/user-info/wx.getUserInfo.html