5 .1 Установка стартовых модулей проекта

На фронтенд возлагаются задачи:

• шаблонизации проекта
• маршрутизации проекта
• хранение и обработка данных
• взаимодействие с сервером
• и наконец, стилизация проекта.

Vue по умолчанию отлично справляется с первой задачей. А для всех остальных необходимо подобрать и установить модули.

Начальный набор модулей проекта: "axios", "core-js", "vue", "vue-router", "vuex"

Каждый из них можно установить либо через интерфейс, либо с помощью консоли следующей командой:

npm i vue, axios, vue-router, vuex

А теперь еще раз взглянем на задачи, и сопоставим их с модулями.

• шаблонизацию проекта формирует сам Vue
• за маршрутизацию проекта отвечает vue-router
• за хранение и обработку данных отвечает vuex
• за взаимодействие с сервером - axios
• за стилизацию Vuetify или другие UI модули

5 .2 Шаблонизация

При шаблонизации проекта выделяют:

базовый App.vue

маршрутные компоненты

вспомогательные

5 .3 Vuex Store

После установки необходимых модулей, открываем файл store/index.js вставляем следующий код:

Исходный код

import { createStore } from 'vuex'
export default createStore({
    state: {},
    getters: {},
    actions: {},
    mutations: {}
})

Добавляем axios

import { createStore } from 'vuex'

import axios from "axios"

export default createStore({
    state: {},
    getters: {},
    actions: {},
    mutations: {}
})

В дальнейшем, в этом файле будут храниться объекты с данными. Пример store/index.js с запросом на бэкенд:

import { createStore } from "vuex";
import axios from "axios";
export default createStore({
  state: {
    users: [],
    catalogs: []
  },
  getters: {
    getUsers: (state) => state.users,
    getCatalogs: (state) => state.catalogs,
  },
  actions: {
    async fetchUsers({ commit }) {
      try {
        const data = await axios.get(
            "https://jsonplaceholder.typicode.com/users"
        );
        commit("SET_USERS", data.data);
      } catch (error) {
        alert(error);
        console.log(error);
      }
    },
    async fetchCatalogs({ commit }){
      try {
        const data = await axios.get(
            "public/catalogs"
        );
        commit("SET_CATALOGS", data.data);
      } catch (error) {
        alert(error);
        console.log(error);
      }
    }
  },
  mutations: {
    SET_USERS(state, users) {
      state.users = users;
    },
    SET_CATALOGS(state, catalogs) {
      state.catalogs = catalogs;
    },
  },
});

7 .1 Ленивая подгрузка компонентов

Давайте еще раз взглянем на маршрутизатор по-умолчанию:

import Home from "../views/Home.vue";
const routes: Array = [
  {
    path: "/",
    name: "Home",
    component: Home,
  }
];

Обратите внимание на то, что подгружаемый компонент маршута выводится в тэг router-view базового компонента App.vue:

Для создания ссылок на такой подгружаемый маршрутный компонент есть тэг router-link

7 .2 Переменные в маршрутах

Переменные в маршрутах определяются символом :. Пример:

{path:'/destination/:id', component: ()=>import('@/vews/DestinationShow.vue')}

В компоненте DestinationShow к значению переменной id мы можем обратиться с помощью объекта $route.params:

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

Например, создать переменную destinationId и использовать её в функции для создания объекта destination мы можем следующим образом:

import sourceData from '@/data.json'
export default {
 computed:{
  destinationId(){
   return parseInt(this.$route.params.id);
  },
  destination(){
   sourceData.destinations.find(destination => destination.id === this.destinationId)
  }
 }
}

Использование объект destination в шаблоне:

7 .3 Именные маршруты

Если создать именной маршрут

{path:'/destination/:id', name:'destination.show' component: ()=>import('@/vews/DestinationShow.vue')}

То в любом шаблоне в router-link можно сослаться на него с помощью свойства name параметра :to

7 .4 Настройки маршрутизатора

Маршрутизатор по умолчанию добавляет # во все запросы (пример: http://localhost:8081/#/about). Чтобы от него избавиться необходимо ввести небольшие изменения в файл router/index.js. Вместо модуля createWebHashHistory подключить и использовать модуль createWebHistory:

 
import { createRouter, createWebHistory } from 'vue-router';
...
const router = createRouter({
  history: createWebHistory(),
  routes
})
 

Если в маршрутизаторе определяются переменные, например:

    {
      path: '/',
      name: 'index',
      components: { default: Index, header: MainNavbar, footer: MainFooter },
      props: {
        header: { colorOnScroll: 400 },
        footer: { backgroundColor: 'black' }
      }
    }

то в app.js их можно использовать так:

<template>
  <div id="app">
    <router-view name="header" />
    <div class="wrapper">
      <router-view />
    </div>
    <router-view name="footer" />
  </div>
</template>
<script>
export default {};
</script>

8 .1 Что такое компонент

На низком уровне Компоненты представляют собой изолированные части (блоки) пользовательского интерфейса (UI). Компонент может взаимодействовать с другими компонентами.

Возьмем, к примеру, элемент

. Мы можем использовать этот элемент с любыми технологиями в браузере, и мы можем передавать такие свойства, как width и height и слушайте такие события, как onclick.

На высоком уровне, мы можем сказать, что компоненты — это набор API-интерфейсов веб-платформы. (интерфейсы прикладного программирования), которые позволяют нам создавать теги HTML, со встроенными стилями и JavaScript логикой, которые будут работать в современных веб-браузерах и может использоваться фрэймворками JavaScript (React, Angular, Vue.js и т. д.).

Ожидается, что компоненты будут использоваться в веб-браузерах в течение длительного времени и предлагают множество преимущества, в том числе следующие:

• Веб-компоненты можно использовать повторно и работать между платформами.

• Веб-компоненты могут работать во всех основных веб-браузерах.

• Веб-компоненты просты в обслуживании и готовы к будущем, если они основаны на спецификациях веб-платформы.

8 .2 Вывод переменных

Для вывода переменной в тэге template можно воспользоваться диррективой {{}}.

Вывод переменной строки или числа:

{{user_name}}

Вывод переменной объекта

{{user.name}}

Вывод массива

    <div v-for="user in users" :key="user.id">
      Hello,  {{ user.name }},  from {{ user.location.city }}!
      <hr/>
    </div>

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

 :key="user.id"

8 .3 Два способа создания переменных

Переменные для компонентов можем создавать в тэге script,

Для создания переменных мы можем использовать метод data:

export default {
  data() {
    return {
      name: "test",
    }
  }
}

Тогда в template мы можем вывести значение:

Hello, {{ name }}!

Vue3

Во Vue3 для создания переменных можно воспользоваться модулем ref. Пример:

import {ref, onMounted} from "vue";
import axios from 'axios';

export default {
  name: 'About',
  setup() {
    const users = ref([]);
    onMounted(async () => {
      const response = await axios.get('https://randomuser.me/api/?results=6');
      users.value = response.data.results;
      console.log(users.value);
    });
    return {
      users
    }
  }
}

Обратите внимание на то, что после объявления переменной users, мы можем к ней обращаться с помощью users.value, например для того чтобы определить или переопределить её значение.

Такой способ создания и работы с переменными (с помощью модуля ref и в диррективе setup используется в Composition API)

8 .4 Входящие параметры компонентов

Входные параметры — это пользовательские атрибуты, которые вы можете установить на компоненте. Когда значение передаётся в атрибут входного параметра, оно становится свойством экземпляра компонента. Чтобы передать заголовок в компонент нашей записи блога, мы можем включить его в список входных параметров, которые принимает компонент, с помощью опции props:

  props: {
    msg: String
  }

Тогда при вызове этого компонента, в него можно передать значение переменной msg

msg="значение переменной"

8 .5 Хуки жизненного цикла

Каждый компонент проходит определенные шаги инициализации. Между этими шагами можно вызывать функции - хуки жизненного цикла. С помощью которых можно выполнять свой код на определенных этапах.

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

и другие. Подробнее по ссылке https://v3.ru.vuejs.org/ru/api/options-lifecycle-hooks.html#beforecreate

Все хуки вызываются в контексте переменной this.

Пример:

 data(){
   return {
     a:2
   }
 },
  created() {
    console.log(this.a)
  }

8 .6 Повторное использование кода в компонентах, примеси

У Vue.js для возможности наследования имеются mixin-ы. В mixin мы можем вынести данные, группу методов и даже hook-и жизненного цикла.

Объект примеси сперва необходимо объявить.

Пример:

const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('привет из примеси!')
    }
  }
}

Теперь можем импортировать примесь в компонент.

const app = Vue.createApp({
  mixins: [myMixin]
})

Однако, возможность переиспользования примесей ограничена: примесям нет возможности передавать какие-либо параметры для управления логикой её работы, что снижает гибкость с точки зрения абстрагированной логики.

В современных  версиях Vue.js в качестве альтернативе примесям предлагается иной способ организации кода: Composition API.

9 .1 Массив объектов

в

export default {
  name: 'Time',
  data() {
    let pictures = [
      {id: 1, image: "pink.jpg", title: "Pink"},
      {id: 2, image: "blue.jpg", title: "Blue"},
    ];
    return {
      pictures
    }
  }
}

