Question

我使用Aurelia CLI启动了一个新的Aurelia应用程序。

我安装了JQuery并使用Aurelia文档中的说明配置了aurelia.json：

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6

我然后npm安装了Jquery-ui。

我现在需要知道如何配置audelia.json来识别jquery-ui。

在Aurelia文档中，给出了如何引用模块的示例：

"dependencies": [
  {
    "name": "library-name",
    "path": "../node_modules/library-name/dist/library-name"
  }
]

问题在于，与直接下载jquery-ui时不同，JQuery-ui模块没有实际的Jquery-ui.js文件（如果它找不到它）。

谢谢

Answer 1

据我所知，jquery-ui包不包含jquery-ui的“内置”版本。我终于通过使用jquery-ui-dist包来实现这一点，该包包含默认的jquery-ui.js和jquery-ui.css文件。

npm install jquery-ui-dist --save

现在在vendor-bundle的依赖项中添加aurelia.json：

    "dependencies": [
      "aurelia-binding",
      ...
      "jquery",
      {
        "name": "jquery-ui-dist",
        "path": "../node_modules/jquery-ui-dist",
        "main": "jquery-ui",
        "deps": ["jquery"],
        "resources": [
          "jquery-ui.css"
        ]
      },
    ]

注意我们首先加载jquery。 “main”属性告诉它应该从该目录加载jquery-ui.js。 “deps”属性告诉它它依赖于jquery。最后，“resources”属性包括默认的jquery-ui.css。

现在在app.html中，请务必要求css文件：

<require from="jquery-ui-dist/jquery-ui.css"></require>

在ts文件中使用：

import * as $ from 'jquery';
import 'jquery-ui-dist';

Answer 2

我正在使用Aurelia 1.0.X，更新后我需要这两个导入来使用任何jQuery-UI小部件，在这种情况下是可拖动的。它在导入滑块或可调整大小时也有效。

import $ from 'jquery';
import {draggable} from 'jquery-ui';

在我的package.json中，我的jspm依赖项如下：

"jquery": "npm:jquery@^3.2.1",
"jquery-ui": "github:components/jqueryui@^1.12.1"

Answer 3

将 jquery-ui.js 的副本添加到您的静态文件夹中，并将这一行添加到您打算使用 jquery-ui 的类的构造函数中，请注意：它应该引用您的 jquery-ui 文件的位置< /p>

import { $ } from 'jquery';
export class Index
{
  constructor(){
    require('../../../../../static/assets/js/jquery-ui');
  }
}

如何在Aurelia中使用JQuery-UI

3 个答案: