В этой статье мы познакомимся с Vue.js. По сравнению с другими популярными фреймворками, Vue.js намного проще и удобнее использовать, поэтому, если вы новичок, то начать с него вам будет проще.
Мы собираемся создать наш интерфейс как SPA (одностраничное приложение). Это тип веб-приложения, которое никогда не перезагружается, потому что оно переписывает содержимое одного файла HTML, что обеспечивает более плавный пользовательский интерфейс и ощущение, что оно похоже на настольное приложение.
Установка Vue CLI и запуск нового проекта
Во-первых, мы собираемся установить Vue CLI (интерфейс командной строки), который поможет нам инициализировать новое приложение Vue. Чтобы установить Vue CLI, мы собираемся ввести эту команду в терминале:
npm install -g vue-cli
После установки мы собираемся создать новый проект, используя официальный шаблон Vue.js Webpack. Webpack - это сборщик модулей, который будет генерировать статические ресурсы из наших модулей и зависимостей.
Чтобы создать наш первый проект Vue.js, давайте перейдем к папке, в которой мы хотим создать проект, и введите терминал:
vue init webpack AccountOwnerClient
Через некоторое время мастер установки задаст нам несколько вопросов.
Подробности проекта
Первый вопрос: Project name (имя проекта). Назовем его, account-owner-client, вы можете назвать его как захотите, главное чтобы имя пакета узла не содержало заглавных букв, и лучше всего вводить имя в Kebab Case.
Второй вопрос: Project description (Описание проекта). А для этого мы напишем Account Owner Client Если хотите, можете написать что то свое.
Третий вопрос: Author (Автор). Сюда нужно ввести свое имя и адрес электронной почты в указанном формате Имя <email@domain.tld>.
Настройка Vue.js и ESLint
Четвертый вопрос: необходимо выбрать сборку Vue: Runtime + Compiler или просто Runtime. Мы выберем, Runtime + Compiler потому что мы собираемся писать компоненты Vue.js, а для этого нам нужен компилятор.
Пятый вопрос: нужен ли нам vue-router, чтобы создать несколько страниц для навигации. Мы ответим утвердительно, напечатав Y.
Шестой вопрос - хотим ли включить ESLint в наш проект. ESLint - отличный пакет, который заботится о нашем стиле кода и заставляет нас писать код по строгим правилам, таким как отступ в коде, запись пробелов перед скобками в определениях функций, запись точки с запятой и многое другое. Ответим утвердительно, напечатав Y.
Седьмой вопрос: хотим ли мы использовать ESLint preset. ESLint preset - это набор правил, и существует множество предустановок, потому что у людей разные предпочтения, и, например, некоторым нравится ставить точку с запятой в конце строки, а другим нет. Мастер попросит нас выбрать между Standard preset, Airbnb preset или написать свои собственные правила. Вы можете выбрать то, что подходит вашему стилю, и изменить это позже в .eslintrc.js файле.
Настройка тестов и прочего.
Восьмой вопрос касается модульных тестов, и мы напечатаем, n потому что мы не будем рассматривать какие-либо типы тестов в данной статье.
Девятый вопрос касается тестов e2e, и мы снова напечатаем n .
Десятый и последний вопрос: нужно ли запускать мастер npm install для установки всех необходимых нам зависимостей. Мы выберем Yes, use NPM чтобы установить все необходимые зависимости.
Если вы внимательно за всем проследили, в результате вы увидите приверно следующее:
Подождем, пока он npm все установит, а затем откроем проект любым редактором кода и проанализируем структуру проекта. Могу посоветовать - использовать Visual Studio Code, потому что у него есть отличные расширения, которые могут нам очень помочь при создании приложений Vue.js, например Vue.js Extension Pack.
Обзор структуры проекта
После того, как вы откроете проект с помощью редактора кода, вы заметите следующую структуру папок:
Пояснение к наиболее важным файлам и папкам:
- src - Исходный код нашего проекта:
- assets - Ресурсы модуля, которые будут обрабатываться с помощью Webpack
- components - здесь мы храним наши компоненты пользовательского интерфейса
- router - здесь мы пишем маршруты и подключаем их к нашим компонентам пользовательского интерфейса
- App.vue - это компонент точки входа, это основной компонент пользовательского интерфейса, в котором будут отображаться все остальные компоненты.
- main.js - файл точки входа, который будет монтироваться
App.vue- наш основной компонент пользовательского интерфейса
- assets - ресурсы, которые не будут обрабатываться с помощью Webpack
- index.html - возможно, вы помните, что приложение SPA всегда перезаписывает содержимое одного файла, так что это тот самый файл. Это файл, который мы покажем нашим пользователям. После сборки проекта этот файл загрузит статические файлы, которые были связаны с Webpack.
Взглянем на файл index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>account-owner-client</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Единственная важная вещь в этом файле - это тег div с id app, который будет заменен нашим компонентом App.vue. В следующей строке мы можем заметить комментарий, в котором говорится: «созданные файлы будут автоматически встроены». Итак, наш js-файл, который идет в комплекте с Webpack, будет вставлен под div с id
Должно быть вы помните, что main.js это наша точка входа, верно? Давайте посмотрим на файл main.js, который является первым файлом, который запускается при запуске приложения:
import Vue from 'vue';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});
Мы создаем экземпляр нового компонента Vue, который будет монтировать наш App.vue компонент внутри div с app атрибутом id - вы помните div с id app в index.html? Наконец, мы уведомляем наш компонент Vue об использовании маршрутизатора.
Структура компонента
Обратите внимание на следующий компонент:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color:#2c3e50;
margin-top: 60px;
}
</style>
Каждый компонент Vue может содержать шаблон, скрипт и раздел стилей.
- Шаблон - это видимое содержимое компонента
- Скрипт - это логика компонента
- Стили, как вы уже догадались, - это стили шаблона.
Шаблон
В шаблоне мы можем использовать собственные HTML-теги, а также наши пользовательские компоненты Vue. Здесь мы видим <router-view/> элемент, и это место, где наш маршрутизатор будет отображать соответствующий компонент для этого маршрута.
Сценарий
В теге скрипта мы пишем логику для этого компонента. В этом компоненте у нас есть только свойство name, потому что этот компонент не является динамическим, это не что иное, как оболочка вокруг нашего представления маршрутизатора.
Стили
Здесь мы можем написать стили для шаблона. Стиль может быть ограниченным или глобальным. Область видимости стиль пишется так: <style scoped>. Этот тип стиля влияет только на шаблон этого компонента и корневой элемент дочерних компонентов, поэтому стиль не может попасть в другой компонент. В противоположность этому стили без области видимости будут совместно использоваться компонентами.
Маршрутизатор
Обратим внимание на файл router/index.js:
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}]
});
В этом файле мы снова импортируем Vue,
Затем обратите внимание создание экземпляра маршрутизатора и списка маршрутов. Мы можем указать путь, / который означает, что когда мы открываем наше приложение и переходим к root (главной странице) ( / ), то нам будет показан компонент HelloWorld. Помните, что содержимое этого компонента будет включено в компонент App.vue внутри тега <router-view/>
Мы не собираемся анализировать файл HelloWorld.vue, потому что он почти такой же, как и файл App.vue. Это просто еще один компонент с некоторым содержанием в шаблоне, и мы посмотрим, как он выглядит, но на этот раз в браузере.
Запуск приложения
Теперь, когда мы разобрались с кодом, пора запустить приложение и посмотреть все на живом примере.
Введите эту команду в терминал:
npm run dev
Это запустит наше приложение в режиме разработки. После выполнения этой команды откройте наш веб-браузер и перейдите по адресу http://localhost:8080/. Если все в порядке, мы должны увидеть стартовую страницу нашего приложения:
Мы можем заметить логотип Vue.js, который является частью компонента App.vue. Под логотипом мы видим содержимое файла HelloWorld.vue, которое отображается внутри элемента <router-view/> компонента App.vue. Приложение отображает компонент HelloWorld.vue, потому что мы находимся на пути/.