Сегодня мы узнаем, как создавать одностраничное приложение с помощью Vue 2. Vue.js представляет собой библиотеку для создания интерактивных веб-интерфейсов. Она предоставляет data-reactive компоненты, с простым и гибким API.
Начало работы с Vue CLI
Чтобы быстро стартовать, а также пропустить процесс настройки webpack для компиляции с ES6 на ES5, мы используем Vue CLI. Если у вас нет установленного Vue CLI, установите его, выполнив следующее:
sudo npm install -g vue-cli
После установки Vue CLI настало время создать проект на Vue. Для этого мы запускаем следующую команду.
Примечание. В данном руководстве во время выполнения команды, приведенной ниже, я выбрал no (нет) при вопросе о проверке кода.
Такая проверка гарантирует, что код будет с правильными отступами, а также без лишних пробелов. Но я люблю оставлять пустые места в коде, чтобы он был лучше организован.
vue init webpack spa
В вышеуказанной строке есть два странных новых слова webpack и spa.
Webpack относится к имени шаблона, обработкой которого мы займемся, т.к. vue-cli позволяет нам делать шаблоны. Самих шаблонов великое множество, более подробно о них можно узнать на официальном сайте Vue CLI.
Spa относится к имени папки для нашего приложения, которую мы создадим. После запуска приведенного выше кода нам потребуется изменить каталог в нашем приложении и установить модули:
//меняем директорию
cd spa
//устанавливаем все необходимые модули
npm install
//запустить сервер разработки
npm run dev
Если после запуска вышеуказанных команд мы перейдем к http://localhost:8080, то увидим следующее:
Установка и конфигурирование роутера в Vue 2
Мы все настроены и готовы к запуску нашего одностраничного приложения. Тем не менее, у нас есть еще одна зависимость для установки, по имени vue-router.
Vue-router является официальным маршрутизатором для Vue. Он глубоко интегрируется с ядром Vue.js, чтобы сделать простым создание одностраничных приложений на с Vue.js. Особенности:
- Встроенный показ машрутов
- Модульная конфигурация маршрутизатора на основе компонентов
- Параметры маршрутов, запросы, маски
- Просмотр эффектов перехода с использованием системы перехода Vue.js
- Отличный контроль и навигация
- Ссылки с автоматическими активными классами CSS
- Режим истории HTML5 или хеш-режим, с автоподстройкой в IE9
- Настраиваемое поведение прокрутки
Если вы уже работали ранее с Angular или знаете что-либо о нем, то вам будет проще, поскольку vue-маршрутизатор очень похож на маршрутизатор angular; либо если знакомы с react, будет проще из-за схожести с react-router.
Основная причина, по которой мы используем vue-router, заключается в том, что он позволяет нам переключаться между страницами без перезагрузки страницы. Мы можем установить его, выполнив следующую команду.
npm install vue-router --save
Теперь перейдем к нашему файлу src/main.js для настройки маршрутизатора в приложении. Скопируйте и замените содержимое в src/main.js на это:
// Версия билда Vue, загружаемая командой `import`
// (онлайн или автономный) настроено в webpack.base.conf с другим названием
// Импорт экземпляра vue
import Vue from 'vue'
// Импорт компонента App
import App from './App'
// Импорт роутера vue
импорт VueRouter из 'vue-router'
// Говорим Vue использовать маршрутизатор
Vue.use(VueRouter)
// Определяем маршруты
const routes = []
// Создаем экземпляр маршрутизатора и передаем
// опцию `routes`. Здесь вы можете передать
// дополнительные опции, но мы пока не будем
const router = new VueRouter({
routes,
mode: 'history'
})
//Установка экземпляра Vue
new Vue({
//Определяем селектор для корневого компонента
el: '#app',
// Передаем шаблон корневому компоненту
template: '<App/>',
// Объявляем компоненты, к которым корневой
// компонент может получить доступ
components: { App },
// Передаем в роутер экземпляр Vue
router
}).$mount('#app')// Монтируем роутер в приложении
Давайте быстро рассмотрим приведенный выше код. Мы импортировали класс Vue из наших node-модулей, а затем импортировали компонент App. Компонент App является компонентом по умолчанию, созданным в Vue CLI. Мы, однако, импортируем его для использования в качестве нашего корневого компонента. После этого мы импортируем маршрутизатор Vue, а затем говорим классу Vue, что он может использовать маршрутизатор, выполнив vue.use(vuerouter)
.
В следующей строке мы определяем константу по имени routes
как пустой массив. routes
должна быть массивом объектов, где каждый объект представляет собой путь.
Далее следует создание нашего маршрутизатора. Экземпляру маршрутизатора Vue мы передаем два параметра: первый параметр - это массив маршрутов, который мы объявили выше, а другой - mode
. Параметр mode
передается так, чтобы предотвратить наши URL'S
от знака #
в них, который, кстати, только мешает при SEO-процедурах. После всего этого мы создаем новый экземпляр Vue, в котором передаем детали нашего корневого компонента, а также объявляем точку монтирования маршрутизатора.
На данный момент, если мы снова вернемся к нашему приложению, мы заметим, что, похоже, ничего не изменилось. Однако сейчас у нас настроен маршрутизатор.
Следующий шаг, который нужно предпринять сейчас, - это заменить содержимое нашего компонента App на роутер, где каждый компонент, соответствующий нашему представлению, будет визуализирован с использованием тегов <router-view></router-view>
. Откройте свой файл src/App.vue и замените его следующим кодом:
<template>
<div id="app">
<!-- роутер, где будут отображаться компоненты -->
<router-view></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>
Если мы рассмотрим приведенный выше код, то заметим некоторые отличия от кода, который был автоматически сгенерирован:
- Тег
router-view
был помещен внутри шаблона, для визуализации представлений.
- Удаление оператора импорта для компонента
hello
.
- Удаление блока компонента в самом теге скрипта.
Удаленные компоненты были удалены потому что больше в них нет необходимости, но самое важное – это то, что появилась табличка вида роутера, как уже и говорилось.
На данный момент, если мы перезагрузим наше приложение, мы получим пустую страницу.
Настройка маршрутов
Теперь давайте добавим компонент hello в качестве нашего компонента для домашней страницы, а также добавим путь к нашему массиву routers.
Откройте файл main.js и замените блок, который держит маршруты:
//импорт компонента hello
import Hello from './components/Hello'
//Определяем маршруты
const routes = [
//Определяем корневой URL приложения
{ path: '/', component: Hello }
]
Взгляните на приведенный выше код. Мы импортировали компонент hello, который у нас есть изначально и присвоили ему путь, поскольку есть компонент, который обрабатывает путь к корню, а соответственно если мы перезагрузим страничку, то увидим это:
Обратите внимание, что на изображении выше логотип Vue больше не появляется, потому что мы удалили это изображение когда заменяли контент компонента App.
Теперь давайте определим еще один маршрут, для чего создадим новый компонент. Создайте внутри папки src/components файл по имени About.vue и поместите в него следующее:
<template>
<div id="about">
Некий текст
</div>
</template>
<script>
export default {
name: 'about'
}
</script>
<!-- стили компонента -->
<style>
#about {
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>
Теперь давайте рассмотрим вышеупомянутый компонент. Компонент содержит текст внутри шаблона, который будет отображаться после того, как мы перейдем к ссылке странице about. Однако нам все равно нужно добавить новый компонент и путь к нашим маршрутам, прежде чем его можно будет просмотреть. Для этого откройте main.js и замените блок с маршрутами следующим:
//Импорт компонента hello
import Hello from './components/Hello'
//Импорт компонента about
import About from './components/About'
//Определяем маршруты
const routes = [
//Маршрут для главной веб-страницы
{ path: '/', component: Hello },
//Маршрут для страницы about
{ path: '/about', component: About }
]
Единственное отличие нового кода состоит в том, что мы импортировали компонент about, а также добавили маршрут к этой странице. Если теперь перейти к http://localhost:8080/about, мы увидим, что на ней написано.
Использование ссылок маршрутизатора
Однако это не то, что мы хотим. Вся фишка одностраничного приложения в том, что страница не перезагружается снова. Для этого нам необходимо использовать тег <router-link></router-link>
. Давайте откроем наш файл App.vue, а затем добавьте к нему ссылку на маршрутизатор. Поэтому до объявления нашего <router-view></router-view>
в компоненте, давайте добавим две ссылки маршрутизатора:
<router-link v-bind:to="'/'">Home</router-link>
<router-link v-bind:to="'/about'">About</router-link>
Этот код создает для нас два ссылочных тега и выполняет динамическую маршрутизацию, так что страница не перезагружается. Если вы перезагрузите приложение, вы заметите, что добавились две новые ссылки. При щелчке по этим ссылкам содержимое изменяется, а страница не перезагружается.
Заключение
Вот как создать одностраничное приложение. Вы можете усложнить его:
- Добавление дополнительных маршрутов
- Передача параметров вместе с маршрутами
- Использование защиты для маршрутов, которые доступны неавторизованным пользователям
В следующей части этого урока мы поговорим о передаче параметров, а также об использовании защиты маршрутов для защиты вашего приложения.