Как написать одностраничное приложение (SPA) с использованием Vue.js

[Bruttal_Assassin]

Cool!

[ldar]

Вашу статью бы на пару месяцев раньше. Именно тогда начал изучать Vue, параллельно пишу SPA, стараюсь по максимум все усложнить, чтоб пройтись по подводным камням, использую, vuex, vue-route, vuetify бэкенд на php yii2. Потом планирую сбилдить в мобильное приложение. И Vue мне очень нравится, приложение строятся очень быстро, просто тащусь от реактивности, компонентов которые получаются изолированными и самостоятельными кусочками кода, собираешь все как в конструкторе.

[progress_man]

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

[Apx]

Apache cordova в помощь. Либо возьмите quasar framework который уже годный сам по себе и поддерживает это всё из коробки.

[progress_man]

Спасибо, почитаю доки!

[mmman]

Посмотрите NativeScript под Vue, обещают без WebViews.

[bitver]

.catch(error => {
      console.log('-----error-------');
      console.log(error);
})

По-моему не надо так ошибки обрабатывать, почему в «примерах» не пишут хорошие примеры?

[flancer]

Напишите в комментах, как надо.

[Rad1calDreamer]

ну как минимум

console.log('-----error-------', error);

[jesprider]

Во-первых стоит наверное что-то показать пользователю, мол сорян, ошибка на сервере, попробуй позже.
А во-вторых стоит консоль лог спрятать под условие `if (isDevelopment) {}`. Хотя вебпак всё-равно удалит их для прода при правильной настройке.

[yarkov]

axios и vue-router в дев зависимости? Зачем?
И итерацию v-for надо с атрибутом :key писать, так правильно. Ну и линтер по шее даст.

[OKyJIucT]

Объясните, пожалуйста, как правильно и почему?

[Spunreal]

axios и vue-router используются в самом приложении, а не при его разработке. Поэтому эти пакеты надо подключать как обычные зависимости, а не dev. В dev зависимости отправляют всякие бабели, лоадеры и другие пакеты, которые нужны непосредственно только для разработки и сборки итоговых файлов. Сами пакеты в итоговые файлы не попадают

[jesprider]

Я вообще не понимаю, почему не использовать нативный `fetch` и не тянуть тонны зависимостей. Или я упускаю какую-то супер интеграцию axios со vue?

[Suliman]

Почему во всех статьях про Vue используется Axios для запросов, а не тот же vue-resource?

[Pongo]

Это официальная рекомендация.

[Serega_SRG]

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

[chuck]

Подскажите, а кто как решает вопрос локализации приложений на vue?

[youngpirate32]

https://github.com/kazupon/vue-i18n

[tsapkin]

Мне кажется, содержание этой статьи во многом повторяет кое-то из лекций www.youtube.com/channel/UCzgtMBarT8AvsGc-Y_8Qexw/videos чуть ли не дословно. Например, часть 14 про vue-router.

[pewpew]

Внизу статьи есть ссылка на оригинал. Статья — мой вольный перевод.

[Xtray]

Для примера будет использоваться сервис jsonplaceholder.typicode.com предостовляющий заглушку в виде REST API.

Что-то все норовят в подобных мануалах для вью заглушки юзать. Кто бы с реальной бд такой пример показал...

[pewpew]

А в чём сложность? В примере упор на фронт.
REST API по сути не привязан к Vue никак. Бэк можно делать хоть на голых файлах, хоть на Apache+PHP, да хоть на nginx+LUA.
Статья совершенно не поменяется.

[Xtray]

Согласен :) Просто много мануалов про вью, много про бэкенд, а чтоб и то и другое — маловато… А хочется :)

[Akdmeh]

Мне кажется потому, что специфика разная.
Бэкенд — это ведь еще нередко запросы к базе данных либо вообще другой язык программирования.

[eshimischi]

В просторах Github можно найти достаточно классных примеров как сделать SPA с применением как Vue в отдельности, так и в содружестве с Laravel, к примеру.
Laravel Vue SPA, Bulma themed
Vue SPA projects using Vue CLI 3
Laravel 5.6 + Vue.js
dashboard.spatie.be
и Boilerplate for [mobile] SPAs

[steff]

А без Vue-cli при создании приложения можно обойтись? Например, вручную создав все необходимые файлы (какие?) и подключив компоненты.

[Groonya]

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

А когда мы в компонент добавляет вот это:

watch: {
  '$route'() {
    this.getPost(this.id);
  }
}

то разве мы не связываем жестко комонент с роутом?