Как подключить Vue без npm?
Vue нужен на проекте который изначально написан на PHP. Очень изолированно нужен в одном месте для чата. Пытаюсь подключить:
И в main.js
import Chat from './Chat' new Vue(< el: '#chat', template: '', components: , >) Так выдает 404 на import Chat from ‘./Chat’ . Если же добавить расширение import Chat from ‘./Chat.vue’ то пишет ошибку:
Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec. # Установка
Vue.js изначально разрабатывался быть инкрементально адаптируемым. Это значит, что он может быть интегрирован в проект несколькими способами, в зависимости от требований.
Есть четыре основных способа добавления Vue.js в проект:
- Импорт CDN пакета на странице
- Скачивание файлов JavaScript и их самостоятельный хостинг
- Установка с использованием npm
- Использование официального CLI для развёртывания проекта, предоставляющего продвинутые инструменты для создания современного рабочего процесса разработки фронтенда (например, горячая перезагрузка, линтинг при сохранении и многое другое).
# История изменений
Подробная история изменений для каждой версии доступна на GitHub
# Инструменты разработчика
На данный момент в бета-тестировании — интеграция с Vuex и Router в разработке
При использовании Vue рекомендуем установить расширение Vue Devtools
(opens new window) для браузера, которое позволит легче проверять и отлаживать приложения на Vue в удобном интерфейсе.
# CDN
Для прототипов и в обучающих целях можно использовать последнюю версию с CDN:
script src="https://unpkg.com/vue@next"> script> Для production рекомендуется указывать конкретную версию и сборку, чтобы избежать неожиданных поломок при выходе новых версий.
# Скачивание и самостоятельный хостинг
Если нужно избежать использования систем сборки, но нет возможности использовать CDN в production — в таком случае можно скачать соответствующий .js файл и разместить его на собственном веб-сервере. После чего подключать его, с помощью тега , точно также, как и при подключении с CDN.
Можно просматривать и скачивать файлы с CDN, например unpkg
(opens new window) . Различия файлов сборок подробнее объясняются ниже, но обычно потребуется загрузить обе сборки: для разработки и для production.
# npm
npm — рекомендованный способ установки при создании больших приложений на Vue. Он прекрасно сочетается с системами сборки, такими как webpack
# установка последней стабильной версии $ npm install vue@next Также Vue предоставляет инструменты для создания однофайловых компонентов (также именуемых как SFC). Если хотите их использовать, то также потребуется установить @vue/compiler-sfc :
$ npm install -D @vue/compiler-sfc Обратите внимание, если выполняете миграцию с Vue 2, то @vue/compiler-sfc заменяет используемый ранее vue-template-compiler .
Кроме @vue/compiler-sfc также понадобится подходящий загрузчик SFC или плагин для системы сборки. Более подробную информацию можно найти в разделе про однофайловые компоненты.
В большинстве случаев предпочтительным способом создания сборки с webpack и минимальной конфигурацией будет использование Vue CLI.
# CLI
(opens new window) для быстрого создания каркаса одностраничных приложений (SPA). Предлагаемые шаблоны содержат всё необходимое для организации современной фронтенд-разработки. За несколько минут можно получить работающую конфигурацию с горячей перезагрузкой модулей, линтингом кода при сохранении и настроенной конфигурацией production-сборки.
Использование CLI предполагает наличие знаний о Node.js и связанных с ней инструментов сборки. Новичкам во Vue или в инструментах сборки фронтенда настоятельно рекомендуем сначала прочитать руководство без применения каких-либо систем сборки прежде чем начинать использовать CLI.
Для Vue 3 требуется использовать Vue CLI v4.5, доступная в npm по имени @vue/cli . Для обновления необходимо переустановить последнюю версию @vue/cli глобально:
yarn global add @vue/cli # ИЛИ npm install -g @vue/cli После установки в проекте Vue необходимо выполнить:
vue upgrade --next # Vite
(opens new window) — инструмент для сборки веб-приложений, предлагающий исключительно быструю обработку кода, благодаря применяемому подходу по использованию нативных импортов ES-модулей.
Быстро развернуть проект на Vue используя Vite можно с помощью следующих команд.
# npm 6.x $ npm init vite@latest project-name> --template vue # npm 7+, НУЖНО дополнительное двойное тире: $ npm init vite@latest project-name> -- --template vue $ cd project-name> $ npm install $ npm run dev 1
2
3
4
5
6
7
8
9
или используя Yarn:
$ yarn create vite project-name> --template vue $ cd project-name> $ yarn $ yarn dev или с помощью pnpm:
$ pnpm create vite project-name> -- --template vue $ cd project-name> $ pnpm install $ pnpm dev # Объяснение различий сборок
(opens new window) можно обнаружить несколько различных сборок Vue.js. Рассмотрим подробнее какой файл из dist для каких случаев должен использоваться.
# Из CDN или без системы сборки
# vue(.runtime).global(.prod).js :
- Для использования напрямую, через в браузере, предоставляет глобальный доступ к Vue.
- Компиляция шаблонов в браузере:
- vue.global.js — «полная» сборка, которая включает в себя и компилятор шаблонов и runtime, поэтому поддерживает компиляцию шаблонов «на лету».
- vue.runtime.global.js — содержит только runtime и требует чтобы шаблоны были предварительно скомпилированы на этапе сборки.
Глобальные сборки не являются UMD
(opens new window) и предназначаются только для использования напрямую через .
# vue(.runtime).esm-browser(.prod).js :
- Для использования в нативных импортах ES-модулей (в браузере через ).
- Предоставляет ту же компиляцию в runtime, содержит все внутренние зависимости и жёстко заданное поведение для production/разработки глобальной сборки.
# С использованием системы сборки
# vue(.runtime).esm-bundler.js :
- Для использования с системами сборки, такими как webpack , rollup и parcel .
- Определение поведения для production/разработки условиями с process.env.NODE_ENV (значение будет подменяться системой сборки)
- Нет готовых минифицированных сборок (минификация должна выполняться системой сборки, как и для всего остального кода)
- Импорт зависимостей (например, @vue/runtime-core , @vue/runtime-compiler )
- Импортируемые зависимости также являются esm-сборками и, в свою очередь, будут импортировать свои зависимости (например, @vue/runtime-core импортирует @vue/reactivity )
- Это означает, что можно устанавливать/импортировать зависимости по-отдельности и не оказаться в ситуации с разными экземплярами этих зависимостей, но всё равно следует убедиться, что все они разрешаются одной и той же версией.
- vue.runtime.esm-bundler.js (по умолчанию) — содержит только runtime и требует чтобы все шаблоны были предварительно скомпилированы. По умолчанию это точка входа для систем сборки (через поле module в package.json ), потому что обычно при их применении шаблоны компилируются на этапе сборки (например, в файлах *.vue ).
- vue.esm-bundler.js — содержит компилятор шаблонов. Следует использовать когда есть система сборки, но всё равно нужна компиляция шаблонов «на лету» (например, шаблоны в DOM или в виде инлайн-строк JavaScript). Потребуется настроить систему сборки, чтобы псевдоним vue вёл к этому файлу.
# Для отрисовки на стороне сервера (SSR)
# vue.cjs(.prod).js :
- Для использования отрисовки на стороне сервера в Node.js через require() .
- При сборке приложения с помощью webpack с опцией target: ‘node’ и корректной экстернализацией vue — это та сборка, которая будет загружена.
- Есть предварительно собранные файлы для разработки/production, но соответствующий файл будет автоматически выбираться на основе значения process.env.NODE_ENV .
# Runtime + Компилятор vs. Runtime-only
При необходимости компилировать шаблоны на клиенте (например, если передаёте строку в опцию template или монтируетесь к элементу DOM, используя его HTML в качестве шаблона) потребуется компилятор шаблонов, а с ним и подключение полной сборки:
// нужен компилятор шаблонов Vue.createApp( template: 'div>< hi >>div>' >) // можно обойтись без него Vue.createApp( render() return Vue.h('div', >, this.hi) > >)1
2
3
4
5
6
7
8
9
10
11При использовании vue-loader шаблоны внутри файлов *.vue будут предварительно компилироваться в JavaScript на этапе сборки. Поэтому в итоговой сборке компилятор шаблонов уже не будет нужен и можно использовать более лёгкую runtime-only сборку.
(opens new window)
Последнее обновление страницы: больше 1 года назадПодключение Vue.js ( vue-loader )
Предпочитаете видео-туториалы? Посмотрите серию скринкастов Vue.
Просмотрите живые демо Symfony UX компонента Vue.js component на https://ux.symfony.com/vue!
Вы хотите использовать Vue.js? Не проблема! Для начала, подключите его в webpack.config.js :
1 2 3 4 5 6 7 8 9
// webpack.config.js // . Encore // . .addEntry('main', './assets/main.js') + .enableVueLoader() ;Затем перезапустите Encore. Когда вы это сделаете, он даст вам команду, которую вы можете выполнить, чтобы установить все недостающие зависимости. После выполнения этой команды и перезапуска Encore, вы закончили!
Любые файлы .vue , которые вам понадобятся, будут обработаны правильно. Вы также можете сконфигурировать опции vue-загрузчика, передав обратный вызов опций в enableVueLoader() . Смотрите файл Encore index.js, чтобы увидеть детальную документацию.
Компоновка компилятора среды выполнения
По умолчанию, Encore использует «компоновку» Vue, которая позволяет вам компилировать шаблоны во время выполнения. Это означает, что вы можете сделать одно из этого:
1 2 3 4 5 6 7
new Vue(< template: '>' >) new Vue(< el: '#app', // гдев вашем DOM содержит шаблон Vue >);Если вам не нужна эта функциональность (например, вы используете компоненты единого файла), то вы можете сказать Encore создать меньшую компоновку, следуя Политике безопасности содержания:
1 2 3 4 5 6 7 8
// webpack.config.js // . Encore // . .enableVueLoader(() => <>, < runtimeCompilerBuild: false >) ;Вы также можете заглушить рекомендации, передав runtimeCompilerBuild: true .
Замена горячего модуля (HMR)
vue-loader поддерживает замену горячего модуля: просто обновите ваш код, и наблюдайте за обновлением вашего Vue.js приложения без обновления браузера! Чтобы активировать его, просто используйте dev-server :
1 2 3 4 5
# если вы используете менеджер пакетов Yarn $ yarn encore dev-server # если вы используете менеджер пакетов npm $ npm run dev-serverВот и всё! Измените один из ваших файлов .vue и смотрите, как обновляется ваш браузер. Но заметьте: это на данный момент не работает для изменений стиля в файле .vue . Чтобы увидеть обновлённые стили, вам придётся перезагрузить страницу.
Поддержка JSX
Вы можете подключить JSX с помощью Vue.js, сконфигурировав второй параметр метода .enableVueLoader() :
1 2 3 4 5 6 7 8 9 10 11 12
// webpack.config.js // . Encore // . .addEntry('main', './assets/main.js') - .enableVueLoader() + .enableVueLoader(() => <>, + useJsx: true + >) ;Затем, запустите или перезапустите Encore. Когда вы это сделаете, вы увидите сообщение об ошибке, помогающее вам установить все недостающие зависимости. После выполнения этой команды и перезапуска Encore, вы закончили!
Ваши файлы .jsx теперь будут преобразованы через @vue/babel-preset-jsx .
Использование стилей
Вы не можете использовать в файлах .jsx . В качестве обходного пути, вы можете вручную импортировать файлы .css , .scss , и др.:
1 2 3 4 5 6 7 8 9 10 11 12 13
// App.jsx import './App.css' export default < name: 'App', render() < return ( div> . div> ) > >Импорт стилей таким образом делает их глобальными. Смотрите следующий раздел, чтобы определить их область действия для вашего компонента.
Использование стилей с областью действия
Вы также не можете использовать стили с областью действия ( ) в файлах .jsx . В качестве обходного пути, вы можете использовать модули CSS, добавив к путям импорта суффикс ?module :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
// Component.jsx import styles from './Component.css?module' // suffix with "?module" export default < name: 'Component', render() < return ( div> h1 class= > Hello World h1> div> ) > >1 2 3 4 5
/* Component.css */ .title < color: red >Вывод будет чем-то вроде
Hello World
.
Использование изображений
Вы не можете использовать в файлах .jsx . В качестве обходного пути, вы можете импортировать их с помощью функции require() :
1 2 3 4 5 6 7 8 9 10
export default < name: 'Component', render() < return ( div> img src=Использование Vue внутри шаблонов Twig
Шаблоны Twig могут инстанциировать приложение Vue.js так же, как и любой другой код JavaScript. Однако, учитывая, что и Twig, и Vue.js используют одинаковые разделители для переменных, вы должны сконфигурировать опцию Vue.js delimiters , чтобы она изменяла разделители переменных по умолчанию.
Если вы установите, к примеру, delimiters: [‘$$’] , то вы можете использовать следующее в ваших шаблонах Twig:
Введение
Vue (произносится /vjuː/, примерно как view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его совместно с современными инструментами и дополнительными библиотеками.
Если вы хотите узнать больше о Vue перед тем как начать, мы создали видео с рассказом об основных принципах работы на примере проекта.
Если вы — опытный фронтенд-разработчик, и хотите узнать, чем Vue отличается от остальных библиотек или фреймворков, обратите внимание на сравнение с другими фреймворками.
Начало работы
В этом руководстве мы предполагаем, что вы уже знакомы с HTML, CSS и JavaScript на базовом уровне. Если же вы во фронтенд-разработке совсем новичок, начинать сразу с изучения фреймворка может быть не лучшей идеей — возвращайтесь, разобравшись с основами! Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.
Проще всего попробовать Vue.js, начав с примера Hello World. Откройте его в другой вкладке, и изменяйте по ходу чтения руководства. Можно и просто создать index.html файл на диске и подключить Vue:
script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> script>
script src="https://cdn.jsdelivr.net/npm/vue@2"> script>В разделе по установке описаны и другие варианты установки Vue. Обратите внимание, мы не рекомендуем новичкам начинать с vue-cli , особенно если нет опыта работы с инструментами сборки Node.js.
Если предпочитаете что-то более интерактивное, можете пройти эту серию уроков на Scrimba, которая представляет собой сочетание скринкастов и песочницы для проверки примеров кода, где вы можете остановиться и продолжить изучение в любое время.
Декларативная отрисовка
В ядре Vue.js находится система, которая позволяет декларативно отображать данные в DOM с помощью простых шаблонов:
div id="app">
{{ message }}
div>var app = new Vue({
el: '#app',
data: {
message: 'Привет, Vue!'
}
})Вот мы и создали наше первое Vue-приложение! Выглядит как простая отрисовка шаблона, но «под капотом» Vue выполнил немало работы. Данные и DOM теперь реактивно связаны. Как это проверить? Просто откройте консоль JavaScript в браузере (прямо здесь, на этой странице) и задайте свойству app.message новое значение. Вы тут же увидите соответствующее изменение в браузере.
Обратите внимание, что теперь больше не нужно напрямую взаимодействовать с HTML. Приложение Vue присоединяется к одному элементу DOM ( #app в данном случае), а затем полностью контролирует его. HTML является нашей точкой входа, но всё остальное происходит внутри вновь созданного экземпляра Vue.
Кроме интерполяции текста, можно также связывать атрибуты элементов:
div id="app-2">
span v-bind:title="message">
Наведи на меня курсор на пару секунд,
чтобы увидеть динамически связанное значение title!
span>
div>var app2 = new Vue({
el: '#app-2',
data: {
message: 'Вы загрузили эту страницу: ' + new Date().toLocaleString()
}
})Наведи на меня курсор на пару секунд, чтобы увидеть динамически связанное значение title!
Здесь мы встречаемся с чем-то новым. Атрибут v-bind , называется директивой. Директивы имеют префикс v- , указывающий на их особую природу. Как вы уже могли догадаться, они добавляют к отображаемому DOM особое реактивное поведение, управляемое Vue. В данном примере директива говорит «сохраняй значение title этого элемента актуальным при изменении свойства message в экземпляре Vue».
Откройте консоль JavaScript и введите app2.message = ‘новое сообщение’ , вы увидите как связанный код HTML — в нашем случае, атрибут title — обновился.
Условия и циклы
Управлять присутствием элемента в DOM тоже довольно просто:
div id="app-3">
span v-if="seen">Сейчас меня видно span>
div>var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})Сейчас меня видно
Попробуйте ввести в консоли app3.seen = false . Сообщение пропадёт.
Этот пример демонстрирует возможность связывать данные не только с текстом и атрибутами, но и со структурой DOM. Более того, Vue также имеет мощную систему анимации, которая автоматически применяет эффекты переходов, когда элементы добавляются/обновляются/удаляются.
Есть и другие директивы, каждая из которых имеет своё предназначение. Например, директива v-for для отображения списков, используя данные из массива:
div id="app-4">
ol>
li v-for="todo in todos">
{{ todo.text }}
li>
ol>
div>var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Изучить JavaScript' },
{ text: 'Изучить Vue' },
{ text: 'Создать что-нибудь классное' }
]
}
})Введите в консоли app4.todos.push({ text: ‘Profit’ }) . Вы увидите, что к списку добавится новый элемент.
Работа с пользовательским вводом
Чтобы пользователи могли взаимодействовать с вашим приложением, используйте директиву v-on для отслеживания событий, указав метод-обработчик:
div id="app-5">
p>{{ message }} p>
button v-on:click="reverseMessage">Перевернуть сообщение button>
div>var app5 = new Vue({
el: '#app-5',
data: {
message: 'Привет, Vue.js!'
},
methods: {
reverseMessage: function ( ) {
this.message = this.message.split('').reverse().join('')
}
}
})Обратите внимание, в методе мы просто обновляем состояние приложения, не затрагивая DOM — всю работу с DOM выполняет Vue, а вы пишете код, который занимается только логикой приложения.
Vue также предоставляет директиву v-model , позволяющую легко связывать элементы форм и состояние приложения:
div id="app-6">
p>{{ message }} p>
input v-model="message">
div>var app6 = new Vue({
el: '#app-6',
data: {
message: 'Привет, Vue!'
}
})Разбиение приложения на компоненты
Важной концепцией Vue являются компоненты. Эта абстракция позволяет собирать большие приложения из маленьких «кусочков». Они представляют собой пригодные к повторному использованию объекты. Если подумать, почти любой интерфейс можно представить как дерево компонентов:
Во Vue компонент — это, по сути, экземпляр Vue с предустановленными опциями. Создать новый компонент во Vue просто:
Теперь его можно использовать в шаблоне другого компонента:
ol>
todo-item> todo-item>
ol>Пока что у нас получилось так, что во всех элементах списка будет один и тот же текст — это не очень-то интересно. Хотелось бы иметь возможность передавать данные от родительского в дочерние компоненты. Давайте изменим определение компонента, чтобы он мог принимать входной параметр:
Теперь можно передать текст задачи в каждый компонент с помощью v-bind :
div id="app-7">
ol>
Теперь мы можем передать каждому компоненту todo-item объект
с информацией о задаче, который будет динамически меняться.
Мы также определяем для каждого компонента "key",
значение которого мы разберём далее в руководстве.
-->
todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
> todo-item>
ol>
div>Конечно, этот пример слегка надуман, но посмотрите сами — мы разделили наше приложение на два меньших объекта, и дочерний, в разумной мере, отделён от родительского с помощью интерфейса входных параметров. Теперь можно улучшать компонент , усложнять его шаблон и логику, но не влиять на родительское приложение.
В крупных приложениях разделение на компоненты становится обязательным условием для сохранения управляемости процесса разработки. Разговор о компонентах ещё далеко не окончен и мы вернёмся к ним позднее в этом руководстве, но уже сейчас можно взглянуть на (вымышленный) пример того, как может выглядеть шаблон приложения, использующего компоненты:
div id="app">
app-nav> app-nav>
app-view>
app-sidebar> app-sidebar>
app-content> app-content>
app-view>
div>Отношение к пользовательским элементам Web Components
Вы могли заметить, что компоненты Vue довольно похожи на пользовательские элементы, являющиеся частью спецификации W3C Web Components. Дело в том, что синтаксис компонентов Vue и правда намеренно следует этой спецификации. В частности, компоненты Vue реализуют API слотов и специальный атрибут is . Но есть и несколько ключевых различий:
- Спецификация Web Components была завершена, но она реализована ещё не во всех браузерах. Safari 10.1+, Chrome 54+ и Firefox 63+ уже поддерживают веб-компоненты. Компоненты Vue, напротив, не требуют никаких полифилов и работают во всех поддерживаемых браузерах (IE9 и выше). При необходимости компоненты Vue могут быть «обёрнуты» в нативные пользовательские элементы.
- Компоненты Vue предоставляют возможности, недоступные в простых пользовательских элементах. Самые значимые из них: кросс-компонентная передача данных, коммуникация с использованием пользовательских событий и интеграция с инструментами сборок.
Готовы к большему?
Пока мы лишь кратко представили самые основные возможности ядра Vue.js — остаток этого руководства посвящён более детальному рассмотрению этих и других возможностей, поэтому советуем прочитать его целиком!
Видео Vue Mastery. Посмотрите бесплатный курс Vue Mastery Введение в курс Vue.
Обнаружили ошибку или хотите добавить что-то своё в документацию? Измените эту страницу на GitHub! Опубликовано на Netlify .