Vue подключить js файл

Обновлено: 15.01.2025

Я должен использовать два внешних скрипта для платежных шлюзов. Сейчас оба они помещаются в файл index.html. Однако я не хочу загружать эти файлы в самом начале. Платежный шлюз необходим только в том случае, когда пользователь открывает конкретный компонент (используя вид маршрутизатора). В любом случае, чтобы достичь этого?

Простой и эффективный способ решить эту проблему - добавить внешний скрипт в vue mount mounted() вашего компонента. Я проиллюстрирую вас сценарием Google Recaptcha:

с помощью webpack и vue загрузчика вы можете сделать что-то вроде этого

он ожидает, что внешний script загрузится до создания компонента, так что globar vars и т.д. доступны в компоненте

Я скачал некоторый шаблон HTML, который поставляется с пользовательскими файлами js и jquery. Я должен был прикрепить эти JS к моему приложению. и продолжить с Vue.

Вы можете import ваши сценарии к соответствующим (единым файлом) компонентам. До этого вам нужно export от ваших сценариев, что вы хотите import к вашим компонентам.

Вы можете загрузить нужный скрипт с помощью решения на основе обещаний:

Обратите внимание, что this.$root Root немного хакерский, и вы должны использовать вместо него решение vuex или eventHub для глобальных событий.

Вы должны превратить вышеперечисленное в компонент и использовать его там, где это необходимо, он будет загружать скрипт только при использовании.

Вы можете использовать пакет vue-head для добавления скриптов и других тегов в заголовок вашего компонента vue.

Это так же просто, как:

Проверьте эту ссылку для большего количества примеров.

Вы можете использовать vue-loader и закодировать свои компоненты в своих файлах (отдельные файловые компоненты). Это позволит вам включать скрипты и css на основе компонентов.

Лучший ответ для тега create в смонтированном файле хорош, но у него есть некоторые проблемы:

Он будет повторяться снова и снова, если вы меняете ссылку несколько раз.

Поэтому я создал скрипт для решения этой проблемы, и вы можете удалить тег, если хотите.

Это очень просто, но может сэкономить ваше время, чтобы создать его самостоятельно.

И вы можете использовать это так:

Для поддержания чистоты компонентов вы можете использовать миксин.

В ваш компонент импортируйте внешний миксин файл.

babelrc (я включаю это, если что-то застрянет при импорте)

Смысл такой. Мне нужно подключить к component.vue файл hover.js и еще разместить такой код:

Но ничего не хочет работать. Подскажите куда конкретно нужно все это разложить?

Вопрос задан более двух лет назад
1494 просмотра

Простой 2 комментария

Идем сюда и смотрим как подключать

npm install hover-effect

import hoverEffect from 'hover-effect'

для корректной работы эффекты нужно вешать после mounted, и следить за измененем списка картинок, если что-то поменялось, то вешать ховер-эффект на новые картинки.
Возможно он сам умеет замещать себя, тогда достаточно будет просто развесить заново на все картинки. Но для более конкретной инфы надо смотреть как этот сам ховер устроен.

import hover from '../script/hover.js'

Этот код должен корректно импортировать. Если так не импортируется, то проблема в файле. Есть ли в нём собственно export?

Если hoverEffect создаёт эффект, напрямую манипулируя DOM, то он может не работать потому, что это противоречит vue, в котором страница рендерится посредством манипулирования над Virtual DOM.

В любом случае, опишите подробнее, что именно вы хотите сделать (задачу, а не просто "вот код подключить"), что за библиотеку используете, какие ошибки вылезают.

Задача. Есть картинка в img, сам тег лежит в родительском блоке .grid__item-img
Вот сайт с ховером, который нужно добавить на картинку. Помимо hover.js подключается еще three.js.
Ошибку пишет, что hoverEffect is not defined. Либо вообще не отрабатывает данный скрипт

sizmailov, эта библиотека - простой js файл старой версии, не ES модуль.

При этом ей требуется также подключать ещё пару либ, THREE, например.

Вообще, учитывая, что сам hover.js довольно маленький, и не является npm пакетом, я бы предложил просто переписать его на ES модуль: добавить в него явный импорт threejs и tween (которые, конечно, надо установить через npm install), и добавить явный экспорт нужной функции hoverEffect.

Но библиотека напрямую манипулирует DOM, и скорее всего эффект будет слетать при каждом ререндере. Тут надо либо как-то шаманить с v-once и вешать эффект после рендера, либо перезапускать эффект при каждом ререндере.

Я использую два внешних скрипта для платежных шлюзов. Сейчас оба помещены в index.html файл. Однако я не хочу загружать эти файлы в самом начале. Платежный шлюз нужен только тогда, когда пользователь открывает определенный компонент ( using router-view ).

Есть ли способ добиться этого?

Простой и эффективный способ решить эту проблему - добавить внешний скрипт в vue mounted() вашего компонента. Я проиллюстрирую вас скриптом Google Recaptcha :

created() метод не может получить документ, используйте mounted() вместо него Добавьте recaptchaScript.async = true перед тем, как присоединить его к голове. recaptchaScript.defer = true может также кому подойдет

Я загрузил HTML-шаблон, который поставляется с пользовательскими файлами js и jquery. Мне пришлось прикрепить эти js к моему приложению. и продолжаем с Vue.

