1、facebook->进入开发者 https://developers.facebook.com/b

2、public/index.html 增加以下代码

 
<-- 引入sdk, appid换成 你的应用编号 -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.3&appId=xxxxxxxxxxx&autoLogAppEvents=1"></script>
 

3、在main.js中注册该组件

 
import FBSignInButton from 'vue-facebook-signin-button'
Vue.use(FBSignInButton
 

4、在组件中使用 。官网手册

 
<template>
  <div class="wrap">
      <!--  Facebook 登录  -->
      <button class="login-btn">
           <fb-signin-button
                   :params="fbSignInParams"
                   @success="onSignInSuccess"
                   @error="onSignInError">
                Facebook 登录
           </fb-signin-button>
      </button>

      <!-- 分享 -->
      <div class="share">
        <div class="fb-share-button" data-href="https://test.wonderent.net/home/XmasMsl/main#/home" data-layout="button_count" data-size="large" data-mobile-iframe="true" >
                      <a target="_blank"
                         href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"
                         class="fb-xfbml-parse-ignore">分享
                      </a>
          </div>
      </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
      name:'facebook',
      data () {
          return {
              fbSignInParams: {
                  scope: 'email,user_likes',
                  return_scopes: true
              }
          }
      },
      methods: {
          onSignInSuccess (response) {
              console.log(response) //返回第三方的登录信息
          },
          onSignInError (error) {
              /* 错误 */
            console.log(error)
          }
      }
  }
</script>