Рынок разработки программного обеспечения очень разнообразен, и круг задач может сильно варьироваться. Как разработчики, мы должны уметь работать с разными технологиями. В этом посте мы поговорим о том, как создать базовое клиентское приложение с помощью Vue.js.

Установка

Сначала нам нужно установить Node на ваш компьютер. Здесь вы можете скачать и установить его.

Далее нам нужно будет установить библиотеку Vue CLI:

npm install -g @vue/cli

С этой библиотекой процесс создания нового проекта Vue становится очень простым.

Новый проект

После завершения установки мы можем создать новый проект, выполнив эту команду в консоли:

vue ui

Через несколько секунд в вашем браузере откроется визуальный интерфейс. Теперь мы можем создать новый проект.

Нажмите Создать и введите место назначения, в котором вы хотите создать проект:

Введите папку проекта как new_app и нажмите Далее.

На следующем шаге выберите предустановку по умолчанию, будет создан простейший пустой шаблон:

И, наконец, нажмите CreateProject.

Через несколько секунд вы должны увидеть это:

Проверим, все ли работает:

cd new_app
yarn run serve

По умолчанию он будет запускать сервер на localhost: 8080. И если мы откроем его в браузере, то увидим следующее:

Вот и все, базовое приложение Vue.js запущено!

Как работает Vue

Вот файловая структура Vue:

Если вы работаете с чем-то вроде React, это покажется вам знакомым.

  • Для всех зависимостей Node существует package.json.
  • public / index.html: первый файл, загружаемый при запуске приложения. В этом файле есть следующее: ‹div id =” app ”› ‹/div›. Каждый компонент будет загружен в этот элемент div.
  • src / main.js: здесь создается экземпляр Vue:
new Vue({ render: h => h(App)}).$mount(‘#app’)
  • src / App.vue: это контейнер для всех компонентов Vue.

  • src / components: это каталог, содержащий все компоненты. На данный момент есть только компонент HelloWorld.vue, но мы скоро это исправим.

Новый компонент

После того, как мы успешно создадим базовое приложение с Vue, давайте добавим новый компонент в наше новое приложение.

Сначала нам нужно создать NewComponent.vue в каталоге компонентов. Очевидно, что имя компонента может быть любым. Файлы * .vue - это настраиваемый формат файла, в котором используется синтаксис, подобный HTML, для описания компонента Vue.

Компонент Vue состоит из трех разделов: HTML, JavaScript и CSS:

HTML:

Простой HTML-код со вставленной опорой, заключенной в тег ‹template›.

JavaScript:

В разделе javaScript мы экспортируем компонент, определяем реквизиты и помещаем остальной код javascript.

CSS:

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

Теперь, когда у нас есть новый компонент, давайте воспользуемся им. Во Vue мы можем импортировать его в родительский компонент. В нашем случае это App.vue.

Импортировать и игнорировать компонент:

Используйте компонент в шаблоне:

И вот мы здесь! Наш новый компонент появляется в DOM:

Заключение

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

Чтобы получить больше информации о данных и разработке программного обеспечения, подключитесь к LinkedIn!