Урок 1 :: Intro to Vue 3 :: Введение в Vue 3

Вот, что мы с Вами сделаем на этом уроке.
Vue Mastery
Пройдем по этой ссылке:
Intro to Vue 3 ➳

... Все внимательно послушаем, посмотрим, прочитаем.

Затем сделаем конспект (мой см ниже).

Конспект

Введение в Vue 3
Добро пожаловать на вводный курс Vue Mastery для Vue 3. Мы собираемся совершить путешествие по вселенной Vue, чтобы изучить технологию и создать прочную основу новых навыков для продвижения к мастерству Vue. Этот курс - ваш первый шаг на этом пути, и на нашей платформе вы найдете целую библиотеку курсов, которые вы можете пройти, чтобы улучшить свои навыки.

На протяжении данного курса мы изучим основы Vue.js и создадим приложение, чтобы применить эти концепции на практике.
les01_pic01.jpg
Чтобы получить максимальную отдачу от этого курса, занимайтесь вместе с нами кодированием. И есть два способа сделать это, в зависимости от вашего уровня опыта. Если вы новичок в программировании, то перейдите по ссылке ниже этого видео, которая приведет вас в нашу учетную запись Codepen.
les01_pic02.jpg
Там вы найдете наш стартовый код, который вы можете добавить в свой личный кабинет. Однако с бесплатной учетной записью CodePen у вас может быть только один проект. Поэтому, если у вас уже есть проект в вашей учетной записи, вам придется удалить его, чтобы создать новый для этого курса, который вы строите на каждом уроке.

Если у вас больше опыта в программировании и использовании git и Github, то вам лучше перейти в репозиторий курса и клонировать проект на свой компьютер. Оттуда вы можете переключаться между различными ветвями для начального и конечного кода для каждого урока. Например, на следующем уроке (урок второй) вы можете проверить L2-start или L2-end для начального и конечного кода соответственно.

Примечание переводчика

Для первоначальной закачки файлов с github.com на ваш компьютер выполните команду:

git clone https://github.com/Code-Pop/Intro-to-Vue-3.git

... а далее уже делайте checkout-ы, как это будет указано в каждом последующем уроке.

На протяжении всего этого курса вы увидите, как я (в смысле автор и ведущий курса) использую VS-код. Я действительно рекомендую этот редактор кода для разработки Vue, но если у вас уже есть редактор кода по вашему выбору, вы можете использовать его. Если вы хотите использовать VS-код, но у вас его еще нет, вам нужно загрузить его сейчас, а также установить расширение es6-string-html. Вы поймете, почему это расширение будет полезно на последующих уроках.

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

Код файла index.html данного урока

<div id="app">
  <h3>Product goes here :: Здесь должен появиться наш фирменный продукт</h3>
</div>

Код файла main.js данного урока

const product = 'Socks :: Носки русские'

Результат выполнения данного урока

Product goes here :: Здесь должен появиться наш фирменный продукт


Примечание переводчика

1. Я слегка меняю контент оригинальных файлов курса для тренировки, проверки русификации и т.д.

2. Обратите внимание, чтобы в консоле браузера не было ошибок.

Теперь Нажмите здесь для перехода к следующему уроку ➳

... или ...

Ссылки по теме.