Пишем приложение на Vue 3 с Vue Router и Pinia с нуля! Часть 1. Фронтенд-разработка для начинающих

В этой статье мы рассмотрим, как создать приложение на Vue 3 с использованием Vue Router и Pinia. Мы начнем с самого начала и шаг за шагом разберем все необходимые шаги для создания фронтенд-приложения для начинающих.

Шаг 1: Установка Vue CLI

Первым шагом будет установка Vue CLI, инструмента командной строки, который поможет нам создать проект Vue. Для установки Vue CLI вам потребуется установленный Node.js и npm. Вы можете установить Vue CLI с помощью следующей команды в командной строке:

npm install -g @vue/cli

Шаг 2: Создание нового проекта Vue

После успешной установки Vue CLI вы можете создать новый проект Vue с помощью следующей команды:

vue create my-vue-app

Шаг 3: Установка Vue Router и Pinia

После создания проекта необходимо установить Vue Router и Pinia. Вы можете установить их с помощью следующих команд:

npm install vue-router@4 pinia

Шаг 4: Настройка маршрутизации в приложении

Теперь, когда у нас установлены Vue Router и Pinia, мы можем настроить маршрутизацию в нашем приложении. Создайте новый файл router.js и добавьте следующий код:


import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import NotFound from './views/NotFound.vue'

export default router


Шаг 5: Создание хранилища с помощью Pinia

Для создания хранилища с помощью Pinia, создайте новый файл store.js и добавьте следующий код:


import { defineStore } from 'pinia'

export const useStore = defineStore('store', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
})


Шаг 6: Подключение маршрутизации и хранилища к приложению

Наконец, подключите маршрутизацию и хранилище к вашему приложению. Откройте файл main.js и добавьте следующий код:


import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')


Теперь вы успешно создали приложение на Vue 3 с использованием Vue Router и Pinia! В следующей части мы рассмотрим более продвинутые темы, такие как работа с API и аутентификация пользователей.