Nuxt.js - введение

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

Куда податься, какой фреймворк использовать. Может быть Laravel? Или это слишком сложно, стоит попробовать OctoberCMS? На мой взгляд, смотреть на проблему нужно чуть шире.

Всё, что видит посетитель вашего сайта — это HTML + CSS + JS. Он не знает, каким движком вы их сгенерировали, он не знает, как он работает. Он видит только frontend, а как работает backend — ему без разницы.
Поэтому в 2019 году я советую всем сосредоточиться именно на фронтенде. На максимально приятном и плавном общении пользователя с сайтом, который может быть достигнут современным javascript.

А для этого, очевидно, вам нужно учить современный javascript.

Для начала, немного истории из Википедии.
В 1996 году в компании Netscape были попытки создания серверного JavaScript (Server-side JavaScript — SSJS), однако технология не получила распространения.

Node.js разработал Райан Даль (англ. Ryan Dahl) в 2009 году после двух лет экспериментирования над созданием серверных веб-компонентов. В ходе своих исследований он пришёл к выводу, что вместо традиционной модели параллелизма на основе потоков следует обратиться к событийно-ориентированным системам. Эта модель была выбрана из-за простоты, низких накладных расходов (по сравнению с идеологией «один поток на каждое соединение») и быстродействия. Целью Node является предложить «простой способ построения масштабируемых сетевых серверов».
И внезапно, Javascript стал работать на стороне сервера, а не только фронтенде. Что это даёт конкретно нам? А возможность работать с Javascript как с компилируемым языком. То есть, вы что-то пишете на Javascript, используя все новые штуки, которые для него придумали: синтаксис, библиотеки, фреймворки, а потом собираете это всё для работы в браузере. И браузер это понимает.

Соответственно, и подход к созданию фронтенда категорически изменился. Вместо набора из jQuery лапши, которая крутит HTML элементы, сгенерированные PHP, вы сами создаёте эти элементы, куда более эффективным путём — прямо в браузере пользователя. Кто-то сказал ExtJS? Ну да, похоже.

Немного теории


Теперь нам придётся узнать несколько новых терминов, извините.

Node.js ставится в систему как обычное приложение с бинарными исполняемыми файлами. Есть для всех систем, в macOS советую ставить через Brew. На modhost.pro оно уже установлено и регулярно обновляется.

NPM — Node Package Manager, то есть менеджер пакетов Node. Типа Composer, но для Javascript. Ставится в систему вместе с Node и позволяет загрузить что угодно из миллионов пакетов. Следит за зависимостями, обновляет, удаляет и т.д.

Есть и другой менеджер — Yarn, лично мне он нравится больше.

npm install yarn
Да, мы только что установили один менеджер при помощи другого =)

ES6 (ECMAScript версии 6) — это новый синтаксис Javascript, который позволяет писать код гораздо эффективнее. Браузеры его не понимают, поэтому им нужен переводчик.

Babel — это Вавилон, то есть город, в котором люди хотели построить настолько высокую башню, чтобы добраться до самого бога, и что-то там ему доказать. Но он обиделся и отомстил людям очень изощрённым способом — придумал разные языки и заставил людей на них разговаривать, чтобы они перестали друг друга понимать. Так, собственно, строительство башни и остановилось.

Наверное, именно поэтому переводчик ES6 в более старый ES5, который браузеры понимают, называется именно Babel. Если вы хотите использовать модерновый Javascipt в браузере, без Babel вам никуда.

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

Помимо Webpack есть и другие сборщики (Gulp, Grunt и т.д.), но Webpack сейчас самый популярный. Это не про то, что он самый модный, а про то, что большинство инструкций для начала работы с разными библиотеками пишут именно про него.

Теперь мы можем наставить себе кучу пактов через NPM, написать конфиг для Webpack и упаковать это всё в конечный JS через Babel, а его уже подключим в код нашей страницы, и всё будет хорошо. Именно так всё и сделано в моём компоненте для разработки сайтов на MODX — App.

Но можно абстрагироваться от MODX, PHP, и сервера вообще.

Vue.js


Для этого берём какой-нибудь новомодный JS фреймворк. Лично я предпочитаю Vue.js. Дальнейший текст будет именно про него, но пока информация подаётся «в общем», так что она применима и к другим решениям, типа React.js.

Подобные фреймворки вводят понятие SPA, то есть Single Page Application.

