Как глобально объявить jQuery внутри проекта Vue-CLI 3?
Я видел много вопросов об этом на SO и в других местах, но пока мне не повезло.
Для небольшого контекста я создал веб-сайт SPA на основе проекта Vue, который я создал с помощью «старой» команды. Не помню, какой, но выглядел он примерно так:
vue init webpack <my project>
Недавно я понял, что мне будет проще поддерживать, обновлять и улучшать Vue-CLI 3 по разным контекстным причинам, поэтому я установил @vue/cli, создал новый проект и начал копировать / вставлять файлы из моего старого проекта в новый. .
В старом проекте был каталог build с различными конфигурационными файлами webpack, и мне нужно было, чтобы jQuery был установлен глобально для пакета, который я хотел использовать, поэтому я добавил следующее в «базовую» конфигурацию Webpack.
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
Однако с новым проектом все, что у меня есть в качестве файла конфигурации, - это babel.config.js и vue.config.js в корне проекта, нет ни build, ни каталога config.
Я попытался установить jQuery глобально с помощью следующих строк в моем файле main.js:
import jQuery from 'jquery'
window.$ = window.jQuery = jQuery
global.$ = global.jQuery = jQuery
Но каждый раз, когда я перезагружаю свою страницу, я получаю следующее сообщение:
jQuery is not defined
Итак, пока я использую CDN-версию jQuery, но мне не нравится это решение.
Как мне продолжить работу над проектом Vue-CLI 3?
заранее спасибо
Дело в том, что я не могу найти или заставить пакет vanilla js работать в контексте Vue ..
Вам просто нужно использовать import jquery from jquery в начале каждого .js / .vue, в котором он вам нужен, а затем jquery ("# id"). Anywhere) `
Вы, возможно, могли бы добавить его в Vue() и получить к нему доступ через this.$jquery внутри файлов .vue, вы еще не пробовали.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете перейти на public / index.html и добавить тег скрипта в тело с маршрутом к вашему файлу jquery или cdn. Если вы поместите его в общедоступную папку jquery, это будет выглядеть так:
<body>
<div id = "app"></div>
<script type = "text/javascript" src = "/jquery/jquery-3.4.1.min.js"></script>
</body>
Я не уверен, что это именно то, что вам нужно, но это сделает его доступным во всем вашем проекте.
Если вы используете плагины JQuery, вы должны сделать это в своем main.js:
/*
* If using Jquery plugins they will expect to be available in the global namespace,
* which isn’t the case when you import/require it. So manually assign jquery to
* window. Use require instead of import because the imports are hoisted to the
* top of a file by the compiler, which would break VueJS code.
*/
const $ = require('jquery')
window.jQuery = window.$ = $;
Вы можете использовать плагины Vue. Это позволяет добавлять новое свойство к каждому отдельному компоненту.
В main.js
import Vue from 'vue';
import jQuery from 'jquery';
Vue.use({
install (V) {
V.$jQuery = V.prototype.$jQuery = jQuery
}
})
Тогда вы можете использовать jQuery везде в компоненте.
В MyComponent.vue
import Vue from 'vue'
export default {
mounted () {
this.$jQuery('h1').text('Hello World')
Vue.$jQuery('h1').text('Hello World')
}
}
Еще один файл js.
В util.js
import Vue from 'vue'
Vue.$jQuery('h1').text('Hello World')
Не надо! Суть современного механизма шаблонов, такого как Vue, заключается в том, что вы не используете устаревшую библиотеку, такую как jQuery. Только не надо!