Vue подключить js файл
Vue не поддерживает IE8 и ниже, так как использует возможности ECMAScript 5, которые невозможно эмулировать в IE8. В остальном, поддерживаются все браузеры, совместимые с ECMAScript 5.
Инструменты разработчика и Vue
При использовании Vue мы рекомендуем установить Vue Devtools в браузере, для большего удобства выполнения проверок и отладки ваших приложений Vue.
Подключение черезНе используйте минифицированную версию во время разработки, иначе вы не будете получать предупреждения о типичных ошибках!
Версия для разработки С предупреждениями для удобства разработки и отладки
Версия для production Без предупреждений, 33.46КБ min+gzip
Для создания прототипов или в целях обучения можно использовать последнюю версию:
Для production, мы рекомендуем указывать конкретную версию и сборку, чтобы избежать неожиданных поломок при выходе новых версий:
Если используете нативные ES-модули, также существует и совместимая с ES-модулями сборка:
Vue также доступен на unpkg и cdnjs (cdnjs синхронизируется с npm с некоторой задержкой, из-за чего последняя версия может быть не всегда доступна сразу).
Обязательно прочитайте про отличия в сборках Vue и используйте версию для production на своём опубликованном сайте, заменив vue.js на vue.min.js . Это сборка оптимизирована для скорости, а не для удобства разработки.
Рекомендуем использовать npm при создании крупных приложений на Vue. Этот вариант прекрасно работает в паре с инструментами сборки, такими как Webpack и Browserify. Во Vue также есть совместимые с ними инструменты для использования однофайловых компонентов.
Информация о релизах
Версия последнего релиза: 2.6.14
Подробная информация об изменениях в каждой версии доступна на GitHub.
Глобальная переменная
Наивный способ добавить библиотеку в проект – сделать ее глобальной переменной, прицепив к объекту window:
Инструменты командной строки (CLI)
Vue.js предоставляет официальный инструментарий для командной строки (CLI) для быстрого создания каркаса амбициозных одностраничных приложений. Предлагаемые шаблоны содержат всё необходимое для организации современной фронтенд-разработки. Всего за несколько минут вы получите работающую конфигурацию с горячей перезагрузкой модулей, линтингом кода при сохранении и настроенной конфигурацией production-сборки. Подробнее вы можете изучить в документации Vue CLI.
CLI — это инструмент для тех, кто знаком с Node.js и соответствующими инструментами сборки. Если вы новичок во Vue или инструментах сборки фронтенда, рекомендуем сначала прочитать руководство, не требующее использования инструментов сборки, а уже потом разбираться с CLI.
Object.defineProperty
Обычно свойство объекта задается так:
Можно сделать и так, однако с помощью Object.defineProperty мы можем задавать свойство через дескриптор. Дескриптор позволяет устанавливать низкоуровневые детали, такие как возможность перезаписывать свойство, а также возможность видимости при перечислении в цикле for.
Обычно нам такие возможности не нужны, потому что в 99% случаев нам не нужна такая детализация с назначением свойств. Но здесь мы получаем преимущество: свойства, созданные через дескриптор, по умолчанию доступны только для чтения.
Это означает, что какой-то разработчик (возможно, вы) не сможет сделать что-то глупое в компоненте и сломать все:
Наш read-only метод объекта защищает библиотеку. Если вы попробуете перезаписать ее, то получите «TypeError: Cannot assign to read only property».
Обратите внимание, что мы проксируем нашу библиотеку в свойство с префиксом $. Вы также можете заметить другие свойства и методы типа $refs, $on, $mount и т.д., у которых тоже есть этот префикс.
Префикс не обязателен, но он добавляется к свойствам как напоминание разработчикам, что это публичное API свойство или метод, в отличие от других свойств объекта, предназначенных для внутреннего использования в Vue.
Фреймворк VUE JS: быстрый старт, первые результаты
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Язык JS основан на прототипах, поэтому в нем нет реальных классов, а значит, и нет private и public переменных и static методов. Такой тип объявления является мягким заменителем, но мне кажется, стоит его придерживаться.
Также обратите внимание, что для работы с библиотекой необходимо использовать this.libraryName, что не удивительно, ведь это теперь метод объекта.
Одно последствие – в отличие от глобальной переменной, вы обязаны знать, что находитесь в правильной области видимости при использовании библиотеки. Внутри колбеков нельзя использовать this.
Колбеки двойными стрелками – хороший способ убедиться, что вы остались в правильной области видимости:
Я должен использовать два внешних скрипта для платежных шлюзов. Прямо сейчас оба помещены в файл index.html . Однако я не хочу загружать эти файлы в самом начале. Платежный шлюз необходим только тогда, когда пользователь открывает определенный компонент ( using router-view ).
Есть ли способ добиться этого?
Простой и эффективный способ решить эту проблему - добавить внешний скрипт в vue mounted() вашего компонента. Я проиллюстрирую вас с помощью скрипта Google Recaptcha:
Для поддержания чистоты компонентов вы можете использовать миксин.
На ваш компонент импортируйте внешний миксин файл.
babelrc (я включаю это, если что-то застрянет при импорте)
Вы можете использовать пакет vue-head для добавления сценариев и других тегов в заголовок Ваш VUE компонент.
Это так просто, как:
Посмотрите эту ссылку для получения дополнительных примеров.
Используя webpack и vue loader, вы можете сделать что-то вроде этого
Он ожидает загрузки внешнего скрипта перед созданием компонента, поэтому в компоненте доступны глобальные переменные и т. д.
Верхний ответ создания тега в смонтированном файле хорош, но у него есть некоторые проблемы: если вы меняете ссылку несколько раз, она будет повторять создание тега снова и снова.
Поэтому я создал скрипт для решения этой проблемы, и вы можете удалить тег, если хотите.
Это очень просто, но может сэкономить ваше время, чтобы создать его самостоятельно.
И вы можете использовать это так:
Я скачал шаблон HTML, который поставляется с пользовательскими файлами js и jquery. Я должен был прикрепить эти JS к моему приложению. и продолжить с Vue.
Если вы пытаетесь встроить внешние js-скрипты в шаблон компонента vue.js, выполните следующие действия:
Я хотел добавить внешний код для вставки JavaScript в мой компонент следующим образом:
И Вью показал мне эту ошибку:
Шаблоны должны отвечать только за сопоставление состояния с пользовательским интерфейсом. Избегайте размещения в шаблонах тегов с побочными эффектами, например, так как они не будут анализироваться.
Вы можете заметить атрибут defer . Если вы хотите узнать больше, посмотрите это видео от Kyle
Затем вы можете import свои сценарии для соответствующих (один файл) компонентов. Перед этим вы должны export из ваших сценариев сделать то, что вы хотите import для ваших компонентов.
Вы можете загрузить нужный скрипт с помощью решения на основе обещаний:
Обратите внимание, что this.$root немного хакерский, и вы должны использовать vuex или eventHub вместо этого для глобальных событий.
Вы должны превратить все вышеперечисленное в компонент и использовать его там, где это необходимо, он будет загружать скрипт только при использовании.
Это можно сделать просто так.
Вы можете использовать vue-loader и кодировать свои компоненты в свои собственные файлы (компоненты с одним файлом) , Это позволит вам включать скрипты и CSS на основе компонентов.
MyComponent.vue
Способ работает, но не соблюдается подход DRY, да и сложно это: вам нужно помнить об импорте во все файлы, а также удалять импорт, если вы больше не используете этот файл. Если вы плохо настроите свой билд инструмент, то получите множество копий одной и той же библиотеки в билде.
Загрузчики модулей AMD
Все UMD-сборки могут быть напрямую использованы как AMD-модули.
I've to use two external scripts for the payment gateways.
Right now both are put in the index.html file.
However, I don't want to load these files at the beginning itself.
The payment gateway is needed only in when user open a specific component ( using router-view ).
Is there anyway to achieve this?
Runtime + Компилятор vs. Runtime-only
Если нужно компилировать шаблоны на клиенте (например, передаёте строку в опцию template или монтируете к элементу DOM, используя его HTML в качестве шаблона), вам потребуется компилятор, а значит, полная сборка:
При использовании vue-loader или vueify шаблоны внутри *.vue файлов будут скомпилированы в JavaScript ещё на этапе сборки. Поэтому компилятор в итоговой сборке не потребуется и можно использовать сборки runtime-only.
Так как сборки runtime-only примерно на 30% легче, в сравнении с полными, вы должны использовать их всякий раз, когда это возможно. Если вы всё равно хотите использовать полную сборку, вам потребуется настроить псевдоним в сборщике:
Webpack
Rollup
Browserify
Добавьте в package.json вашего проекта:
Parcel
Добавьте в package.json вашего проекта:
CSP-окружения
Некоторые окружения, такие как Google Chrome Apps, требуют соблюдения Content Security Policy (CSP), запрещающей использование конструкции new Function() для исполнения выражений. Полная сборка использует подобные конструкции для компиляции шаблонов, и потому непригодна к использованию в таких окружениях.
С другой стороны, runtime-сборки полностью совместимы с CSP. Если использовать их с Webpack и vue-loader или Browserify и vueify, то шаблоны компилируются на этапе сборки в render -функции, которые отлично работают в CSP-окружениях.
Способ получше
Самый чистый и надежный способ использовать JS библиотеку в Vue проекте – проксировать его в свойство объекта прототипа Vue. Сделаем это и добавим библиотеку даты и времени Moment в наш проект:
Объяснение различных сборок
В папке dist/ npm-пакета можно найти много разных сборок Vue.js. Вот краткий обзор отличий между ними:
entry.js
Все компоненты наследуют методы от объекта прототипа Vue, поэтому Moment автоматически доступен сразу во всех компонентах без глобальных переменных или ручных импортов. Библиотека доступна через любой объект/компонент через this.$moment:
Семантическое версионирование
Vue следует семантическому версионированию во всех своих официальных проектах для документирования возможностей и поведения. Для недокументированного поведения или описания внутренней логики, изменения описываются в информации о релизах.
Сборка dev-версии
Важное замечание: файлы сборки в /dist на GitHub обновляются только при релизах. Чтобы использовать версию из последних исходников с GitHub, соберите проект самостоятельно:
MyNewComponent.vue
Давайте разберем, как здесь все работает.
entry.js
Импорт во все файлы
Еще один второсортный метод – импорт библиотеки во все файлы:
Семантическое версионирование
Vue следует семантическому версионированию во всех своих официальных проектах для документирования возможностей и поведения. Для недокументированного поведения или описания внутренней логики, изменения описываются в информации о релизах.
Bower
Только UMD-сборки доступны в Bower.
MyComponent.vue
Фреймворк VUE JS: быстрый старт
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Способ без window переменных долгий, и там не работает серверный рендер. Когда приложение запускается на сервере, объект window будет undefined. Поэтому вы не сможете получить его свойства, вы получите ошибку.
Режим разработки vs. режим production
Режим разработки/production жёстко установлен в UMD-сборках: несжатые файлы для разработки и минифицированные файлы для production.
Сборки CommonJS и ES Module предназначены для инструментов сборки, поэтому мы не предоставляем минифицированных версий для них. Вы ответственны за минификацию итоговой сборки.
Сборки CommonJS и ES Module содержат проверки на process.env.NODE_ENV для определения режима, в котором они должны выполняться. Вы должны использовать соответствующие возможности систем сборки для переопределения этих переменных окружения, чтобы контролировать режим, в котором Vue будет запускаться. Замена process.env.NODE_ENV на строковый литерал позволяет минификаторам, таким как UglifyJS, удалять целые блоки кода, предназначенные только для разработки, уменьшая итоговый размер файла.
Webpack
С версии Webpack 4+ можно использовать опцию mode :
Но в Webpack 3 и более ранних версиях необходимо использовать DefinePlugin:
Rollup
Browserify
Примените глобальную трансформацию envify для вашей сборки.
Как не стоит подключать библиотеку в Vue.js проект
17 Answers 17
A simple and effective way to solve this, it's by adding your external script into the vue mounted() of your component. I will illustrate you with the Google Recaptcha script:
Hello! I tried this solution. I want to load a script from project src/assets/js/ folder but it has error uncaught SyntaxError: Unexpected token '
@marius you should add an onLoad event listener and event handler to that script. Meaning a function that runs when that scripts onLoad event triggers.
I have downloaded some HTML template that comes with custom js files and jquery. I had to attach those js to my app. and continue with Vue.
using webpack and vue loader you can do something like this
it waits for the external script to load before creating the component, so globar vars etc are available in the component
What if you have to use this component several times? You will have script loaded multiple times. In case of google scripts it will throw warnings in your console.
Can you explain what's going on with import(someComponent) ? Does the script you're loading have to be defined as an es module? Does this not work if you are importing a script that attaches itself to window ?
UPDATE: This no longer works in Vue 3. You will receive this error:
VueCompilerError: Tags with side effect ( and ) are ignored in client component templates.
If you are trying to embed external js scripts to the vue.js component template, follow below:
I wanted to add a external JavaScript embed code to my component like this:
And Vue showed me this error:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.
The way I solved it was by adding type="application/javascript" (See this question to learn more about MIME type for js):
You may notice the defer attribute. If you want to learn more watch this video by Kyle
Смысл такой. Мне нужно подключить к component.vue файл hover.js и еще разместить такой код:
Но ничего не хочет работать. Подскажите куда конкретно нужно все это разложить?
Простой 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 и вешать эффект после рендера, либо перезапускать эффект при каждом ререндере.
От автора: Lodash, Moment, Axios, Async… эти полезные библиотеки JS вы хотели бы использовать во многих своих приложениях Vue.js. Однако по мере роста проекта вы будете разделять код на файл компонентов и файлы модулей. Может, вы захотите запускать приложение на разных машинах, чтобы использовать функцию серверного рендера. Если вы не найдете простой и надежный способ подключить эти JS библиотеки в компоненты и модули, будет неприятно!
Термины
Полная: сборка, которая содержит runtime и компилятор шаблонов.
Компилятор: код, который отвечает за компиляцию строковых шаблонов в render -функции JavaScript.
Runtime: код, который отвечает за создание экземпляров Vue, отрисовку и изменение виртуального DOM и т.д. По сути, это всё, кроме компилятора.
ES-модули: начиная с версии 2.6, Vue предоставляет две сборки ES-модулей (ESM):
ESM для браузеров (только 2.6.0+): предназначена для импорта в современных браузерах через .
Читайте также: