Что содержат в себе шаблонные файлы vue
Обновлено: 02.07.2024
В этом руководстве мы рассмотрим работу с компонентами во Vue. Я расскажу, как создавать компоненты, как передавать данные между компонентами. А также как использовать элемент <slot> для рендеринга дополнительного контента внутри компонента.
Как создавать компоненты во Vue
Есть несколько способов определения шаблон компонента. В предыдущем примере используется литерал объекта. Но мы также можем использовать тег <script>, встроенный в DOM шаблона.
Однофайловые компоненты
В более сложных проектах глобальные компоненты становятся громоздкими. В таких случаях лучше использовать однофайловые компонентов. Это отдельные файлы с расширением .vue, которые включают в себя разделы <template>, <script> и <style>.
Компонент App может выглядеть следующим образом:
А компонент MyCounter может выглядеть так:
Однофайловые компоненты можно импортировать и использовать непосредственно в тех компонентах, где они необходимы.
Передача данных в компоненты через свойства
Свойства позволяют передавать данные из родительского компонента в дочерний. Это дает возможность сделать компоненты более мелкими, чтобы обрабатывать определенные функции.
Предположим, что в компонент блога выводит сведения об авторе, публикации (заголовок, текст и изображения) и комментарии. Но его можно разбить на дочерние компоненты, каждый из которых отвечает за вывод определенной информации:
При этом все данные будут переданы из родительского компонента. Он может выглядеть следующим образом:
В упомянутом выше компоненте мы определили данные автора и информацию о посте. Далее нужно создать дочерний компонент. Назовем его author-detail. HTML-шаблон будет выглядеть следующим образом:
Мы передаем дочернему компоненту author объект как свойство с именем owner. В дочернем компоненте owner- это имя свойства, с помощью которого мы получаем данные из родительского компонента. Данные, которые мы хотим получить, называются author. Их мы определили в родительском компоненте.
Чтобы получить доступ к этим данным, нужно объявить свойство в компоненте author-detail:
Также можно включить валидацию при передаче свойства, чтобы убедиться, что отображаются правильные данные. Чтобы включить валидацию в приведенном выше примере, измените компонент следующим образом:
Если мы передадим неправильный тип свойства, в консоли отобразится следующая ошибка:
В документации Vue доступно руководство по валидации свойств.
Передача данных от дочернего компонента в родительский через шину событий
События обрабатываются через методы-оболочки, которые запускаются, когда происходит выбранное событие. Давайте расширим пример счетчика, чтобы он увеличивался при каждом нажатии кнопки.
Вот как должен выглядеть компонент:
Мы подписываемся на событие onClick, чтобы вызывать метод increase при каждом нажатии кнопки. Затем метод increase увеличивает значение переменной count.
Теперь расширим пример, чтобы переместить кнопку счетчика в отдельный компонент и отобразить счетчик в родительском элементе. Мы можем сделать это с помощью шины событий.
Шины событий полезны, когда нужно реализовать взаимодействие дочернего компонента с родительским. Вы можете использовать шину событий, если приложение недостаточно велико, чтобы для него требовалось использование Vuex.
Что мы хотим сделать: объект count будет объявлен в родительском компоненте и передан дочернему. Затем в дочернем компоненте увеличивается значение count, а также обновляется значение в родительском компоненте.
Компонент приложения будет выглядеть следующим образом:
Затем в дочернем компоненте с помощью свойства получаем значение счетчика и реализуем метод для его увеличения. Мы будем отображать значение count в родительском компоненте:
Тогда наш шаблон будет выглядеть следующим образом:
Сначала мы создаем новый экземпляр Vue и присваиваем его константе eventBus:
Теперь мы можем использовать шину событий в компоненте. Дочерний компонент будет выглядеть следующим образом:
Событие генерируется каждый раз, когда вызывается метод increment. Нужно прослушать событие в главном компоненте, а затем установить значение count, которое мы получили через отправленное событие:
Обратите внимание, что мы используем метод жизненного цикла Vue created для подключения к компоненту до его объявления, а также для настройки шины событий.
Использовать шину событий рекомендуется, если приложение не сложное.
Вложение содержимого в компоненты с использованием слотов
Если вы попробуете использовать компонент с закрывающимся тегом и поместите внутрь него содержимое, то Vue заменит его выводом самого компонента:
К счастью, слоты Vue позволяют передавать компоненту произвольное значение. Это может быть что угодно: от элементов DOM до родительского и дочернего компонентов. Давайте посмотрим, как они работают.
Часть скрипта компонентов будет выглядеть следующим образом:
Тогда шаблоны будут выглядеть так:
Содержимое компонента <list> отображается между тегами <slot></slot>. Мы также можем использовать запасной контент.
Резервный контент будет отображаться в тех случаях, когда родительский компонент не будет возвращать данные для отображения.
Заключение
В этой статье мы рассмотрели, как создавать компоненты в Vue, передавать данные от родительского к дочернему компоненту через свойства и шину событий. Также мы рассмотрели слоты – удобный метод для составления компонентов наиболее эффективными способами. Надеюсь, это руководство было для вас полезным.
Пожалуйста, оставьте свои отзывы по текущей теме статьи. За комментарии, отклики, лайки, подписки, дизлайки низкий вам поклон!
Пожалуйста, оставляйте свои комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, подписки, дизлайки, лайки, отклики!
Для проектов малого и среднего размера, в которых JavaScript используется лишь для некоторых страниц, этот подход может прекрасно работать. В более же сложных проектах или в случаях, когда весь ваш фронтенд управляется JavaScript, явными становятся следующие недостатки:
- Глобальное определение заставляет давать уникальное имя каждому компоненту
- Строковым шаблонам не хватает подсветки синтаксиса. Кроме того, приходится использовать уродливые слэши для многострочного HTML.
- Нет модульной поддержки CSS — в то время как HTML и JavaScript разбиваются на модули-компоненты, CSS оказывается за бортом.
- Отсутствие шага сборки ограничивает нас только HTML и ES5 JavaScript, не позволяя использовать препроцессоры вроде Pug (бывший Jade) и Babel
Все эти недостатки решаются однофайловыми компонентами с расширением .vue , использование которых позволяют такие инструменты как Webpack и Browserify.
Вот простой пример файла, который мы назовём Hello.vue :
Как и обещалось, мы также можем использовать препроцессоры, такие как Pug, Babel (с модулями ES2015) и Stylus для создания более ясных и функциональных компонентов.
Перечисленные языки даны только для примера. С тем же успехом можно использовать Buble, TypeScript, SCSS, PostCSS — или любые другие пре- или постпроцессоры по вкусу. При использовании Webpack вместе с vue-loader , вы также получаете прекрасную поддержку CSS-модулей.
Что насчёт разделения ответственности?
Одна важная вещь, что следует отметить — разделение ответственности это не то же самое, что разделение на файлы по типу. В современной разработке UI мы обнаружили, что вместо разделения кодовой базы на три огромных слоя, что тесно переплетаются друг с другом, имеет больше смысла делить их на слабо связанные компоненты и компоновать уже их. Внутри компонента, его шаблон, логика и стили неразрывно связаны между собой, что позволяет сделать компонент более сплочённым и удобным в поддержке.
Если вам не нравится идея однофайловых компонентов, вы также можете пользоваться возможностями горячей замены модулей и прекомпиляцией, выделив JavaScript и CSS в отдельные файлы:
Начало работы
Песочница с примером
Если вы хотите прямо сейчас поиграть с однофайловыми компонентами — начните с этого простого todo приложения на CodeSandbox.
Для новичков в модульных системах сборки JavaScript
С .vue -компонентами, мы входим во вселенную продвинутых JavaScript-приложений. Это значит, что если вы этого ещё не сделали, нужно будет освоить некоторые дополнительные инструменты:
Node Package Manager (npm): Прочитайте руководство по началу работы о том как устанавливать пакеты.
Современный JavaScript стандартов ES2015/16: Прочитайте руководство по ES2015 от Babel. Нет необходимости запоминать все новые возможности, но держите эту страничку под рукой в качестве справочника.
После того как вы уделили время этим ресурсам, мы советуем вам посмотреть на Vue CLI 3. Следуйте инструкциям, и очень скоро у вас будет рабочий проект с .vue -компонентами, ES2015, Webpack и горячей перезагрузкой модулей.
Для продвинутых пользователей
CLI позаботится о большинстве настроек конфигурации сборки для вас, но при необходимости позволяет настроить любые детали через опции конфигурации.
Если вы предпочитаете создавать конфигурацию сборки с нуля, то необходимо вручную настроить webpack для работы с vue-loader. Чтобы узнать больше о webpack, обратитесь к его официальной документации и Webpack Academy.
Vue.js 2 представил свою собственную реализацию Virtual DOM. На первый взгляд, кажется что это никак не отразится на том как вы пишите шаблоны. Из документации:
Под капотом, Vue компилирует шаблоны в render-функции для Virtual DOM. В совокупности с системой реактивности, Vue способен грамотно определять минимальное количество компонентов для повторной визуализации и выполнять минимальное количество действий с DOM при изменении состояния приложения.
Virtual DOM освобождает от довольно большой части оптимизации: теперь вы можете предварительно скомпилировать шаблоны в чистый JavaScript, таким образом Vue.js может не делать этого в браузере.
Без предварительной компиляции шаблонов в процессе сборки, Vue.js будет переводить строковый шаблон в JavaScript render-функцию, во время выполнения. Это означает, что на этапе начального рендеринга потребуется больше времени, по двум причинам: ваш уже собранный скрипт должен включать в себя Vue компилятор (больше время для загрузки) и шаблон должен быть скомпилирован, перед тем как он будет использован (больше время выполнение).
Эта статья не о синтаксисе шаблонов в Vue.js 2, а о том где и как определять ваши шаблоны. Я написал её, потому что на текущий момент не нашёл ни одного ресурса, который бы на самом деле объединил различные способы управления вашими шаблонами.
Я разделил различные способы определения шаблонов на 3 разные категории, у каждой из которых есть собственные преимущества и недостатки:
- Написание шаблонов, которые компилируются во время выполнения (наименьшая производительность);
- Использование отдельного .vue файла для компонентов (требуется этап сборки);
- Ручное написание render-функций (чистый JavaScript, не HTML-подобный синтаксис);
Использование не скомпилированных шаблонов
Шаблоны в Vue.js необязательно должны быть скомпилированы. Если вы используете runtime версию Vue.js, то шаблоны могут быть скомпилированы прямо в браузере. Это решение отличается простотой. Никаких лишних этапов сборки или специальных типов файлов, но такой подход жертвует производительностью. Первый рендеринг компонента займёт больше времени, потому что шаблон сначала необходимо скомпилировать в JavaScript.
Определение шаблонов в компоненте
Самый простой способ определить шаблон компонента - это определить его в параметре template.
В JavaScript, строковый тип данных не может быть размещён на нескольких строках кода. Если вы хотите чтобы ваш выглядел свободно, можете использовать шаблонные литералы.
Кроме того, если вы используете такие сборщики как Webpack или Browserify, вы можете определить шаблон в отдельном файле. Параметр template может принимать значение require.
Определение шаблонов в атрибуте type="x-template" тега script
Тег script с атрибутом x-template может содержать шаблон, к которому компонент будет обращаться по ID.
На самом деле, это решение не очень, так как оно создаёт довольно большой разрыв между вашими шаблонами и компонентами, а по факту не приносит никакой пользы (даже официальная документация отговаривает нас от использования x-template).
Использование inline-template атрибута
С помощью специального атрибута inline-template, шаблон может быть указан во внутреннем содержании компонента.
Это может оказаться полезным, если вы хотите чтобы HTML был виден сразу после того как он пришёл с сервера. Однако, как правило использовать встроенные шаблоны не рекомендуется, потому что такой подход делает его сложнее для обдумывания масштабов вашего компонента.
Использование отдельного файла компонента (.vue файлов)
Отдельный файл компонента существовал уже в первой версии Vue.js. В Vue.js 2 он приносит больше пользы: шаблоны будут предварительно скомпилированы в чистый JavaScript.
Vue файлы позволяют вам определять шаблон и скрипт в отдельном файле, который будет скомпилирован в JavaScript с помощью Webpack или Browserify.
Отдельные файлы компонента также открывают дверь более интересным возможностям, таким как написание шаблонов с помощью HTML или CSS препроцессоров. Это означает, что вы можете писать шаблоны например с помощью Pug (формально Jade).
Обратите внимание на то, что поскольку вы используете специальный тип файла, становиться труднее добавлять другие инструменты в ваш проект. Например, если вы хотите писать тесты или анализаторы (lint'ы) для ваших компонентов, то сначала их нужно скомпилировать, а также у редакторов кода могут возникнуть проблемы с .vue файлами.
Использование render-функций
Написание сырых render-функций
Когда используются различные стратегии шаблонизации (компиляция во время выполнения или отдельные файлы компонентов), строковые шаблоны компилируются в render-функции автоматически.
Написание ваших собственных render-функций даёт вам максимальную производительность без стадии сборки, но дело в том, что они не HTML-подобные и с ними труднее работать.
Написание render-функций с помощью JSX
render-функции могут быть написаны в JSX формате с помощью плагина Babel, что позволяет достичь более HTML-подобного синтаксиса.
Обратите внимание на то, что большинство встроенных во Vue.js 2 директив не будут доступны при использовании JSX, но обычно у них есть собственные программные эквиваленты (например, вы можете заменить v-if на обычный if из JavaScript).
Вывод
Если вы разрабатываете большое приложение, в котором производительность является очень важным фактором (обычно SPA) или заинтересованы в использовании препроцессоров, то кажется вам подойдут отдельные файлы для Vue компонентов.
Если вы не против первоначальной потери производительности и готовы использовать компиляцию во время выполнения (случаи, которые просто улучшают страницу), я рекомендую использовать литералы JavaScript шаблонов в параметре template компонента. Это не привнесёт никаких чуждых концепций в ваш процесс сборки и сохранит ваш шаблон вместе с компонентом.
В предыдущих статьях все компоненты приложения Vue.js размещались в одном файле - веб-странице. Такой подход, возможно, будет прекрасно работать для небольших проектов. Однако в больших проектах этот подход менее оптимален. В частности, html-разметка компонента определяется в javascript, в итоге логика и конфигурация компонента спешивается с html-кодом. Также мы не можем определить стили, которые предназначены только для компонента. И, кроме того, мы не можем использовать различные инструменты для предобработки типа Pug, Babel, Webpack и т.д.
Другой способ, который более подходит для крупных проектов, представляет определение компонента в отдельном файле с расширением .vue , который будет содержать логику javascript, html-разметку и стили компонента. Затем с помощью таких инструментов как Webpack или Browserify выполняется построение проекта и создается один общий файл javascript.
Прежде чем начать работу, необходимо установить node.js и npm и вообще иметь некоторые базовые знания по работе с npm. Для этого можно обратиться к следующей статье.
Итак, создадим новый проект. Для этого определим на жестком диске для проекта новую папку. Допустим, она будет называться firstapp .
Определим в этой папке новый файл index.html :
Блок div с будет представлять элемент, которые будет использоваться Vue, а весь код будет находиться в файле build.js.
Далее добавим в проект папку src , которая будет содержать собственно код приложения. Затем в этой папке создадим новый файл App.vue :
Этот файл будет представлять компонент App. Каждый компонент имеет три основные секции. Первая секция представляет шаблон компонента, который помещается в элемент <template> . Шаблон собственно и представляет разметку компонента.
Вторая секция, которая помещается в элемент <script> , представляет логику компонента. С помощью default определяются параметры компонента, а чтобы его можно было импортировать извне, применяется слово export.
Третья секция определяет стили компонента. В отличие от двух предыдущих секций, которые могут присутствовать в файле в одном экземпляре, секцию стилей можно определять в файле более одного раза.
Также добавим в папку src файл main.js :
Здесь объект Vue, с которого собственно и будет начинаться выполнение приложение. Объект Vue будет использовать элемент с - это тот элемент, который выше был определен на веб-странице index.html. С помощью функции render объект Vue будет производить рендеринг в этом элементе содержимого из компонента App. Естественно, чтобы использовать функциональность vue.js и компонента App, в начале файла определены функции импорта.
В частности, чтобы использовать компонент App, его необходимо импортировать:
Подобным образом мы можем подключать другие компоненты.
В то же время можно заметить, что данный файл называется main.js, а на веб-странице подключается файл dist/build.js, который еще не создан. Для того, чтобы все файлы нашего приложения превратились в dist/build.js, мы будем использовать сборщик Webpack.
Для этого перейдем к корневой папке нашего проекта и создадим в ней файл package.json , который будет определять все используемые зависимости:
Так как для работы приложения потребуется vue.js, то соответственно в секции dependencies определяется соответствующий пакет.
Еще ряд пакетов потребуются для построения приложения и в процессе разработки. Например, для сборки приложения будет использоваться пакет webpack.
Чтобы в процессе разработки динамически собирать приложение и запускать его на выполнение, потребуется пакет "webpack-dev-server".
Чтобы указать сборщику Webpack, как именно файла с расширением *.vue будут загружаться, необходим пакет "vue-loader". Но данный пакет сам использует еще две зависимости "vue-template-compiler" и "css-loader", поэтому их тоже надо установить.
Также для минимизации выходных файлов здесь устанавливается пакет плагина минимизации "uglifyjs-webpack-plugin".
Кроме того, в секции scripts определены две команды: dev и build. Команда dev предназначена для нужд разработки и позволяет на лету сгенерировать файл сборки и запустить проект. Этой команде передаются два параметра --hot --open . Параметр --hot позволяет задействовать плагин Hot Module Replacement , который взаимодействует с vue-loader и позволяет производить повторный рендеринг для каждой модели Vue. Второй параметр --open запускает браузер для обращения к приложению.
Команда build позволяет сгенерировать файл сборки, и затем этот файл может использоваться в production.
И в конце определим для сборщика Webpack конфигурацию. Для этого создадим в корневой папке проекта файл webpack.config.js :
Вначале файла получаем функциональность модуля webpack или встроенного модуля path. Параметр entry устанавливает входную точку в приложение - это наш файл main.js.
Далее в секции output устанавливаем выходные параметры сборки.
Затем через секцию modules устанавливаем два правила для загрузки файлов. В частности, для файлов с расширением .vue будет применяться загрузчик vue-loader. Второе правило определяет загрузку стилей: для обычных файлов css будет использоваться загрузчик css-loader, а для кода css из файлов с расшиением .vue - загрузчик vue-style-loader.
И в конце в секции plugins добавляется плагин VueLoaderPlugin, с помощью которого будет загружаться код vue.
В итоге проект будет выглядеть следующим образом:
Теперь, когда все готово, мы можем запустить проект. Для этого вначале с помощью команды cd в консоли (или терминале) перейдем к папке корневой проекта firstapp.
Далее нам надо установить все зависимости, описанные в файле package.json. Для этого выполним в консоли команду npm install .
Затем запустим проект, введя команду npm run dev :
Хотя мы запускаем приложение, но тем не менее в папке проекта мы не увидим никакого файла dist/build.js. Чтобы его сгенерировать, нам надо выполнить в консоли еще одну команду npm run build .
Разделение компонента на части
В данном случае компонент App.vue представляет единое целое, которое отделено от остальных компонентов. В этом плане его уже проще развивать независимо от других частей приложения. Однако может сложиться ситуация когда, кода html или css станет довольно много, и опять же такой компонент будет сложно поддерживать. В этом случае мы можем разделить компонент на отдельные функциональные части - код javascript, разметку html и стили css.
В частности, создадим в проекте в той же папке, где располагается компонент App.vue, новый файл App.html со следующим кодом:
В данном случае мы вынесли разметку html компонента в отдельный файл.
Также создадим в той же папке новый файл App.css :
И в ту же папку добавим новый файл App.js :
И теперь изменим код компонента App.vue :
То есть мы просто вынесли все части компонента в отдельные файлы. При этом в работе приложения ничего не изменится.
Vue.js предоставляет два способа загрузки компонентов: глобально на экземпляре Vue и на уровне компонентов. Каждый метод обладает своими преимуществами.
При использовании глобальной загрузки компонент будет доступен из любого шаблона в приложении, включая подкомпоненты, что сокращает необходимость импортирования глобального компонента в подкомпоненты. Также при использовании глобальной загрузки можно избежать ошибки компонента register Vue “did you register the component correctly?” . Однако глобальную загрузку компонентов стоит использовать только в исключительных случаях, поскольку она приводит к расширению приложения. Даже если компонент не используется, он все равно будет включен в сборки Webpack.
При локальной загрузке можно изолировать компоненты и загружать их только при необходимости. В сочетании с Webpack можно использовать отложенную загрузку компонентов только во время их использования. Это значительно уменьшает исходный размер файла приложения и сокращает время начальной загрузки.
2. Отложенная загрузка / Асинхронные компоненты
Глобальная загрузка асинхронных компонентов:
Локальная загрузка асинхронных компонентов:
3. Требуемые Props
Props для компонента можно создать несколькими способами: передача массива строк, представляющих названия prop, или передача объекта с ключами в качестве названий prop и объекта конфигурации.
При использовании объектно-ориентированного подхода можно создать несколько ключевых изменений конфигурации для каждого prop, один из которых будет требуемым ключом. Требуемый ключ ожидает значения true или false . True выдает ошибку, если prop не установлен при использовании компонента, а false (значение по умолчанию) не выдает ошибку, если prop не установлен. Рекомендуется использовать требуемый prop при совместном использовании компонентов несколькими разработчиками.
4. Пользовательские события с $emit
Связь между дочерним и родительским компонентами можно осуществлять с помощью встроенной функции компонентов $emit для генерации пользовательских событий. Функция $emit принимает строку для названия события и необязательное значение для отправки. Для прослушивания события добавьте “ @eventName ” к компоненту, генерирующему событие, и передайте обработчик события.
5. Разделение компонентов на логические составляющие
Как определить логические составляющие, на которые нужно разбить компонент? Первый способ разделения компонента основан на показателе изменения данных. Если данные изменяются последовательно в одном разделе компонента, но не в других, то, вероятно, из этого раздела можно создать отдельный компонент.
Причина заключается в том, что если данные или HTML изменяются последовательно в одном разделе шаблона, то этот раздел необходимо проверить и обновить. Однако, если тот же HTML размещается в собственном компоненте с данными, переданными с использованием props, то только этот компонент будет обновляться при изменении его props.
Другой способ логического разделения компонентов применяется для повторного использования. При наличии HTML, графиков или функций, которые последовательно используются в приложении, можно создать новый компонент для повторного использования.
6. Проверка Props
Вместо использования массива строк для определения props используйте нотацию объекта, с помощью которой можно конфигурировать каждый prop. К полезным стилям конфигурации можно отнести type и validator.
При использовании параметра type Vue автоматически выполняет проверку типов значения prop. Например, при ожидании prop Number, но получении String, в консоли появится следующее предупреждение:
При выполнении более сложных проверок можно передать функцию свойству validator, которое принимает значение в качестве аргумента и возвращает true или false . Благодаря этому можно написать пользовательскую проверку по значению, которое передается этому конкретному свойству.
7. Связывание и перезапись нескольких Props
Если компонент обладает несколькими props, то установление привязки для каждого prop отнимет много времени. К счастью, есть быстрый способ установить привязку для всех свойств компонента путем привязки объекта вместо одного свойства с помощью v-bind .
Дополнительным преимуществом использования привязки объекта является возможность перезаписи любой привязки из объекта. В данном случае, если в объекте person для isActive установлено значение false, то можно сделать еще одну привязку к фактическому компоненту person и установить для isActive значение true, не перезаписывая оригинал.
8. Модификация Props в компонентах
Иногда при изменении значения, переданного из prop, может появиться предупреждение “Avoid mutating a prop directly”. Поэтому используйте значение prop в качестве значения по умолчанию для свойства локальных данных. Благодаря этому можно увидеть исходное значение, однако при модификации локальных данных значение prop не изменится.
При использовании этого метода свойство локальных данных не реагирует на значение prop, поэтому любые изменения в значении prop из родительского компонента не обновят локальное значение. В случае необходимости выполнения этих обновлений можно комбинировать значения с помощью вычисляемого свойства.
9. Утилиты тестирования Mount и Shallow Mount
Есть два способа создания и загрузки компонентов в утилитах тестирования Vue: mount и shallow mount. Каждый из них обладает своими преимуществами и недостатками.
Техника mount удобна при проведении взаимозависимого тестирования между компонентом и его подкомпонентами. С ее помощью можно проверить правильность взаимодействия родительского компонента с подкомпонентами. Метод shallow mount создает экземпляр и визуализирует только родительский компонент в полной изоляции, игнорируя подкомпоненты.
Какой метод лучше? Решать вам. Выбранные стратегии зависят от поставленных целей. При необходимости тестирования компонента с полной изоляцией стоит использовать метод shallow. При работе с компонентом, обладающим подкомпонентами, следует использовать метод mount. Также методы можно комбинировать.
10. Мощность Vue-cli
Vue CLI — это мощный интерфейс командной строки, с помощью которого разработчики могут использовать множество функций, ускоряющих рабочий процесс.
Я часто использую функцию, при которой нужно запустить vue serve и передать путь к компоненту Vue. При этом можно разрабатывать компонент изолированно, а также выполнять горячую перезагрузку и итерацию по компоненту. Нет необходимости временно импортировать новый компонент на страницу для разработки.
При работе в команде можно выделить определенный компонент и поделиться им с другими. Vue CLI предоставляет возможность экспортировать компонент Vue в виде библиотеки. При вызове Vue автоматически создает отдельный компонент файла, перемещает CSS во внешний CSS-файл (его также можно встроить), а также создает файлы UMD и Common .js для импорта в другие проекты JS.
Читайте также: