解决未知的自定义元素：<star-rating> vue js答案

【问题标题】：Resolving Unkown custom element: <star-rating> vue js解决未知的自定义元素：<star-rating> vue js
【发布时间】：2017-11-09 07:15:58
【问题描述】：

我在我的 javascript 代码中使用 Vue js。我下载了 vue-star-rating npm 包，以便为我的一个元素建立一个评级系统。我相信我正确地遵循了here 的说明，但我收到了错误

[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link type="text/css" rel="../css/ProductEvaluation.css" />
</head>
<body>
    <button class="btn btn-sm" id="btnRun">Run</button>

    <div id="product-eval-areas">
        <ul>
            <li v-for="area in areas">
            {{area.EvaluationArea}} 
            // Error is occurring on this custom element
            <star-rating v-model="area.ProductEvaluationScore"></star-rating>
            </li>
        </ul>
    </div>

    <script src="https://url.com/WebResources/ccseq_/Scripts/jquery3.1.1.js"></script>
    <script src="../../Scripts/papaparse.js"></script>
    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script src="../../Scripts/require.js" data-main="../js/main/ProductEvaluation.js"></script>
</body>
</html>

.js

"use strict";

requirejs.config({
    bundles: {
        'https://url.com/WebResources/ccseq_/WebResources/js/lib/CCSEQ.WebAPI.js': ['Model/ProductEvaluation', 'Model/ProductEvaluationArea', 'API/ProductEvaluation', 'API/ProductEvaluationArea']
        //'../lib/CCSEQ.WebAPI.js': ['Model/ProductEvaluation', 'Model/ProductEvaluationArea', 'API/ProductEvaluation', 'API/ProductEvaluationArea']
    }
});

require(["Model/ProductEvaluation", "Model/ProductEvaluationArea", "API/ProductEvaluation", "API/ProductEvaluationArea", "../../../node_modules/vue-star-rating/dist/star-rating.min"], function (ProductEvaluationModel, ProductEvaluationAreaModel, ProductEvaluationAPI, ProductEvaluationAreaAPI, StarRating) {

    var currentProductEvaluation = new ProductEvaluationModel.ProductEvaluation(); 

    Vue.component('star-rating', StarRating);

    var areas = new Vue({
        el: '#product-eval-areas',
        data: { areas: currentProductEvaluation.ProductEvaluationAreas }
                    })

    $(document).ready(function () {        
        PopulatePage();
    });

    function PopulatePage() {
        $("#btnRun").click(function () {
            var productEvaluationAPI = new ProductEvaluationAPI.ProductEvaluation();
            productEvaluationAPI.Get(window.parent.Xrm.Page.data.entity.getId().replace(/({|})/g, "")).
                then(
                function (results) {
                    LoadProductEvaluation(results);
                    console.log("success");
                }).catch(function (results) {
                    console.log("Fail");
                });
        });        
    }

    function LoadProductEvaluation(productEvaluation) {
        productEvaluation.ccseq_ccseq_productevaluation_ccseq_producteval.forEach(function (pe) {
            var newProductEvaluationArea = new ProductEvaluationAreaModel.ProductEvaluationArea();
            newProductEvaluationArea.EvaluationArea = pe.ccseq_evaluationarea;
            newProductEvaluationArea.ProductEvaluationScore = pe.ccseq_productevaluationscore;
            newProductEvaluationArea.SelfEvaluation = pe.ccseq_selfevaluation;
            newProductEvaluationArea.ProductEvaluationID = pe.ccseq_productevaluationid;
            currentProductEvaluation.ProductEvaluationAreas.push(newProductEvaluationArea);
        });        
    }
});

【问题讨论】：

改用Vue.component('star-rating', StarRating.default);
Vue.component('star-rating', StarRating.default); 在加载时出现错误：Unable to get property 'default' of undefined or null reference @thanksd
所以有你的问题。 StarRating 是 undefined。我不熟悉你使用 require 方法的方式，所以我不知道你做错了什么，但它没有拉入 StarRating 模块。

标签： javascript html requirejs vue.js custom-element

【解决方案1】：

这是我的包，但我没有记录如何将它与requireJS 一起使用，因为我已经好几年没有使用它了。然而，它被捆绑为一个命名的 UMD 模块，该模块被定义为“VueStarRating”，因此您需要将以下内容添加到您的 requirejs 配置中：

paths: {
  'VueStarRating': '../../../node_modules/vue-star-rating/dist/star-rating.min'
}

那么你可以这样做：

require(['VueStarRating'], function(StarRating) {
  Vue.component('star-rating', StarRating.default);

  new Vue({
    el: '#app'
  })
});

您可以在此 JSFiddle 上查看：https://jsfiddle.net/2Lgz9vs4/

如果您遇到更多麻烦，那么也值得用requirejs 标记您的问题。大多数Vue 开发人员都使用CommonJS（包括我自己），所以你应该在那里得到更好的响应。

【讨论】：

为什么 CommonJS 优于 RequireJS？
CommonJS 因为它允许您使用单文件组件和像 babel 这样的转译器，因此我们可以在项目中使用 ES2015。此外，使用 requirejs，您需要引入在运行时编译模板的独立构建，而不是使用诸如 webpack 之类的构建工具预编译它们，从而使 commonJS 版本更轻。最后，许多人将在使用 CommonJS 作为标准的项目中使用 vue-cli 或 laravel。