Раньше ведь как было? На сайте лежала горстка перелинкованных HTML страниц. Вы кликали туда-сюда и они грузились вам через web-сервер. Потому пришёл PHP и предложил генерировать страницы на сервере динамически. То есть, их нет, но по вашему запросу вам их нарисуют и отдадут, как будто-бы это HTML.

Ну а теперь у нас ровно та же логика, но через Javascript, и не на сервере, а в вашем браузере. У вас есть одна HTML страница, которая грузится в браузер, буквально из 10 строк. Там всякие метатеги, title, и подключение javascript — это самое главное! Как только он подгрузится, вы получаете веб-сайт.

Внутри этого JS есть роутер, который смотрит, по каким ссылкам вы нажимаете, и в зависимости от них, он показывает вам тот или иной контент, записанный в JS. Контент этот генерируется динамически, только для вас, только в этом окошке браузера. По сути, ваш браузер исполняет программу на JS (которую мы для него скомпилировали из ES6 при помощи Babel, помните)?

Код Vue приложения выглядит как набор файлов с расширением .vue, внутри которых может быть 3 раздела:
template — HTML оформление, со спец-тегами Vue, немного похожими на Fenom.
script — Javascript, который работает с template
style — CSS или SCSS, которые оформляет этот компонент

Вот простейший пример — jsfiddle.net/boilerplate/vue и немного пояснений.

Сам список вариантов ToDo находится в JS
data: {
  todos: [
    { text: "Learn JavaScript", done: false },
    { text: "Learn Vue", done: false },
    { text: "Play around in JSFiddle", done: true },
    { text: "Build something awesome", done: true }
  ]
},
Всё, что возвращает data можно использовать в блоке с HTML. В нашем случае это массив todos:
<li v-for="todo in todos">
  <label>
    <input type="checkbox" v-on:change="toggle(todo)" v-bind:checked="todo.done">
    <del v-if="todo.done">
      {{ todo.text }}
    </del>
    <span v-else>
      {{ todo.text }}
    </span>
  </label>
</li>
Конструкция v-for="todo in todos" запускает обработку массива в цикле. Если элемент v-if="todo.done", то рисуем его зачёркнутым, если нет (v-else) — то обычный span. Просто условия, как в PHP.

Ну и немного магии:
— отмеченность input так же зависит от состояния done, то есть :checked="todo.done"
— а при изменении input вызывается метод toggle(todo) из javascript массива methods:
methods: {
  toggle: function(todo){
    todo.done = !todo.done
  }
}
Таким образом чекбоксы меняют свой внешний вид.

Всё это работает на лету, без перезагрузок и лапшекода jQuery. Вы просто рисуете страницу средствами Vue.js, и это работает.

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

Уверен, у вас уже возникла масса вопросов, но давайте для начала разберёмся с однозначными плюсами:
— ваш сервер отдаёт заранее скомпилированный код, это статичный HTML и JS
— это безумно быстро, нет почти никакой нагрузки.
— можно принимать огромное количество посетителей
— это легко отлаживать и тестировать
— практически безграничные возможности программирования пользовательского интерфейса.

А теперь минусы:
— такой сайт очень трудно индексировать, потому что поисковику нужно выполнить много Javascript, чтобы увидеть страницу, как видите её вы. Не факт, что он вообще так сможет.
— пожалуй, всё.

Конечно, моё описание не раскрывает и половины возможностей. За подробностями лучше пройти в официальную документацию, там всё гораздо интереснее. Но вот вам реальный пример Vue.js — modstore.pro/authors. Да-да, таблица с авторами написана именно на нём.

Nuxt.js


Ну и, наконец, то, ради чего всё это писалось. Микрофреймворк Nuxt.js, который объединяет в себе:
— Vue.js
— Babel
— Webpack
— Bootstrap 4

Моё личное комбо! Внимание, фреймворк настолько крутой, что для просмотра его документации вам может понадобиться VPN — кто-то переодически блочит адреса Digital Ocean, который он использует.

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

Когда я начинал работать на Vue я наизобретал много всякого, чтобы облегчить себе жизнь. А потом увидел это всё (и даже больше) в Nuxt, на более высоком и продуманном уровне. Поэтому с чистой совестью рекомендую его вам.

Вторая главная фишка — возможность серверного рендеринга, как у PHP. То есть, на сервере крутится демон, который принимает запросы и генерирует HTML страницу. Зачем? Ну для этого самого SEO, чтобы краулеры могли проиндексировать ваш сайт.
Именно конкретная структура проекта даёт возможность Nuxt понять, как и что нужно рендерить. Например, список ссылок роутера он строит исходя из .vue файлов в директории pages.

Продолжением этой фичи является и возможность пререндера страниц на сервере в HTML. То есть, и на сервере ничего не крутится, и набор основных HTML страниц для индексации доступен. Не одна страница с Javascript, а и «Главная», и «О нас», и «Контакты» — полностью отрендеренные и работающие без JS.

Но если вы откроете их в браузере, JS подгрузится и заработает авторизация, личный кабинет и т.д. То есть, те части сайта, которые просто нельзя индексировать.

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

Заключение


Вот такая первая вводная заметка о разработке фронтенда в 2019. Я не претендую на абсолютную точность, потому что сам начал всё это учить менее года назад — так что ошибки могут быть.

На данный момент у меня в разработке 2 больших проекта на Nuxt.js, один из которых я смогу показать примерно через месяц. Второй показать не смогу совсем — он для внутренних нужд организации. Впечатления от работы исключительно позитивные.

GIFка с примером работы (3.3Mb)


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

Текущий счёт: 3450руб.
Василий Наумкин
06 августа 2019, 20:21
modx.pro
15
702
+38
Поблагодарить автора Отправить деньги

Комментарии: 33

Николай Савин
06 августа 2019, 21:11
4
+5
От себя добавлю рекомендации по материалам для изучения.
Неплохие курсы вроде как.
Курс node.js
Курс по Vue
Реакт
И барабанная дробь… Курс по Nuxt совсем свежий
    Павел Бигель
    06 августа 2019, 21:21
    0
    Если сервис ваш, то тут чета сломалось
    Андрей
    07 августа 2019, 07:20
    1
    0
    У автора курсов есть так же канал на YouTube.
    srs
    srs
    07 августа 2019, 10:03
    0
    Возможно эти курсы очень хорошие, но меня обычно отпугивает, когда обложка курсов преподносится в виде диска =) ну такое… Хотя былоб очень интересно посмотреть как он реализовывает бэк. Я в качестве бека использую express + MVC, насколько я понимаю в этих курсах та же схема. Вы знакомы с этим курсом? Если да, то как вам?
      Николай Савин
      07 августа 2019, 10:09
      +2
      Вы хороший программист? Да неплохой. А покажите какие вы сайты делали? Вот этот и вон тот. Ой ну не знаю, мне не нравится дизайн. Так при чем тут дизайн то? Я ж программист. я запустил, то что дизайнер нарисовал, а заказчику понравилось.

      Знакомо? Думаю да. Оформление страницы курса мало привязано к содержимому.
      Начнем с того, что альтернативы этим курсам все равно нет. Это очень свежие, актуальные и довольно полноценные учебники с наглядной практикой. Автор ведет свой канал, выпускает бесплатный контент и качество материала, качество того, как материал преподносится можно быстро оценить. Вон чуть выше ссылка есть.
        Fi1osof
        07 августа 2019, 10:22
        +1
        Начнем с того, что альтернативы этим курсам все равно нет.
        Ну не знаю. Довольно популярный вот этот ресурс: learn.freecodecamp.org/ (правда на буржуйском и может потребоваться VPN).
        srs
        srs
        07 августа 2019, 11:20
        +1
        Знакомо? Думаю да. Оформление страницы курса мало привязано к содержимому
        Знакомо, но минимальное понимаю того, что это не актуально уже многие годы, былоб скорее плюсом. Ну ок, предположим ему это нарисовал дизайнер, но неужели он посмотрел на это и такой «да, диск с упаковкой самое то!»
        Начнем с того, что альтернативы этим курсам все равно нет.
        неужели, а это что такое? И даже без изображений cd/dvd дисков. Хотя я сейчас подумал и еслиб я был дизайнером, то сделал бы обложку с vhs, это былоб офигенно =)! Ну и как минимум есть хорошая документация, причем и у vue и у nuxt.
        p.s. Перешел, оценил, хороший голос, короткие уроки. Но я больше люблю текстовые источники.
          Николай Савин
          07 августа 2019, 11:23
          +1
          Я не знал про эти курсы. Но и имел ввиду скорее русскоязычный голосовой контент, так как искренне считаю что на родном языке технологии изучать проще. Можно сосредоточиться именно на технологиях и коде, не напрягаясь на перевод.
            srs
            srs
            07 августа 2019, 11:25
            0
            это да, тут сложно не согласиться. В любом случае, уверено что эти ссылки будут полезны)
