Если вы ищете новый навык, которым можно научиться в 2020 году, я думаю, вам стоит взглянуть на Vue.js. В мире, где многие JavaScript-фреймворки требуют сложных настроек, чтобы начать работу, Vue похож на глоток свежего воздуха. Полоса для начала работы с Vue установлена настолько низко, что я возвращаюсь в 2000 год, когда вы просто добавляли скрипт на страницу и все работало. Ах, старые добрые дни.
Конечно, в наши дни в мире JS все намного сложнее, и инструменты, окружающие многие фреймворки, великолепны, но если вы просто хотите изучить Vue без всякого шума и церемоний, Vue позволяет вам это сделать.
Вы можете начать работу с Vue за 4 простых шага.
- Выберите редактора.
- Создайте документ HTML.
- Добавьте Vue в HTML-документ.
- Создайте основной экземпляр Vue и приступайте к обучению!
Давайте посмотрим на каждый шаг.
Выберите редактора
Этот шаг не является обязательным. Вы можете просто использовать текстовый редактор на своем компьютере, но вам будет лучше (и у вас будет возможность использовать некоторые интересные функции), если вы воспользуетесь редактором.
Не хотите тратить деньги? Без проблем. Редактором, который сжигает диаграммы в настоящее время, является Visual Studio code… и он БЕСПЛАТНЫЙ. Проверьте это и загрузите БЕСПЛАТНУЮ версию. Кто не любит бесплатное?
Создать HTML-документ
Предполагая, что вы приняли мой мудрый совет и скачали VS Code, пора создать HTML-документ, который вы будете использовать для изучения Vue. Запустите VS Code и выберите Файл - ›новый файл (Cmd + N на Mac).
Вам будет представлен чистый холст, на котором вы создадите свой шедевр Vue. Как здорово!
Теперь выберите Файл - ›сохранить. В появившемся диалоговом окне сохранения файла дайте файлу умное имя, например learn.html, и сохраните его в папке, отметив выбранную вами папку. Позже вам нужно будет узнать эту папку.
После того, как вы нажмете «Сохранить», вы заметите, что код VS изменяет тип документа в строке состояния в нижней части редактора. Это будет примерно так:
Примерно так:
Вы можете видеть, что тип документа изменился с Plain Text на HTML. Поскольку при сохранении вы присвоили файлу расширение .html, редактор теперь распознает файл как HTML и обеспечит интеллектуальное восприятие и автозаполнение, когда вы работаете. Это одно из тех замечательных преимуществ, которые вы получаете от работы в реальной IDE (интегрированной среде разработки) вместо обычного текстового редактора.
Теперь нам нужно добавить основные теги, чтобы сделать этот HTML-документ допустимым. VS Code снова может нам помочь. Если вы введете текст html в редакторе, вы получите раскрывающийся список с некоторыми параметрами.
Как видите, есть несколько вариантов на выбор. Ваш раскрывающийся список может отличаться от моего, но он должен быть у вас для html: 5.
Вы можете видеть выше, что когда я выделяю его и нажимаю Tab, я получаю простой HTML-документ, с которым я могу работать. Прохладный! Теперь давайте добавим Vue на страницу.
Добавление Vue в наш HTML-документ
Откройте браузер и перейдите на сайт Vue. Vuejs.org
Оказавшись там, нажмите большую кнопку НАЧАТЬ РАБОТУ прямо под заголовком. Вы попадете на страницу «Введение». Вы будете проводить здесь много времени, когда начнете знакомиться с Vue, но пока прокрутите вниз до раздела установки, где вы увидите следующее:
Выделите этот текст и скопируйте его в буфер обмена. Вернитесь к только что созданному HTML-документу и вставьте его между тегами ‹head› ‹/head›, например:
Теперь мы готовы приступить к написанию кода на Vue! Пойдем.
Создайте основной экземпляр Vue и приступайте к обучению!
Прокрутите вниз до закрывающего тега тела в вашем HTML - ‹/body›
В строке перед этим тегом введите следующий код.
В этом коде мы создаем новый экземпляр Vue и передаем ему литерал объекта. Литерал объекта содержит свойства, которые настраивают экземпляр.
Если все это кажется вам надуманным, я рекомендую посетить ту вводную страницу, которую мы видели некоторое время назад, и прочитать ее. Кроме того, если вы не знаете, что такое литерал объекта в JavaScript, ознакомьтесь с документацией MDN здесь. Важно, чтобы вы понимали основы JavaScript, прежде чем действительно начнете работать с Vue.
Вернемся к коду. Вы можете видеть в строке 3, что у нас есть
el: '#app',
Это важно. В настоящее время у нас есть Vue на странице, и мы создали его экземпляр.
Чего мы не сделали, так это сообщить Vue, где «живет» наше приложение.
Нам нужно указать элемент в DOM (объектной модели документа), где находится наше приложение. Все дочерние элементы указанного нами элемента DOM будут частью нашего приложения.
Добавьте следующее сразу после открывающего тега body.
<div id="app">{{ message }}</div>
Не случайно атрибутом id этого HTML-элемента является app. Это то же имя, которое используется в селекторе CSS в нашем экземпляре Vue. Теперь Vue знает, где находится наше приложение на странице, и предоставит нам реактивность внутри приложения. Подробнее о реактивности мы поговорим в другом посте.
Также обратите внимание на фигурные скобки {{}}. Эти фигурные скобки обеспечивают интерполяцию текста. Это означает, что если в нашем экземпляре Vue в объекте данных есть свойство message, оно будет отображаться здесь.
И что вы знаете, в строке 5 выше есть свойство message!
Все, что осталось сделать, это протестировать нашу страницу, чтобы убедиться, что у нас все настроено правильно. Для этого давайте запустим веб-сервер.
Примечание. Хотя браузеры и позволяют просматривать файлы непосредственно из файловой системы, я не буду делать этого здесь. Если вы продолжите работать с Vue, скоро вам понадобится протестировать веб-сервер. В таком случае нет смысла откладывать неизбежное. К тому же это просто.
Я работаю на Mac, поэтому расскажу, как запустить сервер в этой ОС. Если вы работаете в Windows, посетите эту страницу для настройки сервера.
Запуск сервера
Помните, я сказал записать, где вы сохранили HTML-файл на шаге 2. Теперь вам нужно это место. Откройте новое окно Finder и перейдите в папку, в которой вы сохранили этот файл.
У меня есть файл в папке под названием learn. (Я знаю ... супер умно) Мы хотим открыть окно терминала в этом месте. Вот как.
Выберите папку, содержащую ваш HTML-файл, перейдите в меню Finder, затем выберите «Службы» и «Новый терминал в папке». Вот так:
Большой! Теперь у нас есть окно терминала, открытое для нужной нам папки. Теперь введите следующую команду в терминал.
php -S localhost:8080
Это запустит простой сервер PHP, чтобы вы могли просматривать свою страницу в браузере. Вот эта команда в действии.
Все, что осталось сделать, это перейти по адресу http: // localhost: 8080 в браузере и увидеть нашу страницу во всей красе!
Теперь я признаю, что это не самая захватывающая страница, но у нас есть все необходимые элементы, которые позволят нам делать некоторые интересные вещи.
Теперь, когда вы все настроили, я рекомендую вам внимательнее изучить документацию Vue и немного поэкспериментировать. Посмотри, сможешь ли ты сделать что-нибудь крутое.
Ключевые выводы
- Начать работу с Vue быстро и легко.
- Получите редактор кода для работы. Это сделает вашу жизнь проще, а сам процесс - более приятным. Попробуйте VS Code, это БЕСПЛАТНО.
- Создайте базовый HTML-документ и запишите, где вы его сохраните.
- Добавьте на страницу библиотеку Vue с помощью тега скрипта.
- Создайте экземпляр Vue на странице.
- Определите часть модели DOM, в которой будет размещаться ваше приложение.
- Поместите что-нибудь, связанное с Vue, в DOM, чтобы мы могли убедиться, что он работает правильно.
- Запустите локальный веб-сервер.
- Откройте свой недавно созданный HTML-документ и наслаждайтесь славой успеха!
Как всегда, спасибо за чтение и, пожалуйста, ознакомьтесь с другими моими сообщениями здесь, на Medium.
