Рубрики
Без рубрики

Быстрое введение в Vue.js

Вы заинтересованы в разработке передней части? Если так, то этот пост для вас! Чтобы начать с Vue.js, вам нужно знать HTML, CSS, JavaScript, Rocket Science, ядерную физику, квантовую теорию и т. Д. … Хм? … ну не совсем. Просто HTML, CSS и JavaScript достаточно хороши, чтобы начать

Автор оригинала: Aditya Sridhar.

Вы заинтересованы в разработке передней части?

Если так, то этот пост для вас!

Чтобы начать с Vue.js, вам нужно знать HTML, CSS, JavaScript, Rocket Science, ядерную физику, квантовую теорию и т. Д.

Хм ?…

Ну не совсем. Просто HTML, CSS и JavaScript достаточно хороши, чтобы начать с Vue.js.

Этот пост будет охватывать, как легко создать простое приложение Vue.js и объяснит структуру папки созданного приложения. Кроме того, мы будем создавать простой компонент Vue.js.

Так что давайте начнем.

Предпосылки

Установите Node.js, если еще не присутствовать

Вам нужен Node.js, поскольку библиотеки, необходимые для Vue, загружаются с использованием управляющего узла пакета (NPM). Обратитесь к https://nodejs.org/en/ Чтобы установить Node.js.

Установите Vue CLI

Установите Vue CLI, используя следующую команду:

npm install -g @vue/cli

Vue CLI помогает легко создать проект Vue.js. Хотя он называется CLI, у него также есть UI для создания проекта, который я буду покрывать ниже.

Создать проект

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

vue ui

Это откроет следующий экран в браузере:

Нажмите на Создавать. Затем введите пункт назначения, где должен быть создан проект.

Затем нажмите на Создайте новый проект здесь.

Это откроет следующий экран:

Введите папку Project AS образец vue-приложение и нажмите Следующий.

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

Наконец, нажмите на Создать проект

Чтобы проверить, если проект будет установлен в порядке, перейдите в папку Project и запустите приложение, используя следующие команды:

cd sample-vue-app
npm run serve

Приложение работает на localhost: 8080. Изображение ниже показывает, как приложение выглядит в браузере:

Поздравляем, вы создали свой первый проект Vue.js!

Но подождите минуту, проект имеет много файлов и папок, которые были созданы автоматически.

Действительно ли нужно знать, что означают эти файлы?

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

Структура папки приложения

  1. Package.json: Этот файл имеет все зависимости узла.
  2. Public/index.html: Это первый файл, который загружает при запуске приложения. Кроме того, этот файл имеет следующий фрагмент кода
    Отказ Все компоненты загружены в этом Div с идентификатором приложения.
  3. SRC/Main.js : Это файл, в котором создан экземпляр VUE. Этот файл имеет следующий фрагмент кода Новый Vue ({Render: h => h (приложение)}). $ Mount ('# App) Отказ Этот фрагмент говорит, что на Компонент приложений должен быть загружен в элемент с ID Приложение (который является элементом div).
  4. src/app.vue: Этот файл соответствует Приложение Компонент, который действует как контейнер для всех других компонентов. У этого есть Шаблон для HTML код, у него есть Сценарий для j avascript код, и у него есть Стиль для CSS.
  5. SRC/Компоненты : Именно здесь все компоненты, которые вы разрабатываете, будут сохранены. Все компоненты будут иметь теги шаблона, скрипта и стиля для HTML, JavaScript и CSS-код соответственно.
  6. Dist : Это папка, в которой хранятся встроенные файлы. Чтобы получить эту папку, запустите команду NPM запустить сборку Отказ Когда эта команда запускается, код добывается и в комплекте и сохраняется в папке Dist. Код из этой папки обычно развернут до производства.

Создайте свой первый компонент

Создайте файл под названием AS First.vue внутри SRC/компоненты. Этот файл будет иметь HTML, JavaScript и CSS. Давайте добавим их один за другим. Весь код в этом разделе принадлежит First.vue файл. First.vue будет наше Vue компонент

CSS.

Это основные CSS. Параметр . Навыся в <Стиль Scoped> означает, что CSS применяется только к этому компоненту.

Javascript

Имя Параметр указывает на имя компонента, который является Первый Отказ

реквизит Параметр указывает на вход к этому компоненту. Здесь у нас будет один вход, называемый AS Msg который имеет тип Нить.

HTML

{{msg}} это путь, в котором входной параметр к Vue Компонент может быть доступен в HTML код.

Полный код для первого компонента

Это содержание файла First.vue:

Отлично, компонент теперь создан! ?

Запустите приложение сейчас, используя NPM запустить И вы увидите экран ниже:

Подождите минутку, не так ли не тот же выход, что и раньше. Где компоненте мы только что создали?

Дело в том, что мы создали компонент, но мы никогда не использовали его нигде. Давайте теперь будем использовать этот компонент.

Используя компонент

Добавим этот компонент к главной Приложение компонент. Вот обновленный код для App.vue:
  1. Первый Компонент должен быть импортирован в Приложение компонент. Это сделано с помощью команды Импорт сначала от './components/first.vue'
  2. Далее, в JavaScript, нам нужно упомянуть, что Приложение Компонент будет использовать Первый Компонент. Это сделано с помощью фрагмента кода Компоненты: {First}
  3. Наконец, нам нужно использовать Первый Компонент в Приложение компонент. Это сделано в шаблоне HTML с помощью фрагмента кода
  4. Здесь Msg это входной параметр Первый Компонент и Значение MSG отправляется из Приложение Компонент

Теперь запустите приложение, используя NPM запустить И вы увидите выход ниже:

Код

Нажмите здесь Чтобы получить код, показанный здесь из репозитория GitHUB. REPO GitHub имеет инструкции по клонированию и выполнение кода.

Нажмите здесь Чтобы увидеть, как выглядит приложение. Он был развернут с помощью страниц GitHub.

Поздравляю?

Теперь вы успешно построили свое первое приложение Vue.js. Вы также узнали, как создать очень простой компонент. В моем следующем посте на Vue.js я буду охватывать больше концепций. Оставайтесь в курсе!

использованная литература

Vue.js: https://vuejs.org/v2/guide/

Vue CLI: https://cli.vuejs.org/guide/

Об авторе

Я люблю технологии и следую по достижению технологии. Мне также нравится помогать другим с любыми знаниями у меня в технологическом пространстве.

Не стесняйтесь связаться со мной на моей учетной записи LinkedIn https://www.linkedin.com/in/aditya1811/

Вы также можете следовать за мной в Twitter https://twitter.com/adityaSridhar18.

Мой сайт: https://adityasridhar.com/

Другие сообщения мной

Быстрое руководство, которое поможет вам понять и создавать угловые 6 приложений

Краткое руководство, которое поможет вам понять и создавать AIGITJS

Читайте ещё по теме: