Что будем строить вместе

Код в браузере с помощью Codepen

Для начала сделайте новую« ручку в Codepen»

У вашей новой «ручки» нет названия. Щелкните значок «карандаш», чтобы дать ему более информативное имя, например «Калькулятор iOS с VueJS».

Вы должны увидеть четыре раздела:

  1. HTML
  2. CSS
  3. JS [Нажмите на маленький белый значок шестеренки]
  4. Гигантская белая область

После нажатия на значок шестеренки на панели JS вы увидите всплывающее окно «Настройки пера» с активной вкладкой «JS».

В левом нижнем углу найдите раскрывающийся список Быстрое добавление. Один из вариантов должен быть «Vue». Выберите это.

Если Vue нет в списке, вы можете скопировать и вставить полный URL-адрес, расположенный ниже, в два верхних поля прямо над Быстрое добавление для достижения той же цели:
https: //cdnjs.cloudflare. com / ajax / libs / vue / 2.5.13 / vue.min.js

Нажмите большую зеленую кнопку Сохранить и закрыть.

Итак, вы готовы приступить к созданию своего первого приложения Vue.

Это серия из 10 частей.

  • Каждая часть разбита на небольшие ступеньки
  • На каждом этапе вы пишете или редактируете одну строку (или очень несколько строк) HTML, JavaScript или CSS.
  • Это руководство написано таким образом, что не рекомендуется копировать и вставлять код *.

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

Готовый? Давайте начнем!

Перейти к части 1: выполнить простое добавление

Оглавление