Рынок разработки программного обеспечения очень разнообразен, и круг задач может сильно варьироваться. Как разработчики, мы должны уметь работать с разными технологиями. В этом посте мы поговорим о том, как создать базовое клиентское приложение с помощью 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!