Создаем простое SPA на 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 init webpack spa

Мы выбрали сборщик webpack, vue-cli поддерживает и другие сборщики, подробнее можно прочитать здесь. spa указывает на папку, в которой будет развернут проект.

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

//переходим в spa
cd spa
//устанавливаем зависимости
npm i
//запускаем сервер
npm run dev

После выполнения вышеуказанных команд, переходим http://localhost:8080

Настройка Vue router

Теперь мы готовы начать разработку нашего single page application. Однако у нас есть еще одна зависимость, которую нужно установить - vue-router.

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

Vue-router является официальным роутером для Vue. Он глубоко интегрируется с ядром Vue.js, чтобы создать одностраничное приложение. Если раньше вы работали с angular и его роутером, то у вас не должно возникнуть проблем роутером от vue, также если вы работали с react-router.

Мы можем установить его, выполнив следующую команду.

npm i vue-router --save

Теперь перейдем к нашему src/main.js, чтобы настроить приложение на использование роутера.

Скопируйте и замените содержимое src/main.js на следующее:

// Импортируем зависимости
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'

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')

Теперь открываем файл 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>

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

1. Тег router-view который был добавлен внутрь шаблона, там мы будем рендерить наши компоненты.
2. Удаление import для компонента hello.
3. Удаление блока компонентов в самом теге скрипта.

Установка роутов

Теперь давайте добавим компонент hello в качестве нашего компонента для главной страницы, а также добавим путь к нашему массиву роутов.

Откройте файл main.js и замените блок, который содержит константы роутера:

// импортируем Hello компонент
import Hello from './components/Hello'
// инициализируем роуты
const routes = [
// указываем, что компонент hello будет отображаться на нашей главной странице
{ path: '/', component: Hello }
]

Теперь создадим файл внутри папки src/components с именем About.vue и поместим в него следующее.

<template>
  <div id="about">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
  </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 и импортируйте наш About компонент, после чего добавьте новый роут:

// импортируем Hello компонент
import Hello from './components/Hello'
// импортируем About компонент
import About from './components/About'
// инициализируем роуты
const routes = [
// указываем, что компонент hello будет отображаться на нашей главной странице
{ path: '/', component: Hello },
{ path: '/about', component: About }
]

Если мы перейдем к http://localhost:8080/about, мы увидим, что будет отрисован текст компонента About.

Использование ссылок

Давайте откроем наш файл App.vue, а затем добавим к нему ссылки, перед объявлением нашего <router-view> </ router-view> :

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

Вышеприведенный код создаст для нас два якорных тега и выполнит динамическую маршрутизацию, чтобы страница не перезагружалась.

Подпишись на мой twitter