Как подключить 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 Component к файлу HTML

Как подключить часть html к другому html файлу?
Всем привет! В php есть удобная функция include которая позволяет подключить php файл к основному.

Как подключить html файл к css файлу?
Доброго времени суток! Простой пример. html-файл. У меня не работает подключение к css файлу.

[Vue warn]: Failed to mount component: template or render function not defined
После сборки йарном выводится в консоли: : Failed to mount component: template or render function.

the hardway first

2455 / 1831 / 904
Регистрация: 05.06.2015
Сообщений: 3,599

TreeComponent.vue — это однофайловый компонент VueJS. Без предварительного шага сборки вы не подключите его просто использовав

script src="index.js">/script>

Подробнее читайте в руководстве
38 / 27 / 12
Регистрация: 13.09.2019
Сообщений: 126

j2FunOnly, Т.е. таким образом я не смогу вынести часть Vue кода в отдельный компонент и подключить(внедрить) его без NPM run dev на хостинге? Я правильно понимаю?
Нужен ли для шага сборки сервер на Node Js?
Получается придется все Vue писать в html файле?

Работал немного с GULP и npm, как делается сборка на хостинге не представляю, просветите?

the hardway first

Эксперт JS

2455 / 1831 / 904
Регистрация: 05.06.2015
Сообщений: 3,599

Цитата Сообщение от Cheeeasy2501 Посмотреть сообщение

NPM run dev на хостинге

Вы, конечно, можете свой VPS/VDS настроить на работу в таком режиме, но лучше изучите сборку и публикацию приложений.

431 / 302 / 89
Регистрация: 03.12.2015
Сообщений: 738

Цитата Сообщение от Cheeeasy2501 Посмотреть сообщение

Т.е. таким образом я не смогу вынести часть Vue кода в отдельный компонент и подключить(внедрить) его без NPM run dev на хостинге? Я правильно понимаю?

Нет, ты можешь сделать «NPM run dev» на рабочей машине, а сгенерированный в результате этого код выложить на хостинг

38 / 27 / 12
Регистрация: 13.09.2019
Сообщений: 126

Вопрос актуален) Как правильно подключать модули? Хоть убей не понял почему не получается. Было бы великолепно, если бы нашелся тот, кто от и до расписал бы как это делать? Подключаю к бэкэнд админке.

431 / 302 / 89
Регистрация: 03.12.2015
Сообщений: 738

Почитай про vue cli. С помощью него можно создать новый пустой проект. В нем будут настроен webpack и другие нужные вещи, а также будут работать команды npm run dev и npm run build, и т.п.

Добейся запуска пустого проекта. Много вопросов отпадут, когда решишь эту задачу.

Далее исправляй этот пустой проект — добавляй свой код

38 / 27 / 12
Регистрация: 13.09.2019
Сообщений: 126

vrm2, Почитал, но не получается. Собственно импортирую этот плагин: https://github.com/xiaokaike/vue-color

консоль: npm i vue-color
npm init
В файле app.vue пишу

import { Photoshop } from 'vue-color'

1 2 3 4

components: { HelloWorld, 'photoshop-picker': Photoshop }