Николай
07 августа 2019, 00:23
0
Когда говорят про JS, я одно не понимаю, ведь есть серверная логика, есть БД, необходимость заносить данные в БД, а значит нужна админка, что-то типа аналога дерева ресурсов MODX, куча полей для каких-то сущностей наподобие ресурсов, редакторы кода, права доступа и т.д. И всё это между собой должно быть связано, должно работать по определённому алгоритму. Как это всё на JS делается..?
    Aborrol
    07 августа 2019, 02:27
    0
    С помощью node.js, это всё становится возможно делать на js
    Василий Наумкин
    07 августа 2019, 02:51
    +3
    Админка того же MODX написана на ExtJS.

    А так — да, вопрос логичный, и отвечает на него REST API, про который мы поговорим чуть позже.
      Андрей Степаненко
      07 августа 2019, 07:31
      +8
      RESTful заготовка для modx и интернет магазина minishop2:
      https://github.com/webnitros/RESTfulAPIs

      На счет nuxt.js и индексации, сайт полноценно индексируется, проблем с индексацией вообще нету.

      На счет запуска: так как nuxt можно вешать на порт с тем же доменом сайта, и чтобы фронт у нас отдавал не наш сайт а именно запущенный сайт на nuxt то в nginx можно прописать

      # nginx
      location / {
              proxy_pass http://site.ru:24200;
              proxy_set_header Host $host;
              proxy_set_header X-Real-IP $remote_addr;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header X-Forwarded-Proto https;
              proxy_read_timeout 5m;
              proxy_connect_timeout 10400s;
      
              proxy_buffers 8 32k;
              proxy_buffer_size 64k;
          }
      Порт 24200 запущен nuxt.js

      На счет статики можно делать вот так
      location = /sitemap.xml {
                  proxy_pass http://rest.site.ru/sitemap.xml;
                  proxy_read_timeout 10400s;
                  proxy_connect_timeout 10400s;
          }
          location = /robots.txt {
                  proxy_pass http://rest.site.ru/robots.txt;
                  proxy_read_timeout 10400s;
                  proxy_connect_timeout 10400s;
          }
        Андрей Степаненко
        07 августа 2019, 07:47
        +1
        А еще момент чтобы весь контент генерировался на бекенде, и чтобы поисковик видел уже сгенерированный контент нужно во vue.js получать контент вот так:
        export default {
            .....
            async asyncData ({app, req, params, error}) {
              return app.$axios.get(`/products/1`)
                .then((res) => {
                  return {
                    object: res.data.object
                  }
                }).catch((e) => {
                  error({ statusCode: 404, message: 'Страница не найдена' })
                })
            },
            ....
        }
          srs
          srs
          07 августа 2019, 12:54
          0
          Есть еще метод fetch (не тот который работает http).В отличии от asyncData с помощью него нужно наполнять стор, затем брать данные (например) через computed, который в свою очередь достает их из стора. Кстати сегодня в чатике nuxt был срач (по моему он и сейчас продолжается) на тему того как лучше использовать геттеры.
        Василий Наумкин
        07 августа 2019, 11:39
        0
        На счет nuxt.js и индексации, сайт полноценно индексируется, проблем с индексацией вообще нету.
        Авторы modstore индексируются вот так:


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

        Есть пример такого сайта, проиндексированного кем-нибудь без проблем и специальных ухищрений?
          Андрей Степаненко
          07 августа 2019, 11:41
          0
          В личку кинул
          Fi1osof
          07 августа 2019, 11:59
          0
          Вот глянь, интересно получается: webcache.googleusercontent.com/search?q=cache:docuz9AiJG4J:https://prisma-cms.com/comments+&cd=2&hl=ru&ct=clnk&gl=ru
          гугл из кеша выдается страницу с контентом, а потом ререндеринг выполняется и контент слетает (потому что данных нет, я тебе про кеширование данных писал.).
          То есть все-таки гугл индексирует нормально с динамическими данными.
          Андрей Степаненко
          07 августа 2019, 12:16
          0
          Авторы на modstore конечно не будут индексироваться.
          Речь о том что происходить пререндинг на стороне сервера, и уже отдается готовая страничка браузеру. Этим и занимается ru.nuxtjs.org
            Василий Наумкин
            07 августа 2019, 12:25
            +1
            Ну а я о чём в заметке пишу?

            Вторая главная фишка — возможность серверного рендеринга, как у PHP. То есть, на сервере крутится демон, который принимает запросы и генерирует HTML страницу. Зачем? Ну для этого самого SEO, чтобы краулеры могли проиндексировать ваш сайт.
            В режиме SPA ничего индексироваться не будет, так же как и на чистом Vue.js
    Fi1osof
    07 августа 2019, 03:03
    +1
    Уже давным давно есть много всяких интересных решений. Погугли api-first cms, headless cms, schema-first cms.
    Вот можно посмотреть рейтинг подобных cms: headlesscms.org/ (вероятно через VPN смотреть).
    Одна из наиболее взрослых и живых систем: strapi.io/ (смотрите видео на главной).

    Ну а та же призма теперь из коробки генерирует админку для управления информацией.
    Заметка: www.prisma.io/blog/prisma-admin-beta-pai5lah43soe/
    Поиграть в демке: www.prisma.io/generate-demo-project
    Уточню, что это не полноценая CMS, это просто работа с информацией в БД через API/UI. Но зато она генерируемая (подправил схему, задеплоил (получил изменения в структуре базы данных) и тут же получил все необходимые поля для редактирования информацией).
Fi1osof
07 августа 2019, 03:13
+1
npm install yarn
Да, мы только что установили один менеджер при помощи другого =)
А вот там можно обновлять сам npm:)
[sudo] npm install -g npm
Babel, webpack — это необходимо для браузерной версии. Но если вы пишете просто серверную часть, там можно обойтись без них. Комментарий про это: modx.pro/news/18656#comment-112600

А теперь минусы:
— такой сайт очень трудно индексировать, потому что поисковику нужно выполнить много Javascript, чтобы увидеть страницу, как видите её вы. Не факт, что он вообще так сможет.
Если использовать и нормально настроить SSR, то будет все работать как обычный сайт и нормально индексироваться. Но желательно делать так, чтобы после загрузки страницы во фронт не происходил повторный ререндеринг ее. Обычно это достигается путем использования кеширования для API-провайдера (кстати, в аксиосе тоже кеширование вроде предусмотрено). Суть сводится к тому, чтобы при генерации страницы на стороне сервера, полученные в процессе этого результаты API-запросов кешируются и отдаются на сторону браузера вместе со страницей. Там API-провайдер инициализируется с передачей этого кеш-объекта и при правильном подходе никаких повторных запросов на сервер при загрузке не должно возникнуть (данные просто из кеша берутся). А так как на компонентах никакие входящие параметры и стейты не изменились, то страница и не перерендеривается. К этому еще желательно добавить отложенную загрузку JS-а, чтобы он не блокировал загрузку страницы. И тогда будет боле менее ОК с SEO.
У меня prisma-cms.com худо-бедно индексируется, хотя там не по максимуму сделано.
Fi1osof
07 августа 2019, 05:04
1
+6
Fi1osof
07 августа 2019, 09:14
0
Всё, что видит посетитель вашего сайта — это HTML + CSS + JS. Он не знает, каким движком вы их сгенерировали, он не знает, как он работает. Он видит только frontend, а как работает backend — ему без разницы.
Поэтому в 2019 году я советую всем сосредоточиться именно на фронтенде. На максимально приятном и плавном общении пользователя с сайтом, который может быть достигнут современным javascript.
Вообще, лично у меня в последнее время больше всего нагрузка именно по фронту. На сервере все просто: создал схему, обновил в БД и все. На чтение/запись данных готовое API, там мало каких-то заморочек. А вот на фронте, тем более если говорить не про простых пользователей, а про контент-менеджеров, могут потребоваться нестандартные средства управления информацией. Вот, к примеру, понадобился вывод диаграмм на странице.

www.youtube.com/watch?v=ud5Q2QoRZqU&feature=youtu.be
gruzoveek
07 августа 2019, 09:19
0
Тема интересна, сам я тоже в последнее время юзаю vue.js и вот это вот все. Спасибо за инфу по nuxt, буду изучать!
Сергей
07 августа 2019, 11:58
0
Василий, спасибо большое за заметку. Уже начал как раз изучать связку Modx+ Nuxt по твоим недавним рекомендациям. Буду благодарен, если получится в дальнейших заметках раскрыть в деталях эти моменты:
1. «Вторая главная фишка — возможность серверного рендеринга, как у PHP. То есть, на сервере крутится демон, который принимает запросы и генерирует HTML страницу.» Если действительно можно сервером генерироваться Html страницы, то я такую информацию не накопал. Пока остановился на создании динамических url и подгрузкой контента через axios.
2. Как синхронизировать сессию Modx с Vue, понадобиться для minishop, авторизации и прочее.
Закинул спасибо.
    Василий Наумкин
    07 августа 2019, 12:26
    +1
    Буду благодарен, если получится в дальнейших заметках раскрыть в деталях эти моменты
    Да, конечно, это просто вводная заметка, чтобы начать какое-то движение.

    Закинул спасибо.
    На здоровье!
Руслан Сафин
07 августа 2019, 17:48
0
Хотелось бы заметку про деплой. Как собрать докер контейнер и как его потом развернуть на сервере.
Алексей Карташов
20 августа 2019, 00:26
+5
Воу-воу! Во дела!
Давно не заходил на modx.pro, а тут занесло меня уведомлением на мыло о комменте к старому топику, а на главной в лучшем такие новости)

Я уже 3,5 года пишу только на вью, из них последние полтора — на нюксте. Что могу сказать? Прекрасный выбор!)
Честно говоря, подобного поворота от тебя совсем не ожидал, но это и круто! В полку адептов прибыло)

Могу даже пару непрошенных советов нараздавать))
Короче, роутинг на папках/файлах — зло.
Если есть возможность/желание — лучше сразу его выкинуть и прописывать роуты руками, мапить можно на файлы в ту же папку
pages
.
Пока проект маленький, а роуты на пальцах можно пересчитать, вот эти все
pages/users/_id.vue
— это каеф. Но как только их переваливает за несколько десятков (и даже сотен), а тебе прилетает необходимость что-то в урлах переименовать — это сразу боль.

Более того, имена роутов вообще лучше держать в константах. Выглядит это как-то так:






Да, писать больше. Да не хочется разносить всё это по нескольким файлам и постоянно что-то импортить. Но когда проект начинает расти — это просто незаменимый подход. Начиная с рефакторинга и переименования, заканчивая тем, что `Alt+F7` — и ты сразу видишь где на какие страницы стоят ссылки.

Плюс роутинг в конфиге позволит тебе избежать нюансов, когда есть какая-то страница со списком, тебе в ней надо что-то фильтрануть по айдишнику (а то и сразу по двум-трём параметрам) — то тут красиво не получится, придётся создавать бесмысленные `_id/index.vue`, `_id/_date.vue` (и т.п.), а код в них дублировать либо выносить в какой-то отдельный общий файл… Короче, на словах херня какая-то, а на деле когда с таким столкнёшься (если ещё не) — поймёшь о чём я)

В общем, новость неожиданная, но приятная)
Если будут возникать какие-нибудь вопросы, то спрашивай — что знаю, подскажу.
Вряд ли, конечно, у тебя будут вопросы — ты ведь сам всегда в предметной области досконально пытаешься разобраться, без посторонней помощи, но всё же)
    Василий Наумкин
    20 августа 2019, 05:48
    0
    Привет, Алексей, спасибо за комментарий. А то я всё думал — куда ты пропал? Теперь понятно.

    Насчёт роутинга — мне пока наоборот система с директориями нравится. Потому что я уже работал на чистом Vue.js и немного утомился там прописывать все маршруты вручную.

    В url я ничего не переименовываю, а использую имена примерно так:
    <nuxt-link :to="{name: 'courses-cid-index-lesson-lid', params: {cid: record.id, lid: item.id}}">
        Ссылка
    </nuxt-link>
    Соответственно, все маршруты сразу видно и в коде, и в инструментах разработчика

    Но, будущее покажет, спасибо за совет.
      Алексей Карташов
      20 августа 2019, 11:05
      +1
      Да это-то всё понятно — совершенно стандартное и правильное использование. Если с трудностями не сталкиваешься, то прекрасно — не навязываю) Но на будущее имей в виду и про такой подход)

      В тройке они, кстати, ещё завезут `pages/product-[sku]-[variant].vue`, чтобы несколько параметров на один файл мапить. Это как раз решит проблему, о которой я говорил. Станет ещё удобней)
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
33