Подключение Vue.js (<code translate="no" class="notranslate">vue-loader</code>) с Webpack Encore

Дата обновления перевода 2024-07-25

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

Screencast

Предпочитаете видео-туториалы? Посмотрите серию скринкастов Vue.

Tip

Просмотрите живые демо 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: '<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 #}