无法将 npm 包添加到 nuxt js [vue-star-rating]

Question

我是 nuxt js 的新手，所以当我尝试添加 npm 包时它不会工作这些是试验。

星-raing.js

import Vue from 'vue'
import StarsRatings from 'vue-star-rating'
Vue.use(StarsRatings)

nuxt.config.js

    plugins: [{ src: '~/plugins/star-rating.js', mode: 'client' }],
    build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {},
    transpile: ['star-rating']
  }

it shows these errors

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This 
is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or 
missing <tbody>. Bailing hydration and performing full client-side render.


[Vue warn]: Unknown custom element: <stars-ratings> - did you register the component correctly? For         
recursive components, make sure to provide the "name" option.

found in

---> <Deals> at components/Home/Deals.vue
<Home> at pages/index.vue
<Nuxt>
<Default> at layouts/default.vue
<Root>

Answer 1

您应该在您的star-rating.js中注册如下：

import Vue from 'vue';
import StarsRatings from 'vue-star-rating';

Vue.component('StarsRatings', StarsRatings);

Answer 2

嘿，我遇到了同样的问题，这是答案：

1.in 你的插件 (star-rating.js):

import Vue from 'vue'
import VueStarRating from 'vue-star-rating'
Vue.component('star-rating', VueStarRating);

2.dont 忘记 mode:'client' 在你的 nuxt.config.js:

{
    src: '~/plugins/star-rating.js', mode: 'client'
},

3.finally 在你的 .vue 文件中你可以简单地使用 :

<star-rating v-model="rating">
</star-rating>

ps：这适用于 vuejs 2x

顺便说一句，如果您想获得专业评级ps，您可以简单地访问它：

export default {
    name:"example",
    data() {
        return {
            rating: 0,
        }
    },    
}

无法将 npm 包添加到 nuxt js [vue-star-rating]

can't add npm package to nuxt js [vue-star-rating]

javascript

plugins

npm

vue.js

nuxt.js

ps：这适用于 vuejs 2x