/photoshop-picker>

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in data(): "TypeError: Cannot read property 'h' of undefined" found in ---> at src/components/Photoshop.vue at src/App.vue warn @ vue.runtime.esm.js?2b0e:619 logError @ vue.runtime.esm.js?2b0e:1884 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 getData @ vue.runtime.esm.js?2b0e:4744 initData @ vue.runtime.esm.js?2b0e:4699 initState @ vue.runtime.esm.js?2b0e:4636 Vue._init @ vue.runtime.esm.js?2b0e:5000 VueComponent @ vue.runtime.esm.js?2b0e:5148 createComponentInstanceForVnode @ vue.runtime.esm.js?2b0e:3283 init @ vue.runtime.esm.js?2b0e:3114 createComponent @ vue.runtime.esm.js?2b0e:5972 createElm @ vue.runtime.esm.js?2b0e:5919 createChildren @ vue.runtime.esm.js?2b0e:6047 createElm @ vue.runtime.esm.js?2b0e:5948 patch @ vue.runtime.esm.js?2b0e:6471 Vue._update @ vue.runtime.esm.js?2b0e:3939 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5972 createElm @ vue.runtime.esm.js?2b0e:5919 patch @ vue.runtime.esm.js?2b0e:6510 Vue._update @ vue.runtime.esm.js?2b0e:3939 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 eval @ main.js?56d7:7 ./src/main.js @ app.js:1085 __webpack_require__ @ app.js:786 fn @ app.js:151 1 @ app.js:1099 __webpack_require__ @ app.js:786 checkDeferredModules @ app.js:46 (anonymous) @ app.js:862 (anonymous) @ app.js:865 Show 11 more frames vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'h' of undefined at r (vue-color.min.js?d99a:1) at VueComponent.data (vue-color.min.js?d99a:1) at VueComponent.mergedDataFn (vue.runtime.esm.js?2b0e:1220) at getData (vue.runtime.esm.js?2b0e:4742) at initData (vue.runtime.esm.js?2b0e:4699) at initState (vue.runtime.esm.js?2b0e:4636) at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5000) at new VueComponent (vue.runtime.esm.js?2b0e:5148) at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283) at init (vue.runtime.esm.js?2b0e:3114) logError @ vue.runtime.esm.js?2b0e:1888 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 getData @ vue.runtime.esm.js?2b0e:4744 initData @ vue.runtime.esm.js?2b0e:4699 initState @ vue.runtime.esm.js?2b0e:4636 Vue._init @ vue.runtime.esm.js?2b0e:5000 VueComponent @ vue.runtime.esm.js?2b0e:5148 createComponentInstanceForVnode @ vue.runtime.esm.js?2b0e:3283 init @ vue.runtime.esm.js?2b0e:3114 createComponent @ vue.runtime.esm.js?2b0e:5972 createElm @ vue.runtime.esm.js?2b0e:5919 createChildren @ vue.runtime.esm.js?2b0e:6047 createElm @ vue.runtime.esm.js?2b0e:5948 patch @ vue.runtime.esm.js?2b0e:6471 Vue._update @ vue.runtime.esm.js?2b0e:3939 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5972 createElm @ vue.runtime.esm.js?2b0e:5919 patch @ vue.runtime.esm.js?2b0e:6510 Vue._update @ vue.runtime.esm.js?2b0e:3939 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 eval @ main.js?56d7:7 ./src/main.js @ app.js:1085 __webpack_require__ @ app.js:786 fn @ app.js:151 1 @ app.js:1099 __webpack_require__ @ app.js:786 checkDeferredModules @ app.js:46 (anonymous) @ app.js:862 (anonymous) @ app.js:865 Show 10 more frames vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: "TypeError: Cannot read property 'hex' of undefined" found in ---> at src/components/Photoshop.vue at src/App.vue warn @ vue.runtime.esm.js?2b0e:619 logError @ vue.runtime.esm.js?2b0e:1884 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862 callHook @ vue.runtime.esm.js?2b0e:4213 Vue._init @ vue.runtime.esm.js?2b0e:5002 VueComponent @ vue.runtime.esm.js?2b0e:5148 createComponentInstanceForVnode @ vue.runtime.esm.js?2b0e:3283 init @ vue.runtime.esm.js?2b0e:3114 createComponent @ vue.runtime.esm.js?2b0e:5972 createElm @ vue.runtime.esm.js?2b0e:5919 createChildren @ vue.runtime.esm.js?2b0e:6047 createElm @ vue.runtime.esm.js?2b0e:5948 patch @ vue.runtime.esm.js?2b0e:6471 Vue._update @ vue.runtime.esm.js?2b0e:3939 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5972 createElm @ vue.runtime.esm.js?2b0e:5919 patch @ vue.runtime.esm.js?2b0e:6510 Vue._update @ vue.runtime.esm.js?2b0e:3939 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 eval @ main.js?56d7:7 ./src/main.js @ app.js:1085 __webpack_require__ @ app.js:786 fn @ app.js:151 1 @ app.js:1099 __webpack_require__ @ app.js:786 checkDeferredModules @ app.js:46 (anonymous) @ app.js:862 (anonymous) @ app.js:865 Show 10 more frames vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'hex' of undefined at VueComponent.created (vue-color.min.js?d99a:1) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at callHook (vue.runtime.esm.js?2b0e:4213) at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5002) at new VueComponent (vue.runtime.esm.js?2b0e:5148) at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283) at init (vue.runtime.esm.js?2b0e:3114) at createComponent (vue.runtime.esm.js?2b0e:5972) at createElm (vue.runtime.esm.js?2b0e:5919) at createChildren (vue.runtime.esm.js?2b0e:6047) logError @ vue.runtime.esm.js?2b0e:1888 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862 callHook @ vue.runtime.esm.js?2b0e:4213 Vue._init @ vue.runtime.esm.js?2b0e:5002 VueComponent @ vue.runtime.esm.js?2b0e:5148 createComponentInstanceForVnode @ vue.runtime.esm.js?2b0e:3283 init @ vue.runtime.esm.js?2b0e:3114 createComponent @ vue.runtime.esm.js?2b0e:5972 createElm @ vue.runtime.esm.js?2b0e:5919 createChildren @ vue.runtime.esm.js?2b0e:6047 createElm @ vue.runtime.esm.js?2b0e:5948 patch @ vue.runtime.esm.js?2b0e:6471 Vue._update @ vue.runtime.esm.js?2b0e:3939 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5972 createElm @ vue.runtime.esm.js?2b0e:5919 patch @ vue.runtime.esm.js?2b0e:6510 Vue._update @ vue.runtime.esm.js?2b0e:3939 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 eval @ main.js?56d7:7 ./src/main.js @ app.js:1085 __webpack_require__ @ app.js:786 fn @ app.js:151 1 @ app.js:1099 __webpack_require__ @ app.js:786 checkDeferredModules @ app.js:46 (anonymous) @ app.js:862 (anonymous) @ app.js:865 Show 9 more frames vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'hex' of undefined" found in ---> at src/components/Photoshop.vue at src/App.vue warn @ vue.runtime.esm.js?2b0e:619 logError @ vue.runtime.esm.js?2b0e:1884 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 Vue._render @ vue.runtime.esm.js?2b0e:3544 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5972 createElm @ vue.runtime.esm.js?2b0e:5919 createChildren @ vue.runtime.esm.js?2b0e:6047 createElm @ vue.runtime.esm.js?2b0e:5948 patch @ vue.runtime.esm.js?2b0e:6471 Vue._update @ vue.runtime.esm.js?2b0e:3939 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5972 createElm @ vue.runtime.esm.js?2b0e:5919 patch @ vue.runtime.esm.js?2b0e:6510 Vue._update @ vue.runtime.esm.js?2b0e:3939 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 eval @ main.js?56d7:7 ./src/main.js @ app.js:1085 __webpack_require__ @ app.js:786 fn @ app.js:151 1 @ app.js:1099 __webpack_require__ @ app.js:786 checkDeferredModules @ app.js:46 (anonymous) @ app.js:862 (anonymous) @ app.js:865 Show 11 more frames vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'hex' of undefined at Proxy.r (vue-color.min.js?d99a:1) at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542) at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060) at Watcher.get (vue.runtime.esm.js?2b0e:4473) at new Watcher (vue.runtime.esm.js?2b0e:4462) at mountComponent (vue.runtime.esm.js?2b0e:4067) at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409) at init (vue.runtime.esm.js?2b0e:3118) at createComponent (vue.runtime.esm.js?2b0e:5972) at createElm (vue.runtime.esm.js?2b0e:5919) logError @ vue.runtime.esm.js?2b0e:1888 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 Vue._render @ vue.runtime.esm.js?2b0e:3544 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5972 createElm @ vue.runtime.esm.js?2b0e:5919 createChildren @ vue.runtime.esm.js?2b0e:6047 createElm @ vue.runtime.esm.js?2b0e:5948 patch @ vue.runtime.esm.js?2b0e:6471 Vue._update @ vue.runtime.esm.js?2b0e:3939 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5972 createElm @ vue.runtime.esm.js?2b0e:5919 patch @ vue.runtime.esm.js?2b0e:6510 Vue._update @ vue.runtime.esm.js?2b0e:3939 updateComponent @ vue.runtime.esm.js?2b0e:4060 get @ vue.runtime.esm.js?2b0e:4473 Watcher @ vue.runtime.esm.js?2b0e:4462 mountComponent @ vue.runtime.esm.js?2b0e:4067 Vue.$mount @ vue.runtime.esm.js?2b0e:8409 eval @ main.js?56d7:7 ./src/main.js @ app.js:1085 __webpack_require__ @ app.js:786 fn @ app.js:151 1 @ app.js:1099 __webpack_require__ @ app.js:786 checkDeferredModules @ app.js:46 (anonymous) @ app.js:862 (anonymous) @ app.js:865 Show 10 more frames

