我在我的javascript代码中使用Vue js。我下载了vue-star-rating npm软件包，以便为我的一个元素设置评级系统。我相信我已正确遵循说明here，但我收到了错误
[Vue警告]：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。
<!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>
"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);
});
}
});
答案 0 :(得分：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（包括我自己），所以你应该在那里得到更好的回应。