В тэге template вывод массива picture можно осуществить с помощью атрибута v-for

9 .2 Чтение данных в формате JSON из файла

С примером JSON-файла можно ознакомиться перейдя по ссылке erud.by/uploads/vue_admin/61f14278c509f_data.json

Файл data.json, который находится в корне папки src можно импортировать следующим образом:

import sourceData from '@/data.json'
export default {
 data(){
  return {
    destinations: sourceData.destinations
  }
 }
}

Таким образом мы получили переменную destinations, которая будет доступна в шаблоне. Для того, чтобы пройтись по всем значениям, хранящимся в JSON, необходимо использовать v-for:

Обратите внимание на атрибуты :key, :to, :src и :alt. Это динамические атрибуты-переменные, на что указывает символ :. Значенине атрибута :key должно быть уникальным.

9 .3 Получение данных по ссылке с помощью Axios

Данные генерируемые сервером, могут быть динамическими, т.е. зависеть от параметров. Пример - https://randomuser.me/api/?results=2 или https://randomuser.me/api/?results=100. Или статическими, т.е. всегда отдавать одни и те же данные. Могут принимать параметры, по которыми осуществляется запрос на бэкенде, могут не принимать ни одного параметра.

Фронтенд фрэймворкам всё-равно, существует ли файл физически, или он генерируется в момент обращения к нему клиента. Главное, чтобы в формат JSON не было ошибок, иначе фрэймворк откажется его принимать.

При обработке данных, получаемых по ссылке есть несколько особенностей: необходимо выполнить запрос на бэкенд, а для выполнения запроса лучше использовать асинхронную функцию. Для выполнения запросов есть инструмент axios.

npm install axios

https://github.com/axios/axios - По этой ссылке официальная документация

В скрипте компонента запрос идёт в Vuex store:

import {computed, onMounted} from "vue";
import { useStore } from "vuex";
const store = useStore();

const catalogs = computed(() => {
  return store.state.catalogs.data;
});

onMounted(() => {
  store.dispatch("fetchCatalogs");
});

В файле store/index.js реализуем метод fetchUsers, который непосредственно и делает сам запрос на бэкенд:

  actions: {
    async fetchUsers({ commit }) {
      try {
        const data = await axios.get(
            "https://jsonplaceholder.typicode.com/users"
        );
        commit("SET_USERS", data.data);
      } catch (error) {
        alert(error);
        console.log(error);
      }
    },
  }

9 .4 Использование Axios в форме авторизации

В Composition API логику получения и обработку ответов сервера приняно выносить в отдельные функции внутри опции setup, которая выполняется перед созданием компонента, сразу после разрешения входных параметров props, и служит точкой старта для Composition API. Для получения ответов бэкенда необходимы либо колбэки, либо промисы, либо асинхронные функции. Пример асинхронной функции:

import axios from "axios";
import {ref} from "vue";
import {useRouter} from "vue-router";
export default {
  name: "AuthRegister",
  setup(){
    const user_name = ref('');
    const email = ref('');
    const password = ref('');
    const password_confirmation = ref('');
    const router = useRouter();
    const submit = async () => {
      //console.log(user_name, email)
      const response = await axios.post('register',{
        name: user_name.value,
        email: email.value,
        password: password.value,
        password_confirmation:password_confirmation.value
      });
    }
    return {
      user_name,
      email,
      password,
      password_confirmation,
      submit
    }
  }

}

Обратите внимание, что вызовается axios.post асинхронно, с помощью await.

9 .5 Реальные данные без бэкенда с RapidAPI

Здесь рассмотрим пример работы с сервером RapidAPI. Но прежде там необходимо зарегистрироваться.

import {ref, onBeforeMount} from "vue";
import axios from "axios";

const picture = ref({'data':{'url':''}});
onBeforeMount(async () => {
  picture.value = await pictures();
}); 
const pictures = async () => {
  const options = {
    method: 'GET',
    url: 'https://astronomy-picture-of-the-day.p.rapidapi.com/apod',
    params: {api_key: 'nWYhQQdmCKwd0cVvrfyge124OrW4fnVOEL7QDdJH'},
    headers: {
      'X-RapidAPI-Key': '3ea575d164msh0d4f30e1df818b9p1b9782jsn2515200d115d',
      'X-RapidAPI-Host': 'astronomy-picture-of-the-day.p.rapidapi.com'
    }
  };

  let stoba = await axios.request(options)
  return stoba;
};

9 .6 Фэйковые API для тестирования

