Как добавить jQuery в файл VuePress - PullRequest
Новая
       14

Как добавить jQuery в файл VuePress

0 голосов
/ 16 октября 2018

У меня есть проект, который я хочу документировать с помощью VuePress, и у меня есть небольшой код, для запуска которого требуется jQuery.Я знаю, что вы можете добавить встроенные теги сценария и вставить в них код, но я не могу добавить jQuery.Вот структура папок и то, что я пробовал: 

docs
   .vuepress
   -- dist
   -- public
      -- css
      -- js
         -- jquery-3.3.1.min.js
         -- scripts.js
   -- config.js
   components.md

и в файле component.md я добавил следующее в конце: 

<script src="/js/jquery-3.3.1.min.js"></script>

Вот ошибка при добавлении jquery втег script: 

 Module not found: Error: Can't resolve '../../../../../../js/jquery-3.3.1.min.js?vue&type=script&lang=js&' in C:/Users/../docs
 @ ./node_modules/vuepress/lib/app/.temp/routes.js
 @ ./node_modules/vuepress/lib/app/app.js
 @ ./node_modules/vuepress/lib/app/clientEntry.js
 @ multi ./node_modules/vuepress/lib/app/clientEntry.js

Добавление CSS в config.js в module.exports.head работает, но по какой-то причине добавление javascript не работает (добавляется jquery, но иногда это работает и в большинстве случаевэто не).Вот что я попробовал в config.js 

head: [
["link",{ rel: "stylesheet", href: "/css/bootstrap-4.1.3/bootstrap reboot.css" } ],
["link",{ rel: "stylesheet", href: "/css/bootstrap-4.1.3/bootstrap-grid.css"}],
["link", { rel: "stylesheet", href: "/css/bootstrap-custom.css" }],
["link", { rel: "stylesheet", href: "/css/style.css" }],
["script", { src: "/js/jquery-3.3.1.min.js" }],
["script", { src: "/js/scripts.js" }]
]

РЕДАКТИРОВАТЬ: я протестировал немного больше и, видимо, даже если скрипты импортированы, я не могу выбрать элемент, который я хочу выбрать.Например, $ ('. My-elements') возвращает пустой селектор.С другой стороны, document.getElementsByClassName ('my-elements') работает и показывает элемент, который я хочу, в качестве первого элемента массива, но если я хочу выбрать этот первый элемент массива с [0] в конце, он возвращает неопределенное значение.

Я попытался выбрать элементы в консоли, используя 2 функции выше.Те же функции работают в консоли, но не работают в скрипте, это странно.

1 Ответ

0 голосов
/ 20 августа 2019

In 

.vuepress/config.js

добавить скрипт 

module.exports = {
    head: [
        ['script', {src: 'https://code.jquery.com/jquery-3.4.1.min.js'}]
    ]
}

Дополнительные документы о конфигурации головы

https://vuepress.vuejs.org/config/#head

JQuery CDN

https://code.jquery.com/

...