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

По умолчанию, 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 #}