Підключення Vue.js (<code translate="no" class="notranslate">vue-loader</code>) з Webpack Encore
Дата оновлення перекладу 2024-05-29
Підключення Vue.js (vue-loader
) з Webpack Encore
Screencast
Надаєте перевагу відео-туторіалам? Подивіться серію скрінкастів Vue.
Tip
Подивіться на живі демо компонента Symfony UX Vue.js на 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, щоб побачити детальну документацію.
Побудова компілятора cередовища виконання
За замовчуванням, Encore використовує "побудову" Vue, яка дозволяє вам компілювати шаблони під час виконання. Це означає, що ви можете зробити одне з цього:
1 2 3 4 5 6 7
new Vue({
template: '<div>{{ hi }}</div>'
})
new Vue({
el: '#app', // де <div id="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
$ npm run dev-server
Ось і все! Змініть один з ваших файлів .vue
і дивіться, як оновлюється ваш браузер.
Але відмітьтк: це на даний момент не працює для змін стилю у файлі .vue
. Щоб
побачити оновлені стилі, вам доведеться перезвантажити сторінку.
Див. Using webpack-dev-server and HMR, щоб дізнатися більше.
Підтримка 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
.
Використання стилів
Ви не можете використовувати <style>
у файлах .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>
)
}
}
Note
Імпорт стилів таким чином робить їх глобальними. Дивіться наступний розділ, щоб визначити їх область дії та вашого компонента.
Використання стилів з областю дії
Ви також не можете використовувати стилі з областю дії (<style scoped>
) у
файлах .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={styles.title}>
Hello World
</h1>
</div>
)
}
}
1 2 3 4 5
/* Component.css */
.title {
color: red
}
Виведення буде чимось типу <h1 class="title_a3dKp">Hello World</h1>
.
Використання зображень
Ви не можете використовувати <img src="./image.png">
у файлах .jsx
. В якості
обхідного шляху, ви можете імпортувати їх за допомогою функції require()
:
1 2 3 4 5 6 7 8 9 10
export default {
name: 'Component',
render() {
return (
<div>
<img src={require("./image.png")}/>
</div>
)
}
}
Використання Vue всередині шаблонів Twig
Шаблони Twig можуть існтанціювати додаток Vue.js так само як і будь-який інший код JavaScript.
Однак, враховуючи, що і Twig, і Vue.js використовують однакові роздільники для змінних, ви
повинні сконфігурувати опцію Vue.js delimiters
, щоб вона змінювала розділювачі змінних за
замовчуванням.
Якщо ви встановите, наприклад, delimiters: ['${', '}$']
, то ви можете використовувати
наступне у ваших шаблонах Twig:
1 2
{{ twig_variable }} {# відображає змінну Twig #} ${ vuejs_variable }$ {# відображає змінну Vue.js #}