Это действительно изящный и простой способ сделать это. Мне нравится этот метод

используя webpack и загрузчик vue, вы можете сделать что-то вроде этого

он ожидает загрузки внешнего скрипта перед созданием компонента, поэтому в компоненте доступны глобальные переменные и т. д.

>> "Где разместить этот код?" : Он находится в разделе компонентов вашего компонента vuejs. Что делать, если вам придется использовать этот компонент несколько раз? Сценарий будет загружен несколько раз. В случае скриптов Google он выдаст предупреждения в вашей консоли.

Если вы пытаетесь встроить внешние js-скрипты в шаблон компонента vue.js, выполните следующие действия:

Я хотел добавить в свой компонент внешний код для встраивания javascript, например:

И Vue показал мне эту ошибку:

Шаблоны должны отвечать только за отображение состояния в пользовательский интерфейс. Избегайте размещения в шаблонах тегов с побочными эффектами, например, поскольку они не будут анализироваться.

Вы можете заметить defer атрибут. Если вы хотите узнать больше, посмотрите это видео Кайла.

Есть идеи, почему это работает? Отмечено ли это где-нибудь в документации?

Затем вы можете import создавать сценарии для соответствующих (отдельных файлов) компонентов. Перед этим вы должны передать export из своих скриптов то, что вы хотите, import своим компонентам.

От автора: Lodash, Moment, Axios, Async… эти полезные библиотеки JS вы хотели бы использовать во многих своих приложениях Vue.js. Однако по мере роста проекта вы будете разделять код на файл компонентов и файлы модулей. Может, вы захотите запускать приложение на разных машинах, чтобы использовать функцию серверного рендера. Если вы не найдете простой и надежный способ подключить эти JS библиотеки в компоненты и модули, будет неприятно!

Как не стоит подключать библиотеку в Vue.js проект

Глобальная переменная

Наивный способ добавить библиотеку в проект – сделать ее глобальной переменной, прицепив к объекту window:

entry.js

MyComponent.vue

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

console . log ( _ . isEmpty ( ) ? 'Lodash everywhere!' : 'Uh oh..' ) ;

Способ без window переменных долгий, и там не работает серверный рендер. Когда приложение запускается на сервере, объект window будет undefined. Поэтому вы не сможете получить его свойства, вы получите ошибку.

Импорт во все файлы

Еще один второсортный метод – импорт библиотеки во все файлы:

MyComponent.vue

console . log ( _ . isEmpty ( ) ? 'Lodash is available here!' : 'Uh oh..' ) ;

Способ работает, но не соблюдается подход DRY, да и сложно это: вам нужно помнить об импорте во все файлы, а также удалять импорт, если вы больше не используете этот файл. Если вы плохо настроите свой билд инструмент, то получите множество копий одной и той же библиотеки в билде.

Способ получше

Самый чистый и надежный способ использовать JS библиотеку в Vue проекте – проксировать его в свойство объекта прототипа Vue. Сделаем это и добавим библиотеку даты и времени Moment в наш проект:

entry.js

Все компоненты наследуют методы от объекта прототипа Vue, поэтому Moment автоматически доступен сразу во всех компонентах без глобальных переменных или ручных импортов. Библиотека доступна через любой объект/компонент через this.$moment:

MyNewComponent.vue

console . log ( 'The time is ' . this . $ moment ( ) . format ( "HH:mm" ) ) ;

Давайте разберем, как здесь все работает.

Object.defineProperty

Обычно свойство объекта задается так:

Можно сделать и так, однако с помощью Object.defineProperty мы можем задавать свойство через дескриптор. Дескриптор позволяет устанавливать низкоуровневые детали, такие как возможность перезаписывать свойство, а также возможность видимости при перечислении в цикле for.

Обычно нам такие возможности не нужны, потому что в 99% случаев нам не нужна такая детализация с назначением свойств. Но здесь мы получаем преимущество: свойства, созданные через дескриптор, по умолчанию доступны только для чтения.

Это означает, что какой-то разработчик (возможно, вы) не сможет сделать что-то глупое в компоненте и сломать все:

Наш read-only метод объекта защищает библиотеку. Если вы попробуете перезаписать ее, то получите «TypeError: Cannot assign to read only property».

Обратите внимание, что мы проксируем нашу библиотеку в свойство с префиксом $. Вы также можете заметить другие свойства и методы типа $refs, $on, $mount и т.д., у которых тоже есть этот префикс.

Префикс не обязателен, но он добавляется к свойствам как напоминание разработчикам, что это публичное API свойство или метод, в отличие от других свойств объекта, предназначенных для внутреннего использования в Vue.

Фреймворк VUE JS: быстрый старт, первые результаты

Язык JS основан на прототипах, поэтому в нем нет реальных классов, а значит, и нет private и public переменных и static методов. Такой тип объявления является мягким заменителем, но мне кажется, стоит его придерживаться.

Также обратите внимание, что для работы с библиотекой необходимо использовать this.libraryName, что не удивительно, ведь это теперь метод объекта.

Одно последствие – в отличие от глобальной переменной, вы обязаны знать, что находитесь в правильной области видимости при использовании библиотеки. Внутри колбеков нельзя использовать this.

Колбеки двойными стрелками – хороший способ убедиться, что вы остались в правильной области видимости:

Читайте также: