Question

您好我已经从https://github.com/aurelia/skeleton-plugin下载了hello world aurelia skelton插件。然后我从package.json文件中引用aurelia esnext / webpack skelton（https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext-webpack）的新副本作为我的主应用程序。然后，我可以使用

中的一个组件中的插件

<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 build ok，但浏览器给出了错误：找不到模块＆＃39; ./ aurelia-skeleton-plugin / red-square＆＃39;

我已经阅读了很多文档，但没有提供这个场景的例子，我们将非常感谢任何帮助。

Answer 1

以下是一些可以尝试的内容 - 尽管我已经从您提供的链接中的教程中开箱即用。

确认config.js中的babelOptions有classProperties。

  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system",
      "es7.classProperties"
    ]
  },

接下来，请仔细检查您的文件是否已正确放入src文件夹并命名为：

red-sqaure.js
simple-attribute-usage.html

然后，无论哪个HTML文件包含您的内容 - 您的shell / app，请执行以下操作：

<compose view="simple-attribute-usage.html" viewmodel="red-square"></compose>

虽然我能够使原始HTML工作

<require from="./red-square"></require>
  <div red-square></div>

使用自定义属性的aurelia自定义插件 - 无法找到自定义属性

1 个答案: