Sector567

Разбить массив на чанки и отдавать нужный чанк на нужной странице. Ваш К.О.

вот пример резины
https://adminlte.io/themes/AdminLTE/index2.html

если не хотите резину, ограничиваете ширину контента, а фон тянется на весь экран

Ну это дизайнерские косяки))
Как бы по хорошему это делал я:
1. адаптив (но это отдельная тема)
2. для десктопа минимальная ширина в которую влезает конент, Уже - либо адаптив, либо горизонтальный скролл
3. хэдер на всю ширину
4. сайдбар прибит к левому краю
5. контент (сам дэшборд) растягивается на всю оставшуюся ширину
6. ну а вот содержимое контента уже надо смотреть... в терминологии флексбоксов: или flex-flow: row wrap, или width:25%, или justify-content: space between.

UPD: Назло ленивому дизайнеру можно сделать экран фиксированной ширины и отцентровать его на сером фоне (того же цвета что и бэкграунд в Фигме).

Это полноразмерное приложение и в рамки его вообще загонять не нужно. Ограничь по ширине контент и это все, что требуется.

Потому что Symbol(<имя>) - создание нового символа. Чтобы получить значение по сиволу, надо иметь на руках ссылку на этот сиvвол. Из документации:
Symbol("foo") === Symbol("foo"); // false

Грубо, но по сути: команда пушит директорию dist (скомпилированный код) в ветку gh-pages (то, что будет отображаться в github pages репозитория).

Можно:

class Animal {}
class Cat {}

const animal = new Animal();
const cat = new Cat();

console.log(animal instanceof Animal); // true
console.log(animal instanceof Cat); // false
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

Reflect.setPrototypeOf(Cat.prototype, Animal.prototype);

console.log(animal instanceof Animal); // true
console.log(animal instanceof Cat); // false
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

У вас есть доступ к Cat.prototype и к Animal.prototype, в любой момент вы можете скопировать свойства, причем это отразится в том числе на уже созданных экземплярах класса

const extendMe = ({prototype: childProto}, {prototype: parentProto}) => {
  for (const key of Object.getOwnPropertyNames(parentProto)) {
    if (!(key in childProto)) {
      childProto[key] = parentProto[key]
    }   
  }
}

class Animal {
  name () { return 'Животное' } 
  legs () { return undefined }
  get isAnimal () {
    return true
  }
}

class Cat {
  name () { return 'Котик' } 
  legs () { return 15 }
}

const cat = new Cat()
console.log(cat.isAnimal) //undefined

extendMe(Cat, Animal)
console.log(cat.isAnimal) // true

но что делать если у тебя windows?

1. Сделать это ручками в консоли (примерно так):

npm run build
cd dist
git init
git add -A
git commit -m 'deploy'
git push

2. Поставить дистрибутив на базе Linux, тем самым упростив себе работу (но это не точно)

3. Использовать WSL

Варианты решения проблемы:
1) Установить bash, например, через wsl в win 10. Или установить полноценный набор unix-утилит.
2) Избавить себя от подобного мазахизма и работать под линуксом или маком, т.к. большая часть утилит в первую очередь затачиваются под них.
3) переписать скрипт под виндовый шелл или вызывать эти команды вручную, если вам нужен bitbucket, конечно все эти утилиты должны быть установлены:

# сборка
npm run build

# переход в каталог итоговой сборки
cd dist

git init
git add -A
git commit -m 'deploy'

git push -f git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master

1) размеры задаются в css, тебе нужно копировать селектор из доступных стилей и у себя переопределить.

width: auto !important;
white-space: nowrap;

так будет подстраиваться под размер текста.
2) autoHeight: true добавь в swiperOptions

<a :class="{active: item == currentlyActiveItem}">{{item}}</a>

active - это название класса
item - это то что у тебя уже используется в цикле
currentlyActiveItem - переменная из data, хранящая текущий актив итем

https://ru.vuejs.org/v2/guide/class-and-style.html - вот почитать
https://codepen.io/Bondar/pen/OzWYNd - вот еще примерчиг

Из доки vuex
Функция mapGetters просто проксирует геттеры хранилища в локальные вычисляемые свойства компонента

Тоесть mapGetters(['doneTodosCount']) превращается в

{
  doneTodosCount() {
    return this.$store.getters.doneTodosCount;
  },
}

fixed прибивает блок гвоздями к окну просмотра, выше советовали sticky

Невнимательно читал документацию, проблема описана тут

@click="testClickGo().restart"

То есть, попробовать вызвать метод вы не догадались. Это печально.

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

targets: '.testVal',

Так не надо, используйте ref.

data: () => ({
  anime: null,
}),
mounted() {
  this.anime = this.$anime({
    targets: this.$refs.animeEl,
    translateX: 200,
    delay: 800,
  });
},

<h1 ref="animeEl">hello, world!!</h1>
<button @click="anime.restart()">click me</button>

Вообще да, для нормальной работы с анимациями обычно используют сторонние библиотеки. Но вообще Vue сам считает начало и конец анимации. И из коробки дает инструмент для создания отсроченной анимации и т.д.

anime.js - в этом духе
pixi.js - сложнее но с webGL
gsap - вообще крутяк но есть платные плагины но хялявных с головой хватит