正在解析未知的自定义元素：<star-rating> vue js

Question

我在 javascript 代码中使用 Vue js。我下载了 vue-star-rating npm 包，为我的元素之一建立了评级系统。我相信我已经正确地按照说明 here 进行操作，但是我收到了错误

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

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);
        });        
    }
});

Answer 1

这是我的包，但我没有记录如何将它与 requireJS 一起使用，因为我已经好几年没有使用它了。然而，它被捆绑为一个定义为 "VueStarRating" 的命名 UMD 模块，因此您需要将以下内容添加到您的 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（包括我自己），所以你应该在那里得到更好的回应。

正在解析未知的自定义元素：<star-rating> vue js

Resolving Unkown custom element: <star-rating> vue js

html

javascript

requirejs

vue.js

custom-element

html

.js