嗨,我从https://github.com/aurelia/skeleton-plugin下载了hello world aurelia skelton插件。
然后,我从aurelia esnext / webpack skelton(https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext-webpack)的新副本中的package.json文件中引用它作为我的主要应用程序。
然后,我可以在其中一个组件中使用插件
<require from="aurelia-skeleton-plugin/hello-world"></require>
在视图顶部并将
<hello-world></hello-world>
放置在视图的任何位置。这很好。下一步,我想尝试的是向插件添加自定义属性。在我插件的src文件夹中,我添加了简单的自定义属性
export class RedSquareCustomAttribute {
static inject = [Element];
constructor(element){
this.element = element;
this.element.style.width = this.element.style.height = '100px';
this.element.style.backgroundColor = 'red';
}
}
然后,我在hello-world.html页面中使用以下代码引用此代码
<require from="./red-square"></require>
<div red-square></div>
运行gulp build,然后在我的主应用程序中重新安装该软件包。在主应用程序中,npm start可以正常构建,但是浏览器给我错误:
找不到模块'./aurelia-skeleton-plugin/red-square'
香港专业教育学院阅读了大量的文档,但没有给出这种情况的示例,任何帮助将不胜感激。
最佳答案
尽管我可以从您提供的链接中的教程中直接使用它,但是可以尝试以下一些操作。
确认config.js
中的babelOptions具有classProperties
。
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system",
"es7.classProperties"
]
},
接下来,请仔细检查您的文件是否正确放置在
src
文件夹中并命名为:red-sqaure.js
simple-attribute-usage.html
然后,无论哪个HTML文件具有您的内容(您的shell /应用程序),都应执行以下操作:
<compose view="simple-attribute-usage.html" viewmodel="red-square"></compose>
虽然我能够使用原始HTML
<require from="./red-square"></require>
<div red-square></div>