Вступление

Создание одностраничных приложений с использованием простого JavaScript может быть немного сложным. Такие фреймворки, как Angular, React и Vue.js, были созданы, чтобы предоставить лучшую платформу для создания как мобильных, так и веб-приложений. Vue предлагает множество потрясающих функций, которые делают веб-разработку полностью оправданной. В этом посте мы узнаем, как создать одностраничное приложение - в данном случае приложение для поиска почтового индекса с Vue. Если вам интересно, вот как будет выглядеть наше приложение, когда мы закончим:

Создание нашего проекта Vue

Есть несколько способов использовать Vue в вашем проекте:

Глобальная установка через NPM, в основном используется при создании крупномасштабных приложений:

‹Скрипт src =» https://gist.github.com/fullstackmafia/16ab449197a9de92fe12ba3bef461c78.js '›‹/script›

Включение CDN с помощью тега ‹script›, в основном используется для создания компактных приложений:

‹Script src =” https://gist.github.com/fullstackmafia/6711f1d33cb37c7daa899fbc80f0f809.js '›‹/script›

Интерфейс командной строки Vue, который в основном используется при создании крупных одностраничных приложений:

‹Скрипт src =» https://gist.github.com/fullstackmafia/d16a24c727ce511113f713ab3e55c4b2.js '›‹/script›

При инициализации нашего проекта с помощью Webpack нам зададут несколько вопросов. Ответьте на эти вопросы, используя ответы, показанные на изображении ниже:

Хотя это не рекомендуется для пользователей, не знакомых с Node.js, использование Vue CLI дает множество преимуществ, некоторые из которых:

* Вы можете создавать процессы, которые позволят вам использовать интересные функции, такие как ES6 или SCSS.

* Вы можете создавать и составлять шаблоны из одного файла.

* Vue CLI допускает отложенную загрузку, асинхронные операции, рендеринг на стороне сервера и разделение кода.

В этом посте мы будем использовать Vue CLI для нашей демонстрации. Когда наш проект был настроен, он должен иметь структуру каталогов, подобную приведенной ниже:

После настройки проекта с помощью Vue CLI и запуска npm run dev в вашем терминале следующая страница приветствия должна автоматически открыться в вашем браузере на localhost на порту 8080:

Настройка нашего компонента Vue

Для реализации сервиса отслеживания почтовых индексов в нашем проекте мы будем использовать Zippopotam, бесплатный сервис API с ответами в формате JSON и без регистрации. Чтобы позволить нам создавать переносимые компоненты, Vue позволяет нам создавать файлы отдельных компонентов с расширением .vue. Таким образом, мы можем хранить наш код HTML, CSS и JavaScript в одном файле. Давайте начнем с перехода к папке `. / Src / components` и замены примера` Helloworld.vue` новым файлом с именем `zip.vue`. В zip.vue мы включим наш HTML-шаблон, нашу логику Vue и наш стиль SCSS. Давайте сначала включим наш шаблон:

‹Script src =” https://gist.github.com/fullstackmafia/cb516e0cd87b5f239b7e83536c29010d.js '›‹/script›

В нашем шаблоне мы создаем форму и с помощью модификатора события `@ submit.prevent` мы контролируем, как наша форма должна быть отправлена. `@ submit.prevent` отлично справляется с заменой JavaScript-метода event.preventDefault () при работе с формами. Хотя обработчики событий JavaScript могут вызываться внутри методов Vue, модификаторы событий позволяют нам сосредоточиться на том, чтобы сделать наши методы исключительно логическими, а не также работать с событиями из DOM.

Будет создано поле ввода для ввода почтовых индексов. Он взаимодействует с логикой нашего скрипта с помощью директивы Vue v-model. v-model создает двустороннюю привязку данных между нашей DOM и нашей логикой Vue и обновляет данные на основе событий ввода пользователя. Здесь наша директива v-model прикреплена к текущему свойству в функции data () нашей логики Vue.

Обработка ошибок со стороны пользователя очень важна. В этом случае мы будем использовать директиву Vue v-if для условного рендеринга сообщения в DOM, если пользователь вводит недопустимый почтовый индекс. Если пользователь введет неверный почтовый индекс, в браузере отобразится следующее сообщение:

Информация, получаемая нашим API, когда пользователь вводит действительный почтовый индекс, может находиться в разных режимах. Для ясности, нашим предпочтительным режимом будет отображение списка, содержащего следующие значения:

  • Город
  • Состояние
  • Аббревиатура штата
  • Долгота
  • Широта

Чтобы отобразить список в нашей DOM, мы используем директиву Vue `v-for`. `v-for` отображает список элементов на основе массива. Его использование требует редкого синтаксиса в виде элемента в коллекции, где коллекция - это массив исходных данных, а элемент - это ссылка на повторяемый элемент массива.

Поскольку вывод нашего списка зависит от временного состояния DOM (почтовый индекс в качестве входного значения), мы используем уникальный атрибут Vue `: key`, чтобы мы могли отслеживать идентичность каждого узла и повторно использовать, а также изменять порядок существующих элементов.

Имея хорошее представление о том, как работает наш шаблон, давайте приступим к добавлению нашего тега «‹script›«, содержащего нашу логику Vue, и нашего тега «‹style›«, содержащего стили нашего шаблона:

‹Script src =” https://gist.github.com/fullstackmafia/b0aab8da889609294d3f13e3d46905f2.js '›‹/script›

