Автор оригинала: Goodness Toluwanimi Kayode.

Привет! Moonjs – это относительно новый JavaScript Framework, которые я видел, на котором я не было учета, и я решил попробовать это, а затем написать базовое руководство по нему. Итак, так же, как у нас есть преобразование для реагирования, у нас «Луна» для Vuejs. Некоторые из ключевых вещей о Moonjs в том, что вроде некоторых других JavaScript Frameworks, это очень свет. Луна использует быстрый виртуальный DOM и может повторно представлять дома эффективно и главное, Moonjs так легко учиться. Я буду настроить простое приложение, которое показывает основную информацию о пользователю, и этот учебник – дать голову начать использовать Moonjs.

Требования

• Знание JavaScript
• Текстовый редактор

Монтаж

Чтобы установить Moonjs, есть два способа. Один путь – через Moon-Cli а другой путь – через сеть доставки контента (CDN), которые можно найти здесь Отказ Чтобы настроить наш проект хорошо, запустите следующие команды ниже:

mkdir moon-tutorial
cd moon-tutorial

Следующая команда создаст новую папку, называемую лунным учебником и проверять в каталог. Поэтому после этого откройте свой проект в вашем любимом текстовом редакторе, затем создайте файл под названием App.html, а затем добавьте строки кода

Добавление аромата Moonjs.

Создайте папку «SRC» и создайте другую папку внутри, которую она называется JS, затем создайте файл, называемый app.js в папке. В файле мы будем инициировать экземпляр Moonjs для отображения «Hello Pusher кодов». Мы достигнем этого, добавив следующие коды ниже в файл App.js.

const moon = new Moon({
  el: ".app",
  data: {
    message: "Hello Pusher of Codes!"
  }
});

Обновите ваше приложение .html, чтобы выглядеть так:

 
 
 
 



  
{{message}}

С вышеуказанным вы должны увидеть что-то подобное ниже:

Строительство простого профиля

Давайте сделаем наше приложение лучше с большей информацией о пользователе. Добавьте код ниже в App.html Файл:

 
 
 
 



  
{{full_name}}
  
{{email}}
  
{{mobile_number}}
  
{{short_info}}

Затем внесите изменения в файл app.js с кодом ниже

const moon = new Moon({
  el: ".app",
  data: {
    full_name: "Goodness Kayode | Pusher of Codes!",
    email:"gtkbrain@gmail.com",
    mobile_number:"+2341188469520",
    short_info:"I am Goodness Kayode also called Pusher of Codes. Linguist turned engineer.Community lover"
  }
});

YUPP !!! С этим вы должны иметь голову начать создавать приложения с Moonjs.

Заключение

Я надеюсь, что вам понравилось учебное пособие? Я только что поцарапал поверхность рамки, но этот учебник поможет учить о том, как настроить приложение Moonjs и как написать базовое приложение с рамки. Ссылка на репозиторий – здесь