Подключение 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="./image.png")>/> div> ) > >

Использование Vue внутри шаблонов Twig

Шаблоны Twig могут инстанциировать приложение Vue.js так же, как и любой другой код JavaScript. Однако, учитывая, что и Twig, и Vue.js используют одинаковые разделители для переменных, вы должны сконфигурировать опцию Vue.js delimiters , чтобы она изменяла разделители переменных по умолчанию.

Если вы установите, к примеру, delimiters: [‘$$’] , то вы можете использовать следующее в ваших шаблонах Twig:

Установка

Vue не поддерживает IE8 и ниже, так как использует возможности ECMAScript 5, которые невозможно эмулировать в IE8. В остальном, поддерживаются все браузеры, совместимые с ECMAScript 5.

Семантическое версионирование

Vue следует семантическому версионированию во всех своих официальных проектах для документирования возможностей и поведения. Для недокументированного поведения или описания внутренней логики, изменения описываются в информации о релизах.

Информация о релизах

Версия последнего релиза: 2.7.8

Подробная информация об изменениях в каждой версии доступна на GitHub.

Инструменты разработчика и Vue

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

Подключение через

Просто скачайте JS-файл и подключите его тегом на странице. Будет зарегистрирована глобальная переменная Vue .

Не используйте минифицированную версию во время разработки, иначе вы не будете получать предупреждения о типичных ошибках!

