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

Posted 2023-02-22

【中文标题】无法将 npm 包添加到 nuxt js [vue-star-rating]

【英文标题】：can't add npm package to nuxt js [vue-star-rating]

【发布时间】：2020-06-29 08:05:31

【问题描述】：

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

star-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>

【问题讨论】：

你能给我们看看你的 home/deals.vue 吗？

星级评分组件未注册。组件：'星级'，VueStarRating.default

感谢帮助????

【参考方案1】：

嘿，我有同样的问题，这是答案：

1.在您的插件中 (star-rating.js)：

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

2.不要忘记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

顺便说一句，如果你想获得评分道具，你可以简单地访问它：

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

【讨论】：

你提到的折旧模式：nuxtjs.org/docs/2.x/configuration-glossary/configuration-mode请使用s-s-r:false

【参考方案2】：

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

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

Vue.component('StarsRatings', StarsRatings);