Краткое руководство по созданию приложения vue с использованием начальной загрузки и axios.

Но сначала...

Установите Node.js — это позволит вам запускать ваш код локально и установит npm для вас, чтобы вы могли загружать пакеты.

Установите VSCode — это облегчит чтение вашего кода и позволит вам получить доступ к терминалу в том же окне.

Шаг 1:

Запустите следующую команду в окне терминала:

npm install -g @vue/cli

С последующим:

vue create my-project-name

Примечание: «my-project-name» может быть любым именем, которое вы хотите использовать.

Когда вы увидите это, нажмите клавишу ввода, и ваш проект будет создан.

Эта команда создаст папку с именем my-project-name со следующими файлами/папками внутри.

Что я только что сделал? 🙇‍♀

npm — это команда менеджера пакетов Node.

install -g означает глобальную установку этого пакета, чтобы вы могли использовать ключевое слово vue в своем терминале.

@vue/cli — это имя пакета, который мы хотим установить

Теперь вы можете создать быстрый стандартный проект всего одной командой, как мы это делали с помощью vue create my-project-name

Шаг 2:

Откройте проект в своем редакторе (совет для профессионалов: установите Vetur, чтобы было легче читать ваши файлы vue.)

Это хорошее время, чтобы создать новый репозиторий на Github и закоммитить свой код. Это хорошая практика, поскольку она позволяет вам делиться своим кодом с другими.

Теперь вернитесь к своему проекту и откройте файл package.json. Вы увидите зависимости и devDependencies. Это npm пакетов, которые необходимы вашему проекту для работы. devDependencies необходимы для создания ваших файлов, чтобы подготовить их к работе, но на самом деле они не нужны для запуска вашего проекта.

Теперь на верхней панели нажмите Терминал › Новый терминал. Это открывает терминал в вашей текущей папке.

Выполните следующую команду:

npm install --save-dev sass-loader node-sass style-loader

Затем запустите:

npm run serve

Теперь вы можете увидеть свое веб-приложение, перейдя на http://localhost:8081 в браузере.

Что я только что сделал? 🙇‍♀

install --save-dev это добавит пакеты, которые вы добавляете как devDependencies для вашего текущего проекта.

Вы можете убедиться, что это сработало, просмотрев файл package.json и увидев наши новые пакеты в списке devDependencies.

npm run serve обслуживает ваш код локально, поэтому, когда вы вносите изменения в свой код, вы можете видеть изменения в реальном времени.

Шаг 3:

Теперь мы готовы приступить к созданию этого каркаса:

Создайте новый файл в папке src/component с именем Navigation.vue и добавьте следующий код:

Затем откройте файл src/App.vue и замените код следующим:

Вы можете удалить файл HelloWorld.vue в папке src/component, если хотите.

Что я только что сделал? 🙇‍♀

Вместо одного длинного HTML-файла со всем кодом vue позволяет создавать компоненты. Это разбивает ваш код на разные файлы, облегчая чтение. Например, файл Navigation.vue содержит весь ваш код навигации, поэтому, когда придет время отладки, вы будете знать, где искать.

Чтобы фактически использовать нашу новую навигацию в приложении, мы импортируем файл в файл App.vue в строке 15, а затем добавляем его в HTML в строке 3.

Мы также добавили HTML-код, который выглядит как блок цитаты в каркасе.

Шаг 4:

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

Чтобы исправить это, установим Boostrap с помощью этой команды:

npm install --save bootstrap

Затем в файле App.vue в строке 26 сразу после тега <style> добавьте:

@import "../node_modules/bootstrap/scss/bootstrap.scss";

И из строки 32 удалите:

width: 1110px;

Теперь, если вы измените размер окна браузера, размер вашей страницы изменится правильно. Это связано с тем, что Bootstrap позволяет вам использовать систему сетки, которая обеспечивает отзывчивость ваших страниц.

Что я только что сделал? 🙇‍♀

install --save добавляет пакеты, которые вы добавляете в качестве зависимостей для вашего текущего проекта.

Вы можете убедиться, что это сработало, просмотрев файл package.json и увидев наши новые пакеты в списке зависимостей.

Затем мы импортировали основной файл начальной загрузки в наш файл приложения, чтобы его CSS был доступен для использования повсюду.

Причина, по которой он решил нашу проблему сразу, заключается в том, что в Bootstrap также есть класс с именем container, который мы добавили в строку 4 App.vue.

Шаг 5:

Вместо использования HTML для установки котировки давайте воспользуемся vue. Для этого удалите цитату и автора из HTML-кода на App.vue и замените их на {{ quote }} и {{ author }} соответственно. Затем, чтобы установить переменные цитаты и автора, добавьте следующий код после строки 21:

Ваш обновленный App.vue будет выглядеть так:

Что я только что сделал? 🙇‍♀

Мы только что реализовали двустороннюю привязку данных. Теперь ваш javascript контролирует текст вашего HTML.

Шаг 6:

Чтобы сделать еще один шаг, давайте воспользуемся API типа Они так сказали для ежедневного изменения нашей котировки.

Сначала нам нужно установить пакет, который поможет нам делать HTTP-запросы. Хорошо использовать axios, для установки используйте следующую команду:

npm install --save axios

После строки 14 добавить:

import axios from 'axios'

Чтобы получить котировку с помощью API, нам нужно позвонить https://quotes.rest/qod.json, мы также хотим, чтобы это произошло, как только кто-то зайдет на наш сайт, поэтому нам нужно сделать вызов, пока компонент создается. Добавление следующих строк кода после строки 28 сделает именно это:

Ваш окончательный файл vue будет выглядеть так:

Что я только что сделал? 🙇‍♀

axios.get(URL) выполняет HTTP-вызов get для указанного вами URL-адреса

Попробуйте перейти непосредственно по URL-адресу из браузера, чтобы увидеть, как аксиомы данных помогают вам получить данные.

.then() говорит вашему коду подождать, пока get не получит данные, прежде чем запускать следующую часть вашего кода.

Как только вы получите ответ, код использует этот ответ для установки наших значений.

Ответ отправляется обратно как ответ JSON, он также известен как объект в Javascript. Чтобы понять, как мы смогли извлечь цитату и автора из ответа, вы можете узнать больше об Объектах здесь

Ты сделал это!!

Поздравляю! Теперь вы знаете основы создания собственного веб-сайта ✨