Существует несколько вариантов использования Vue в вашем веб-приложении, и это во многом зависит от того, что вы предпочитаете.
цель:
• Чтобы включить небольшое автономное приложение или фрагмент кода на страницу, вы можете напрямую импортировать
Vue и код внутри тега скрипта
• Чтобы создать более крупное приложение, вам понадобится инструмент сборки, который берет ваш код и объединяет его.
для распространения
Обратите внимание, что я использую слово «пакет», а не компиляцию, поскольку приложения JavaScript интерпретируются и
выполняется во время выполнения в браузере. Это станет очевидным позже, когда мы представим концепцию
однофайловых компонентов.
Давайте кратко рассмотрим пример первого случая на очень простой HTML-странице:
<html>
<head>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return {message:'Hello World!'}
}
}).mount("#app")
</script>
</body>
</html>/* Your code... */В разделе head мы определяем тег сценария и импортируем Vue из бесплатной сети доставки контента.
(КДН). При этом создается глобальная переменная Vue, которая предоставляет все методы и функции среды разработки.
рамки. Внутри тега body мы объявляем элемент div с id="app". Это определяет, где наш
небольшое приложение будет смонтировано и какую часть страницы будет контролировать наша платформа Vue. Уведомление
содержимое div: {{message}}. Двойные фигурные скобки определяют точку, в которой содержимое
будет заменен во время выполнения значением переменной сообщения, которое мы определяем в JavaScript. Это
называется интерполяцией и является основным способом отображения значения (строки, числа и т. д.).
на веб-странице.
В конце тела мы создаем элемент сценария с нашим приложением. Начнем с извлечения
createApp из Vue и используйте ее для создания приложения путем передачи объекта. Этот объект имеет
конкретные поля, определяющие компонент. В этом случае этот компонент предоставляет только метод data().
это, в свою очередь, возвращает объект. Имена полей в этом объекте будут рассматриваться как реактивные переменные, которые
мы можем использовать как в нашем JavaScript, так и в HTML. Наконец, конструктор createApp() возвращает
экземпляр приложения Vue 3, поэтому мы связываем вызов и вызываем метод mount(), чтобы, ну,
смонтируйте наше скромное приложение к элементу с идентификатором приложения. Обратите внимание, что мы используем селекторы CSS.
в качестве аргумента (знак решетки указывает на свойство id, поэтому id="app" выбирается #app).
Поскольку этот метод использования Vue не так уж распространен (или популярен), мы сосредоточимся на более важных вещах и
будем использовать сборщик для организации нашего рабочего процесса и значительно улучшим опыт разработки...
но сначала нам нужно узнать немного больше о Vue и о том, что делает его таким замечательным.
Путь упаковщика, лучший способ...
Как вы можете себе представить, импорт Vue непосредственно на веб-страницу будет работать только для очень небольших приложений.
Вместо этого Vue структурирован по концепции компонентов, которые представляют собой многократно используемые изолированные наборы JavaScript.
код, HTML и CSS, которые ведут себя как единое целое. Вы можете думать о них как о строительных блоках, из которых можно составить
веб-страница. Очевидно, что браузер ничего об этом не знает, поэтому мы воспользуемся сборщиком для преобразования нашего
приложение во что-то, что может интерпретировать браузер, с дополнительным преимуществом запуска нескольких
оптимизация в процессе. Вот тут-то и вступает в действие «рамочная» часть, как она предписывает
как эти компоненты должны быть написаны и какие методы должны содержать.
При использовании упаковщика весь наш код упаковывается в один или несколько файлов JavaScript, которые браузер
будет загружаться во время выполнения. Рабочий процесс выполнения приложения Vue в браузере можно упростить.
следующее:
Браузер загрузит страницу index.html как обычно, а затем загрузит и выполнит Bundle.js.
файл, как и любой другой JavaScript. Упаковщик упакует все наши файлы и выполнит их в
установленный порядок:
1. Файл main.js импортирует и запустит приложение Vue 3.
2. Затем начнется компоновка страницы из основного компонента, инкапсулированного в
Файл App.vue. Этот компонент будет порождать другие компоненты, образуя таким образом дерево компонентов.
которые составляют страницу.
Не волнуйтесь, если сейчас это звучит немного странно. Мы увидим эти концепции в действии по мере продвижения
создание наших примеров приложений на протяжении всей книги. В главе 3 «Настройка рабочего проекта»
мы запустим простое приложение, используя эту же диаграмму.
До сих пор вы имели представление о том, что такое библиотеки и фреймворки, и лишь кратко рассмотрели, что такое Vue.
должен предложить. Важно помнить, что в современном мире JavaScript принято
используйте сборщики, чтобы помочь нам организовать наши приложения и оптимизировать код для браузера. Мы будем работать
с официальным сборщиком Vue 3, Vite, позже. Но сначала нам нужно еще несколько основных понятий.