文章/答案/技术大牛

发布

社区首页 >问答首页 >Laravel5.4和Gridstack.js

问Laravel5.4和Gridstack.js
EN

Stack Overflow用户

提问于 2017-08-01 11:48:22

回答 1查看 901关注 0票数 0

如何将第三方js文件添加到特定的刀片视图？

基本上，我想在我的新项目中的仪表板页面中添加网格堆栈功能。

我已经尝试从栅格叠下载js和css文件，然后将gridstack.js放在项目的resources/assets/js/文件夹中，将css文件放在项目的resources/assets/css/文件夹中

下一步是加载混频器中的文件。为此，我想我可以直接去/resources/assets/js/app.js并添加库

require("./bootstrap");
//Add the following two lines
require("./jquery-ui.min");
require("./gridstack");

然后我运行npm，这会产生以下错误

错误与20个错误一起编译失败，没有找到这些依赖项： jquery/data在./resources/assets/js/gridstack.js中 jquery/禁用- ./resources/assets/js/gridstack.js中的选择省略了18行相似行为了安装它们，您可以运行: npm安装--保存jquery-ui/data jquery- ui/禁用-选择jquery-ui/focusable -ui/form jquery-ui/ie jquery-ui/keycode jquery-ui/标签jquery-ui/jquery-1-7 jquery-ui/plugin jquery-ui/安全-模糊jquery-ui/滚动-父jquery-ui/tabbable jquery-独一无二-id jquery-ui/版本jquery-ui/jquery/ui/jquery-ui/安全-活跃元素jquery-ui/widget /鼠标jqueryui/widgets/draggable jquery-ui/widget/droppable jquery-ui/widget/resizable

当然，我试图运行npm install --save jquery-ui/data来查看它是否工作，但它没有：

国家预防机制错误！拒绝许可(公开密钥) 致命:无法从远程存储库读取。请确保您有正确的访问权限和存储库存在。

如何在没有所有这些编译错误的情况下向我的项目添加一个简单的js和css .？

我还尝试了另一种方法:从上面的方法中删除了需求，并选择了webpack.mix.js文件并使其看起来如下：

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/app-landing.js', 'public/js/app-landing.js')
   .js('resources/assets/js/jquery-ui.min.js', 'public/js')
   .js('resources/assets/js/gridstack.js', 'public/js')
....

然后，我运行npm run dev只是为了从上面得到相同的错误。

这里怎么了？我试图删除jquery并再次运行npm .完全相同的误差

另外，我在我的项目中使用npm安装了网格堆栈.但我不知道如何直接使用它。我应该能够使用它，因为它是“安装”，但如何？

我还做了一个npm cache clean，没有效果，我也验证了我的节点和npm版本，它们看起来不错：

node v6.10.3
npm  v3.10.10

在从需求中删除./之后，以及在完全删除jquery(它已经加载)之后，编辑后，我设法从npm命令中没有得到更多的错误。然而，网格堆栈功能并不存在。我将我的源代码与网格堆栈的官方演示进行了比较，发现它们包含2个js网格堆栈文件：

<script src="../dist/gridstack.js"></script>
<script src="../dist/gridstack.jQueryUI.js"></script>

但是Laravel不同意我增加额外的要求。如果在/resources/assets/js/app.js中放置以下内容，则会再次从npm获得错误

require("./bootstrap");
require("gridstack");
require("gridstack.jQueryUI"); // nor does it work if I use gridstack.all.js or gridstack.jQueryUI.js

在我的Laravel5.4项目中，我能做些什么来获得网格堆栈的全部功能？

编辑看起来起作用的是：

删除以前所做的所有更改，如app.js中的更改
我将webpack.config.js从节点_模块/laravel复制到项目的根文件夹中。
我添加了下面的代码 module.exports.resolve ={扩展，别名：{ 'vue$'：'vue/dist/vue.common.js'，‘jquery’：path.resolve(__dirname，‘node___dirname/jquery/ui’)} }；
在webpack.mix.js中，我添加了以下内容： .copy('node_modules/gridstack/dist/gridstack.all.js'，(资源/资产/js/app.js，'public/js') mix.js‘public/js’；
在package.json中，我添加了： "devDependencies"：{。“网格堆栈”："^0.3.0“}
在命令行中 sudo npm重建节点-sass

然后

sudo npm run dev

在我做了上述工作之后，npm正确地编译了混合，bun现在，我在前面得到了一个jQuery错误：

jQuery.Deferred异常: c.draggable不是函数d.prototype.draggable@http://myproject.com/js/gridstack.all.js:16:1395

这指向gridstack.all.js的第二部分(在它的开头，定义jquery ).)错误似乎表明jquery加载了不止一次。但在一个经典的PHP应用程序中，这不是一个问题。

知道该怎么做吗？默认的laravel应用程序在默认情况下需要引导、存档和jquery，而且当我向项目添加网格堆栈时，似乎还有第二个jquery需求。我只是不明白。

有人能试着模拟我在做什么并告诉我他们是如何做到的吗？

npm

laravel-5.4

gridstack

laravel

回答 1

Stack Overflow用户

发布于 2019-01-19 09:09:52

您需要通过资产()包含网格堆栈，然后一切都会很愉快--在本例中，文件位于/public/js/dashboard (HootSu套网格演示页面)中。

<!DOCTYPE html>
<html>
<head>
  <title>Grid Demo</title>
  <link rel="stylesheet" href="css/dashboard/style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script src="{{ asset('js/dashboard/fixtures.js') }}" type="text/javascript"></script>
  <script src="{{ asset('js/dashboard/gridList.js') }}" type="text/javascript"></script>
  <script src="{{ asset('js/dashboard/jquery.gridList.js') }}" type="text/javascript"></script>
  <script src="{{ asset('js/dashboard/load.js') }}" type="text/javascript"></script>

</head>
<body>
  <div class="header">
    <a href="#remove-row" class="button remove-row">-</a>
    <a href="#add-row" class="button add-row">+</a>
    <p>
      <a class="github-button" href="https://github.com/hootsuite/grid" data-style="mega" data-count-href="/hootsuite/grid/stargazers" data-count-api="/repos/hootsuite/grid#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star hootsuite/grid on GitHub">GitHub</a>
    </p>
  </div>
  <div class="grid-container">
    <ul id="grid" class="grid">
      <li class="position-highlight">
        <div class="inner"></div>
      </li>
    </ul>
  </div>
  <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45436973

复制

相似问题

问Laravel5.4和Gridstack.js
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Laravel5.4和Gridstack.jsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Laravel5.4和Gridstack.js
EN