В процессе разработки фронтенда, нужны фэйковые данные.

Для получения фэйковых данных можно перейти по ссылке https://jsonplaceholder.typicode.com/ и выбрать необходимый ресурс: posts, users, photos ...

Если нужно больше тестовых пользователей, то можно воспользоваться ресурсом https://randomuser.me/api/?results=100 (вместо цифры 100 можно вводить любую цифру - количество выдаваемых пользователей)

10 .1 Дефолтные настройки Axios

Для создания глобальных дефолтных настроек запросов можем в файле main.js импортировать модуль axios и через него добавить необходимые значения:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:8000/api/';
axios.defaults.headers["content-type"] = "application/json";
axios.defaults.headers.common.authorization = `Bearer ${localStorage.getItem('token')}`;
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

createApp(App).use(router).mount('#app');

10 .2 Register

Сперва необхоимо создать маршрут

  {
    path: '/register',
    name: 'register',
    component: () => import(/* webpackChunkName: "login" */ '../views/AuthRegister.vue')
  }

Ссылка на готовый компонент bootstrap формы регистрации  - https://github.com/mikhalkevich/vue_admin/blob/main/src/views/AuthRegister.vue

в

10 .3 Login

Сперва в файле routes/index.js необходимо создать маршрут на компонент с формой логина.

  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '../views/AuthLogin.vue')
  },

Если в базовом шаблоне у нас подключена библиотека Bootstrap, то форма логина можем взять из шаблонов bootstrap-а.

Компонент логина с формой представленной на изображении можно взять по ссылке - https://github.com/mikhalkevich/vue_admin/blob/main/src/views/AuthLogin.vue

Обрабатывает форму следующий скрипт:

import axios from "axios";
export default {
  name: 'AuthLogin',
  data() {
    return {
      email: '',
      password: '' 
    }
  },
  methods: {
    async sendLogin() {
      const {data} = await axios.post(`login`, {
        'email': this.email,
        'password': this.password
      });
      await localStorage.setItem('token', data.token);
      //document.location.href = '/';
      await this.$router.push('/');
    },
  }
}

Необходимые пояснения по скрипту. Заранее объявляем переменные email и password. По нажатию на кнопку login, запускаем асинхронную функцию sendLogin, которая делает асинхронный запрос на бэк и передает туда значение этих переменных. Далее бэкенд должен вернуть токен, который мы помещаем в localstorage<.code>. Таким образом мы запомнили значение токена, который в глобальных настройках axios добавляется к заголовку в bearer.

Теперь пользователь авторизован и для него будут доступны закрытые запросы бэкенда.

11 .1 Начало использования

Устанавливаем с помощью NPM:

npm install @vue/cli -g

В файле main.js подключаем модуль:

import Vue from 'vue'
import Vuetify from 'vuetify'
 
Vue.use(Vuetify)

Помним про файл стилей, который тоже нужно подключить:

// index.js or main.js
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader

Любое приложение должно строиться примерно по такой структуре:

<v-app>
  <v-navigation-drawer app></v-navigation-drawer>
  <v-toolbar app></v-toolbar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer app></v-footer>
</v-app>

11 .2 Стартовая страница

Сразу после добавления Vuetify в проект вы заметите немало изменений в структуре и коде нашего проекта.

Сейчас, если перезапустим сервер и перейдём по http://localhost:8080 , увидим следующее:

11 .3 Компонент v-app

Обратите внимание, как теперь страница выглядит иначе, чем начальная страница по умолчанию, которая обычно создается с помощью команды create app Vue CLI create app . Это означает, что Vuetify был настроен правильно. Давайте разберем код Vuetify, начиная с этого компонента:

 <v-app> <!-- put content here.... --> </v-app> 

Компонент v-app является обязательной оболочкой, необходимой для правильной работы приложения. Он используется для определения точек останова сетки для макета. Он может существовать где угодно внутри <body> , но должен быть родителем всех компонентов Vuetify. Компонент v-content должен быть прямым потомком v-app .

Следующий компонент, который мы обсудим, это v-toolbar . Это может быть использовано в качестве основной панели инструментов для вашего приложения. Вы можете разместить иконки, меню и другие предметы внутри него.

<v-app> <v-toolbar app> <!-- put content here.... --> </v-toolbar> </v-app> 

Первая опора, с которой вы столкнетесь, это app . Это просто говорит панели инструментов придерживаться вершины, когда пользователь начинает прокручивать вниз. Если вы удалите реквизит app , панель инструментов будет прокручиваться вместе с остальной частью страницы. Попробуйте сами и посмотрите, что получится. Мы также можем добавить больше реквизита, чтобы настроить внешний вид нашей панели инструментов.

