嗨,我从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>

10-05 20:37
查看更多