Побудова компілятора 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
2
3
4
5

# якщо ви використовуєте менеджер пакетів Yarn
$ yarn encore dev-server

# якщо ви використовуєте менеджер пакетів npm
$ 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.

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>
        )
    }
}

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
}

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 #}