Версия для разработки С предупреждениями для удобства разработки и отладки

Версия для production Без предупреждений, 37.32КБ min+gzip

CDN

Для создания прототипов или в целях обучения можно использовать последнюю версию:

script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"> script>

Для production, мы рекомендуем указывать конкретную версию и сборку, чтобы избежать неожиданных поломок при выходе новых версий:

script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"> script>

Если используете нативные ES-модули, также существует и совместимая с ES-модулями сборка:

script type="module"> 
 import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.esm.browser.js' 
script>

Исходный код самого npm-пакета также доступен по ссылке cdn.jsdelivr.net/npm/vue.

Vue также доступен на unpkg и cdnjs (cdnjs синхронизируется с npm с некоторой задержкой, из-за чего последняя версия может быть не всегда доступна сразу).

Обязательно прочитайте про отличия в сборках Vue и используйте версию для production на своём опубликованном сайте, заменив vue.js на vue.min.js . Это сборка оптимизирована для скорости, а не для удобства разработки.

npm

Рекомендуем использовать npm при создании крупных приложений на Vue. Этот вариант прекрасно работает в паре с инструментами сборки, такими как Webpack и Browserify. Во Vue также есть совместимые с ними инструменты для использования однофайловых компонентов.

# последняя стабильная версия
$ npm install vue

Инструменты командной строки (CLI)

Vue.js предоставляет официальный инструментарий для командной строки (CLI) для быстрого создания каркаса амбициозных одностраничных приложений. Предлагаемые шаблоны содержат всё необходимое для организации современной фронтенд-разработки. Всего за несколько минут вы получите работающую конфигурацию с горячей перезагрузкой модулей, линтингом кода при сохранении и настроенной конфигурацией production-сборки. Подробнее вы можете изучить в документации Vue CLI.

CLI — это инструмент для тех, кто знаком с Node.js и соответствующими инструментами сборки. Если вы новичок во Vue или инструментах сборки фронтенда, рекомендуем сначала прочитать руководство, не требующее использования инструментов сборки, а уже потом разбираться с CLI.

Объяснение различных сборок

В папке dist/ npm-пакета можно найти много разных сборок Vue.js. Вот краткий обзор отличий между ними:

UMD	CommonJS	ES Module (для сборщиков)	ES Module (для браузеров)
Полная	vue.js	vue.common.js	vue.esm.js	vue.esm.browser.js
Runtime-only	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js	—
Полная (production)	vue.min.js	—	—	vue.esm.browser.min.js
Runtime-only (production)	vue.runtime.min.js	—	—	—

Термины

Полная: сборка, которая содержит runtime и компилятор шаблонов.
Компилятор: код, который отвечает за компиляцию строковых шаблонов в render -функции JavaScript.
Runtime: код, который отвечает за создание экземпляров Vue, отрисовку и изменение виртуального DOM и т.д. По сути, это всё, кроме компилятора.
UMD: сборки UMD можно использовать сразу в браузере, подключая тегом . По умолчанию в jsDelivr CDN из https://cdn.jsdelivr.net/npm/vue@2.7.8 будет UMD-сборка Runtime + Компилятор ( vue.js ).
CommonJS: сборки CommonJS предназначены для использования вместе со старыми инструментами сборки, такими как Browserify или Webpack 1. По умолчанию для них ( pkg.main ) будет сборка Runtime-only CommonJS ( vue.runtime.common.js ).
ES-модули: начиная с версии 2.6, Vue предоставляет две сборки ES-модулей (ESM):
- ESM для сборщиков: предназначена для использования с современными системами сборки, такими как webpack 2 или Rollup. Формат ESM разработан для статического анализа, поэтому сборщики могут воспользоваться преимуществами «tree-shaking» и удалить неиспользуемый код из финальной сборки. Файл по умолчанию для этих сборщиков ( pkg.module ) — это Runtime-only сборка для ES-модулей ( vue.runtime.esm.js ).
- ESM для браузеров (только 2.6.0+): предназначена для импорта в современных браузерах через .
Runtime + Компилятор vs. Runtime-only

