habrahabr

Базовый набор для VueJS-разработчиков

  • пятница, 15 мая 2020 г. в 00:31:09
https://habr.com/ru/post/501902/
  • JavaScript
  • VueJS


Начиная с основ


Вам когда-либо приходило в голову желание относительно того, чтобы начать писать собственные одностраничные веб-приложения? Не замечали ли вы тот факт, что на данный момент времени имеется три базовых претендента на роль вашего верного спутника? Каждый из них уникален в своём роде и предоставляет целый ряд преимуществ.


Так, например, Angular имеет огромное количество функциональных возможностей из коробки, React позволяет очень гибко настраивать собственное окружение, а VueJS славится своей абстракцией над сложными вещами. Какой выбрать именно вам? Это дело сугубо индивидуальное и зависит от проектной задумки и поставленных задач.


Одностраничные приложения? Это вкусно?


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


Если же говорить более серьёзно, то подобного рода приложения позволяют нам, как разработчикам осуществлять куда большую взаимосвязанность между каждым компонентом веб-сайта. Это звучит, конечно, хорошо, но чем же это хорошо для конечного пользователя? Здесь достаточно много переменных. Так, например, стоит отметить большую отзывчивость интерфейса, практически моментальную загрузку страниц и многое другое.


VueJS — это правда просто? Я как-то мало верю


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


image


Хорошо. Тогда с чего начинать? Руки уже чешутся


Основываясь на официальной документации от разработчиков данного веб-фреймворка, мы можем выделить всего два возможных способа использования VueJS в вашем приложении. Условно их можно характеризовать достаточно просто и методично. Как? Простой и более сложный способ.


Простой способ


Именно данный способ можно использовать для проведения некоторого ознакомительного экскурса в использование заданной технологии. Чем же, собственно, он характеризуется? Использованием старого стиля подключения скриптов. Никаких пакетных модулей. Только хардкор.


<!-- Версия с предупреждениями. Dev-сборка -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- Оптимизированная версия. Используется для продакшена -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Второй способ


Именно данный способ, пожалуй, является наиболее правильным со стороны архитектуры приложения и простоты его поддержания в надлежащем виде. Он позволяет не только использовать основной функционал VueJS, но и расширять таковой с помощью сторонних библиотек или решений. Но что же нам необходимо для начала использования этого способа? От нас для подобного способа ничего особого и не требуется. Всего-то установленный Node.js и npm/yarn.


# Для npm
npm install -g @vue/cli

# Для yarn
yarn global add @vue/cli

# Создание шаблона приложения. Название проекта только в нижнем регистре.
vue create appname
# или, если вы предпочитаете GUI, то:
vue ui

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


# ~/.bashrc для bash
# ~/.zshrc для zsh

export PATH="/home/username/.yarn/bin:$PATH"

Немного конкретики для второго способа


Итак, вы создали шаблон приложения и произвели все необходимые манипуляции с переменными вашего окружения. Что же вы видите в вашем редакторе или проводнике? Огромное количество разрозненных файлов и папок, которые на первый взгляд не представляют какой-либо целостной картины, ведь так? Это только на первый взгляд.


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


  1. assets — здесь обычно хранятся изображения или иные статические ресурсы.
  2. components — компоненты из которых состоит любое vue-приложение. Это может быть как главное меню, так и просто стилизованная кнопка.
  3. router — одно из самых важных папок для функционирования вашего одностраничного приложения. Именно здесь вы указываете ключевые url вашего приложения.
  4. store — самая любимая часть каждого разработчика на VueJS, ибо именно она позволяет в должной мере распространять данные по всем доступным вам компонентам.
  5. views — тесно связана с router, ибо обычно именно отсюда берётся шаблон для рендера ваших страниц.
  6. App.vue — основная точка входа вашего приложения. Именно отсюда и начинается разработка.
  7. main.js — конфигурация вашего приложения. Например, подключение глобальных компонентов.

Утрированный пример приложения


// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // Статические данные
  state: {
    Title: 'Tested',
    MenuTitle: ['Привет', 'Мир'],
    Number: 30
  },
  // Функции для изменения статических данных
  mutations: {
    Title: (state, value) => state.Title = value,
    MenuTitle(state, value) {
       state.MenuTitle.append(value);
    }  
  },

  // Аналог mapState. Только больший уклон в выдачу изменённых данных.  
  getters: {
    NumberTest(state) {
       return state.Number * state.Number;
    } 
  }
})

<!- -App.vue -->
<template>
  <!-- Template может содержать только один элемент с бесконечной вложенностью. Два элемента на подуровне <template> вызовут ошибку -->
  <div id="app">
    <Menu></Menu>
    <router-view></router-view>
  </div>
</template>

<script>
  // Импорт компонента Menu
  import Menu from './components/Menu'
 // Импорт mapState для наиболее простого получения данных из store
  import { mapState } from 'vuex';

  export default {
    name: 'HelloWorld',
    // Компоненты. Обязательно подключаем перед использованием в template
    components: {
      Menu
    },

    // Computed - вычисляемые значения. Реактивно изменяют значение.
    computed: mapState([ 'Title' ]),

   // Watch - следим за изменением вычисляемого свойства и применяем нужные методы.
   // --> Так, например, здесь вы можете наблюдать за динамическим изменением Title
    watch: {
      Title(value) { document.title = value; } 
    },
  // Использование хука жизненного цикла. Created вызывается при прямом открытии сайта.
  created() {
      document.title = this.Title;
    }
  }
</script>

<style lang="css">

</style>


<template>
  <!--v-if - принимает булево значение и показывает или скрывает блог в зависимости от true/false. -->
  <ul v-if="Number > 30">
    <!-- v-for - принимает массив и производит рендер отталкиваясь от него. В нашем случае будет выведено 3 элемента. С учётом вызванной мутации через this.$store.commit('MenuTitle', 'value3') -->
   <!-- v-bind - привязывает реактивные значения. Это может быть также и style (Вариаций очень много). -->
   <!-- {{ element }} - представляет из себя способ вставки реактивных значений в html. Допустим, здесь вы можете заметить вывод перечисляемых элементов в упорядоченном списке -->
    <li
    v-for="(element, index) in MenuTitle"
    v-bind:key="index"
    >{{ element }}</li>
  </ul>
  <!-- v-else - показывает блок только в том случае, если v-if получило false -->
  <h1 v-else> Number меньше 30 <h1>
</template>

<script>
  import { mapState } from 'vuex';

  export default {
    name: 'mainMenu',
    computed: mapState({
      MenuTitle: (state) => state.MenuTitle,
      Number() {
        return this.$store.getters.NumberTest;
      }
    }),
    created() {
       this.$store.commit('MenuTitle', 'value3');
    }
  }
</script>

<!-- scoped - ограничивает зону влияния css-кода этим файлом -->
<style lang="css" scoped>

</style>

Утрированный пример из документации для первого способа


<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Привет, Vue!'
  }
})

Конец. Серьёзно?


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


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