Quasar Framework上的Vue.use自定義組件的位置？</p> <pre><code>npm i vue-facebook-signin-button --save </code></pre> <p>我穿上<code>main.js</code>：

我嘗試對類星體框架使用https://github.com/phanan/vue-facebook-signin-button成分，我一直在使用NPM安裝了Quasar Framework上的Vue.use自定義組件的位置？</p> <pre><code>npm i vue-facebook-signin-button --save </code></pre> <p>我穿上<code>main.js</code>：

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

然後我加上主.vue文件：

<template> 
    <q-layout> 
    <div class="layout-view"> 
     <fb-signin-button 
     :params="fbSignInParams" 
     @success="onFbSignInSuccess" 
     @error="onFbSignInError"> 
     Sign in with Facebook 
     </fb-signin-button> 
    </div> 
    </q-layout> 
</template> 
<script> 
    // Facebook 
    var FB; 
    window.fbAsyncInit = function() { 
    FB.init({ 
     appId: process.env.FB_APPID, 
     cookie: true, // enable cookies to allow the server to access the session 
     xfbml: true, // parse social plugins on this page 
     version: 'v2.8' // use graph api version 2.8 
    }) 
    } 
    (function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[ 0 ]; 
    if(d.getElementById(id)) return; 
    js = d.createElement(s); 
    js.id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')) 

    export default { 
    store, 
    data() { 
     return { 
     fbSignInParams: { 
      scope: '', 
      return_scopes: true 
     } 
     } 
    }, 
    computed: {}, 
    methods: { 
     onFbSignInSuccess (response) { 
     console.log('res', response) 
     FB.api('/me', dude => { 
      console.log('dude', dude) 
      console.log(`Good to see you, ${dude.name}.`) 
     }) 
     }, 
     onFbSignInError (error) { 
     console.log('OH NOES', error) 
     } 
    } 
    } 
</script>

但它提供了一個運行時錯誤：

(unknown) [Vue warn]: Unknown custom element: <fb-signin-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 

found in 

---> <Index> at /home/asd/SPA/src/components/Index.vue 
     <App> at /home/asd/SPA/src/App.vue 
     <Root>

而且在fbAsyncInit另一個錯誤：

sdk.js:96 Uncaught TypeError: Cannot read property 'init' of undefined 
    at window.fbAsyncInit (eval at <anonymous> (0.6374f77….js:243), <anonymous>:10:5) 
    at v.__wrapper (sdk.js:96) 
    at sdk.js:140

來源

2017-05-05 Kokizzu

每當有未註冊的VUE組件一名身份不明的HTML標記時出現此錯誤。解決此問題的一種方法是創建fb登錄按鈕的vue包裝並實現該功能。

一次通過這個link。

來源

2017-05-26 05:48:38

FBSignInButton是Vue的組成部分，所以你需要做的是將其導入並將其添加到您的組件是這樣的：

import FBSignInButton from 'vue-facebook-signin-button' 

export default { 
    ..., 
    components: { 
    ..., 
    FBSignInButton 
    }, 
    ... 
}

你需要將其申報爲組件，否則Vue不會知道它。

來源

2017-08-09 14:17:48

Quasar Framework上的Vue.use自定義組件的位置？</p> <pre><code>npm i vue-facebook-signin-button --save </code></pre> <p>我穿上<code>main.js</code>：

回答

相關問題