Если нужно компилировать шаблоны на клиенте (например, передаёте строку в опцию template или монтируете к элементу DOM, используя его HTML в качестве шаблона), вам потребуется компилятор, а значит, полная сборка:
```
// это требует компилятора шаблонов
new Vue({ 
template: '{{ hi }}
'
})

// это нет
new Vue({ 
render (h) { 
return h('div', this.hi) 
}
})
```
При использовании vue-loader или vueify шаблоны внутри *.vue файлов будут скомпилированы в JavaScript ещё на этапе сборки. Поэтому компилятор в итоговой сборке не потребуется и можно использовать сборки runtime-only.

Так как сборки runtime-only примерно на 30% легче, в сравнении с полными, вы должны использовать их всякий раз, когда это возможно. Если вы всё равно хотите использовать полную сборку, вам потребуется настроить псевдоним в сборщике:

Webpack
```
module.exports = { 
// . 
resolve: { 
alias: { 
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' для webpack 1 
} 
}
}
```
Rollup
```
const alias = require('rollup-plugin-alias')

rollup({ 
// . 
plugins: [ 
alias({ 
'vue': require.resolve('vue/dist/vue.esm.js') 
}) 
]
})
```
Browserify

Добавьте в package.json вашего проекта:
```
{ 
// . 
"browser": { 
"vue": "vue/dist/vue.common.js" 
}
}
```
Parcel

Добавьте в package.json вашего проекта:
```
{ 
// . 
"alias": { 
"vue" : "./node_modules/vue/dist/vue.common.js" 
}
}
```
Режим разработки 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 :
```
module.exports = { 
mode: 'production'
}
```
Но в Webpack 3 и более ранних версиях необходимо использовать DefinePlugin:
```
var webpack = require('webpack')

module.exports = { 
// . 
plugins: [ 
// . 
new webpack.DefinePlugin({ 
'process.env': { 
NODE_ENV: JSON.stringify('production') 
} 
}) 
]
}
```
Rollup
```
const replace = require('rollup-plugin-replace')

rollup({ 
// . 
plugins: [ 
replace({ 
'process.env.NODE_ENV': JSON.stringify('production') 
}) 
]
}).then(. )
```
Browserify

Примените глобальную трансформацию envify для вашей сборки.
```
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
```
CSP-окружения

Некоторые окружения, такие как Google Chrome Apps, требуют соблюдения Content Security Policy (CSP), запрещающей использование конструкции new Function() для исполнения выражений. Полная сборка использует подобные конструкции для компиляции шаблонов, и потому непригодна к использованию в таких окружениях.

С другой стороны, runtime-сборки полностью совместимы с CSP. Если использовать их с Webpack и vue-loader или Browserify и vueify, то шаблоны компилируются на этапе сборки в render -функции, которые отлично работают в CSP-окружениях.

Сборка dev-версии

Важное замечание: файлы сборки в /dist на GitHub обновляются только при релизах. Чтобы использовать версию из последних исходников с GitHub, соберите проект самостоятельно:
```
git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build
```
Bower

Только UMD-сборки доступны в Bower.
```
# последняя стабильная версия
$ bower install vue
```
Загрузчики модулей AMD

Все UMD-сборки могут быть напрямую использованы как AMD-модули.

Обнаружили ошибку или хотите добавить что-то своё в документацию? Измените эту страницу на GitHub! Опубликовано на Netlify .

Читать:
Как создать папку в python

Как подключить Vue без npm?

Подключить Vue Component к файлу HTML

Подключение Vue.js ( vue-loader )

Компоновка компилятора среды выполнения

Замена горячего модуля (HMR)

Поддержка JSX

Использование стилей

Использование стилей с областью действия

Hello World

Использование изображений

Использование Vue внутри шаблонов Twig

Установка

Семантическое версионирование

Информация о релизах

Инструменты разработчика и Vue

CDN

npm

Инструменты командной строки (CLI)

Объяснение различных сборок

Термины

Runtime + Компилятор vs. Runtime-only

Webpack

Rollup

Browserify

Parcel

Режим разработки vs. режим production

Webpack

Rollup

Browserify

CSP-окружения

Сборка dev-версии

Bower

Загрузчики модулей AMD

Похожие записи