Vue

Как отключить eslint в vue-cli

Судя по активности обсуждения issue на гитхабе, у многих есть проблема с отключением линтера при работе с vue-cli.

У нас это случилось во время работы с github-actions: мы собирали проект, прогоняли тесты. Локально всё собирается, а в github падает build. Начали выяснять — ругается eslint. Можно настроить всё, но это время. Быстрое решение — отключить линтер, чтобы билд заработал, а потом уже разобраться с линтером, как будет время.

Eslint можно отключить несколькими способами: файл .eslintignore, комментирование части кода в файле webpack.base.conf.js.

С помощью файла .eslintignore

Создаём файл. eslintignore в корне. Внутри файла пишем *, либо игнорим отдельные файлы или папки:

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

Закомменировать настройки в webpack.base.conf.js

Находим в файле build/webpack.base.conf.js настройки, относящиеся к линтеру и комментируем их:

{
  test: /.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: "pre",
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter')
  }
},

Как сделать редирект в Vue

Эта публикация является любительским переводом статьи «How to Redirect in Vue» от Майкла Тиссена.

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

<a href="www.google.com">Google</a>

Если вы используете Vue Router, вы будете использовать специальный компонент RouterLink:

<RouterLink :to="www.google.com">Google</RouterLink>

Но что делать, если вы хотите сделать редирект программно, без использования тега для ссылки?

Если вы используете Vue Router, то вы просто подставите ссылку в компонент роутера, в метод push:

this.$router.push('www.yoursite.com/blog')

В этой заметке мы рассмотрим все способы редиректа на внутренние и внешние страницы. Разберём случаи использования Vue с Vue Router и без него.

Читать далее

26 советов для Vue, которые сэкономят ваше время

Эта публикация является любительским переводом статьи «26 Time Saving Tips for Vue» от Майкла Тиссена.

Никто не любит тратить своё время зря. При написании приложений на Vue вы можете потратить лишнее время на неправильные подходы. Новичку, а порой и опытному разработчику, не всегда известно, что станет камнем преткновения. В этой статье вы узнаете 26 полезных советов о разработке Vue-приложений, которые сэкономят ваше время и нервы!

Читать далее

Как в Blade вывести переменную Vue

Иногда возникает необходимость написать что-то вроде {{ $route.name }} внутри blade-шаблона в Laravel-приложении. Laravel тут же поругается, что такой переменной нет. Выход такой:

<div class="custom-block">
    @{{ $route.name }}
    ...
</div>

Используйте синтаксис @{{ }} для такой задачи.

Как скрыть шаблон Vue.js пока он не отрендерится. Директива [v-cloak]

Бывают ситуации, когда вы загружаете страницу с каким-то компонентом Vue, и при этом страница при загрузке «прыгает»: сначала показывает синтаксис шаблона Vue, а потом рендерит сам шаблон. Вот пример:

Страница загрузилась, а компонент Vue ещё не отрендерился
Читать далее

В чём разница между props и data в Vue.js

Во Vue предусмотрено два способа хранения данных в компоненте: props и data.

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

Так в чём же отличие между props и data?

Data — это приватное хранилище любого компонента, в котором вы можете хранить любые данные.

Props — то, как вы передаёте данные из родительского компонента в дочерний.

В этой статье вы узнаете:

  • Чем являются props, и почему они нужны только для передачи данных вниз;
  • Для чего используется data;
  • Что такое реактивность;
  • Как избежать конфликта имён между props и data;
  • Как одновременно использовать props и data вместе, чтобы получить пользу 💰
Читать далее