Vue: Webpack и vue-файлы с разными типами содержимого
Обновлено 10.01.2018: Пересмотрел свежим взглядом и внёс мелкие правки. Заходите и в Telegram-канал по Vue: https://t.me/vuejs_ru
Vue предлагает собственный способ организации компонентов — однофайловые компоненты. Vue-файлы позволяют создавать любые вариации описания компонента. Хочется использовать SASS для стилей? Пожалуйста. Вместо HTML использовать шаблонизатор Pug? Тоже можно. Писать на TypeScript? Легко! Так или иначе, с помощью загрузчиков для Webpack всё приведётся к HTML+CSS+JS, но мы вольны выбирать что захочется.
Из чего состоят vue-файлы
Каждый компонент состоит из 3 основных частей:
- шаблон компонента (тег
template) - логика работы компонента (тег
script) - стили (теги
styles)
Кстати, если тег template и script может быть только один в файле компонента, то тегов style несколько — например, если потребуются глобальные стили и стили только для данного модуля.
По умолчанию, в секциях HTML, JS (ES2015) и CSS. Нестандартный тип содержимого нужно указывать с помощью атрибута lang:
// vue-файл<!-- Шаблон в jade -->
<template lang="jade">
...
</template><!-- CoffeeScript в скриптах -->
<script lang="coffee">
...
</script><!-- SASS в стилях -->
<style lang="scss">
...
</style>
Для красивой подсветки кода в секциях может потребоваться установить плагин для редактора (например, Sublime Text, Atom).
Секции однофайлового компонента не обязательно располагать в одном vue-файле. При желании все или некоторые части можно вынести в отдельные файлы и подключать с помощью атрибута src:
// vue-файл состоящий из подключений других файлов<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
С содержимым вроде разобрались, как же подключать vue-файлы?
Настройка Webpack & vue-loader
Устанавливаем Webpack и vue-loader.
Вообще для любого типа содержимого, который будет обрабатывать Webpack потребуется установить соответствующий loader:
В конфиг Webpack добавляем правило обработки vue-файлов с помощью vue-loader:
// webpack.config.js...
rules: [
...
{
test: /\.vue$/,
loader: 'vue-loader',
}
...
]
...
Рекомендуется ограничивать область действия правил добавляя свойствоinclude или exclude, причём одновременно их указывать не стоит. Если в проекте будут использоваться vue-файлы из сторонних пакетов, то нужно чтобы это правило распространялось на файлы из каталога node_modules.
Настройка нестандартного содержимого vue-файлов
Кроме того, что для секции необходимо указать атрибут lang, для vue-loader нужно указать в настройках цепочки loader’ов для каждого нестандартного типа:
// Webpack 1
// webpack.config.js
...module: {
loaders: [...]
},// Цепочки loader'ов, используемые в vue-файлах
vue: {
loaders: {
scss: 'style!css!sass'
}
}...
В результате при обработке секции с lang=”scss” в однофайловом компоненте будет использована цепочка из sass-loader, css-loader и style-loader.
В Webpack 2 ситуация немного изменилась:
// Webpack 2
// webpack.config.js
...rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
}
}
}
]
Всё! Теперь vue-loader будет передавать правильные цепочки loader’ов Webpack’у, который в свою очередь соберёт их в javascript-модули.