Компоненты одного файла всегда получают уникальное имя при инициализации их экземпляра Vue. Это имя используют другие компоненты для взаимодействия с ними в случае необходимости. Здесь наш компонент называется zip. Наш компонент экспортируется с помощью оператора `export`, который используется при создании модулей JavaScript для экспорта функций, объектов или примитивных значений из модуля, чтобы они могли использоваться другими программами с помощью оператора` import`.

Наша функция данных содержит любые данные, которые мы собираемся привязать к нашей DOM. Он возвращает объект, который содержит свойства, которые могут быть привязаны к DOM, а также доступны другим функциям в объекте экземпляра Vue с помощью ключевого слова this.

Vue позволяет нам определять методы, к которым может получить доступ наша DOM. События могут быть привязаны к функции и обработаны путем создания функции в объекте метода. Наша функция getLocation () обрабатывает форматы запросов и ответов API с помощью обещаний.

Метод `catch ()` реализован для обработки отклоненных случаев, которые могли возникнуть в результате ввода пользователем недопустимого почтового индекса.

В наш тег «‹style›« встроен наш стиль для нашего единственного файлового компонента. Обратите внимание, что важно добавить ключевое слово scoped к нашему тегу ‹style›, если мы хотим, чтобы встроенный стиль был ограничен только компонентом, в который он включен.

Связь компонентов во Vue

Во Vue отдельный файловый компонент может потребоваться в другом компоненте, просто используя оператор `import` для импорта этого компонента, где бы он ни был. Это очень удобно, когда мы создаем амбициозные приложения, требующие большого количества функций. Затем эти функции можно импортировать в один «материнский» файл `App.vue`, используя следующий синтаксис:

‹Script src =” https://gist.github.com/fullstackmafia/c1881bfee9600f302f2de0b8777ce85d.js '›‹/script›

В нашей папке `src` перейдем к` App.vue` и импортируем наш компонент `zip`:

‹Скрипт src =» https://gist.github.com/fullstackmafia/ad0bfaa10f5ff0dde74bf76ad5f5f579.js '›‹/script›

Здесь zip действует как дочерний компонент для app. Импортируя zip и включая его в объект компонента, мы делаем zip повторно используемым в нашем компоненте app. Чтобы включить любые импортированные шаблоны, которые могли появиться в zip, мы создаем новый шаблон в app и вставляем в него настраиваемый тег zip:

‹Script src =” https://gist.github.com/fullstackmafia/6319f335d3c64e6809407c7c543bf7c1.js '›‹/script›

Теперь наше приложение может быть стилизовано в целом вместо использования ключевого слова `scope` для ограничения отдельных стилей, как мы это делали в` zip`:

‹Script src =” https://gist.github.com/fullstackmafia/d89c27fe536f3b9534083fb754caa0c0.js '›‹/script›

В наш проект мы можем включить определенные библиотеки и плагины, такие как BootStrap, jQuery или Lodash. Vue позволяет работать со сторонними библиотеками или плагинами. Чтобы включить библиотеку с помощью тега «‹link›« или «‹script›«, перейдите к файлу «index.html» в корневой папке проекта и вставьте ссылку на библиотеку, которую вы хотите использовать в своем проекте:

‹Script src =” https://gist.github.com/fullstackmafia/2afb2dec3f5b8b07b9e04333d98751f6.js '›‹/script›

Использование сторонних плагинов может быть немного сложным. В этом проекте мы будем использовать vue-resource, плагин, который предоставляет услуги для выполнения HTTP-запросов. В нашем интерфейсе командной строки давайте перейдем в каталог папки нашего проекта и установим `vue-resource`:

‹Script src =” https://gist.github.com/fullstackmafia/b9db6f2080ef7ea857691c4abf561761.js '›‹/script›

Мы можем подтвердить, что `vue-resource` был успешно установлен, открыв файл` package.json` в папке нашего проекта и проверив, включен ли `vue-resource` в объект зависимостей:

‹Script src =” https://gist.github.com/fullstackmafia/4006c636ef5dd0e09c3acd7653835639.js '›‹/script›

Чтобы включить vue-resource в наш проект, давайте перейдем к файлу main.js в папке нашего проекта. В main.js мы импортируем каждый родительский компонент, а также каждую установленную библиотеку или плагин, которые требуются нашему приложению. Приступим к импорту Vue, который был установлен ранее, когда мы настраивали интерфейс командной строки Vue в нашем проекте. Мы также будем импортировать `vue-resource` и наш родительский компонент` App`:

(Примечание: если у вас возникли проблемы с импортом Vue в main.js, вы можете запустить npm install vue в своем интерфейсе командной строки, чтобы установить Vue глобально).

‹Script src =” https://gist.github.com/fullstackmafia/27ad0babde3cf6efcfe875e168c591a9.js '›‹/script›

Создается новый экземпляр Vue, в котором наш входной компонент имеет свойство el, которое использует селектор запросов для присоединения нашего импортированного шаблона и компонента к DOM - в данном случае это index.html.

Заключение

Создание приложений на Vue с использованием подхода отдельных файловых компонентов - это концепция, которую следует адаптировать с учетом передовых практик. Для создания приложений с большим количеством компонентов рекомендуется использовать vue-router. Чтобы получить отличную фору на Vue Router, прочтите этот пост от Ed Zynda. Если вы хотите внести свой вклад в этот проект, не стесняйтесь проверить его на GitHub.