С Vuetify вы поймете, что вам вряд ли понадобится писать какой-либо код CSS для настройки внешнего вида вашего приложения. Однако если вы хотите, чтобы ваше приложение поддерживало несколько тем, вам может потребоваться определить несколько таблиц стилей. Vuetify предоставляет генератор тем, чтобы помочь вам выбрать набор цветов для вашей темы.

А сейчас давайте сосредоточимся на настройке нашего приложения с помощью реквизита. Первый, который мы собираемся изучить, называется dark . Просто обновите ваш код следующим образом:

<v-app> <v-toolbar app dark> <!-- put content here.... --> </v-toolbar> </v-app>

или

<v-app> <v-toolbar app dark color="red"> <!-- put content here.... --> </v-toolbar> </v-app> 

Чтобы затемнить фон, вы можете использовать значения от darken-1 до darken-4 . Каждый уровень увеличивает темноту. Вы можете использовать значения от lighten-1 до lighten-4 чтобы осветлить фон. Если вы хотите изменить цвет текста, добавьте text-- перед text-- — например, text--lighten-3 . У нас также есть accent-1 до accent-4 который, кажется, контролирует насыщенность. accent-1 снижает насыщенность цвета, в то время как accent-4 увеличивает насыщенность и становится более яркой.

Обратите внимание, что я не вытаскиваю эти реквизиты и ценности из воздуха. Вот документация для цветов Vuetify.

11 .4 Система Grid

Vuetify использует 12-ти точечную систему координат для размещения контента приложения. Он построен с использованием модуля макета CSS Flexbox , который представляет собой систему для распределения элементов в адаптивной структуре макета без использования поплавков или позиций. Сетка поддерживает 5 медиа-точек останова, ориентированных на определенные размеры экрана или ориентации.

Подробнее о системе - vuetifyjs.com/en/components/grids

11 .5 Использование компонентов

Рассмотрим некоторые типовые задачи с использованием готовых компонентов Vuetify.

В последующих примерах используются следующие компоненты:

• v-card
• v-form
• v-btn

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

<template> 
 <v-layout align-center justify-center> 
  <v-flex xs12 sm8 md4> 
   <v-card class="elevation-12"> 
    <v-toolbar dark color="purple"> 
     <v-toolbar-title>Login Form</v-toolbar-title> 
    </v-toolbar> 
    <v-card-text> 
     <v-form> 
      <v-text-field prepend-icon="person" name="login" label="Login" id="login" type="text" ></v-text-field> 
      <v-text-field prepend-icon="lock" name="password" label="Password" id="password" type="password" ></v-text-field> 
     </v-form> 
    </v-card-text> 
    <v-card-actions> 
     <v-spacer></v-spacer> <v-btn dark color="pink">Login</v-btn> 
    </v-card-actions> 
   </v-card> 
  </v-flex> 
 </v-layout> 
</template> 

13 .1 Синтаксис sass и scss

Препроцессор Sass поддерживает два синтаксиса: sass и scss. Они предусматривают одну и ту же функциональность, но используют разный синтоксис.

В sass опущены все фигурные скопки и точки с запятой, а структура кода задаётся отступами (такая структура кода напоминает языки программирования Python и Ruby)

body 
  color: green

Синтаксис scss использует фигурные скопки и точки с запятой и похож на обычный css:

body {
  color: green
}

Файлы scss имеют расширение .css А файлы sass имеют расширение .sass

13 .2 Создание и подключение к проекту базового файла стилей и файла с переменными scss

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

Сперва создадим файл с именем vue.config.js в корне проекта на том же уровне, что и package.json. В нем мы собираемся определить некоторые параметры конфигурации. Вы можете прочитать больше об этом файле здесь.

Внутри него мы добавим оператор импорта:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/scss/main.scss";`
      }
    }
  }
};

Если же вы используете TypeScript, и в проекте имеется файл src/main.ts, то подключить стили можно в этом файле:

import "@/assets/scss/main.scss";

Теперь, в папке src/assets создадим папку scss, в ней два файла: main.scss и _variables.scss (по соглашению о присвоении имён SASS, в названии файла, содержащего переменные, используем символ нижнего подчёркивания _, но это не обязательно).

В файле _variables.scss будем держать переменные для стилей:

$primary: purple;

Теперь, в любом компоненте, в блоке со стилями, а также в других scss-файлах мы можем использовать эти переменные:

#app {
  color: $primary;
}

13 .3 Функциональность Sass

Строчные вычисления

Вложенные селекторы

Фрагментирование (@import)

миксины

расширения

управление цветом

циклы