{"id":333856,"date":"2022-05-31T15:00:27","date_gmt":"2022-05-31T15:00:27","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=333856"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=333856","title":{"rendered":"<span>\u0410\u0437\u0431\u0443\u043a\u0430 \u0432\u043a\u0443\u0441\u0430, Nuxt \u0438 \u043d\u0430\u0448 \u0442\u0435\u0440\u043d\u0438\u0441\u0442\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0430\u043c<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u042f &#8212; Senior Frontend Developer \u0432 \u0410\u0437\u0431\u0443\u043a\u0435 \u0432\u043a\u0443\u0441\u0430. \u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u043d\u0430\u0448 \u0441\u0430\u0439\u0442 \u0441 \u043b\u0435\u0433\u0430\u0441\u0438 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a, \u0438 \u043c\u043d\u0435 \u0434\u043e\u0432\u0435\u043b\u043e\u0441\u044c \u0441\u0442\u0430\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430. <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u0441 \u043b\u0435\u0433\u0430\u0441\u0438 (jQuery + Java \u0438\u043b\u0438 PHP) \u0431\u044b\u043b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c. \u0421\u0430\u043c\u043e\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0435 &#8212; \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0441\u0442\u044d\u043a\u0430 (\u0433\u0434\u0435-\u0442\u043e Bitrix, \u0433\u0434\u0435-\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u0435\u0449\u0435), \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442 \u0447\u0451\u0442\u043a\u0438\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439, \u043d\u0430 \u0447\u0435\u043c \u0438 \u043a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c. <\/p>\n<p>\u0410 \u0435\u0449\u0451 &#8212; \u0432\u0435\u0441\u044c HTML \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u0443 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0431\u044d\u043a\u0435\u043d\u0434 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432 \u0435\u0433\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435. \u042d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u043b\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443. <\/p>\n<p>\u041d\u0443 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430 jQuery \u0432 2021 \u0433\u043e\u0434\u0443 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u043e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0441 \u0432\u0438\u0434\u043d\u0435\u0432\u0448\u0438\u043c\u0438\u0441\u044f \u043d\u0430 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0435 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u0430\u043c\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f UI Kit.<\/p>\n<p>\u041d\u043e\u0432\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f Vue 2 + Nuxt 2 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 Typescript.<\/p>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0442\u0438\u043a\u0430<\/h2>\n<p>\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0432\u0441\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043b\u0438, \u0447\u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u0442\u044c\u0441\u044f. \u0415\u0449\u0451 \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u044f \u043d\u0430\u0447\u0430\u043b \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u044b, \u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0432 \u00ab\u043c\u043e\u043d\u043e\u0440\u0435\u043f\u0435\u00bb \u0431\u0435\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u043b\u0438\u0441\u044c \u0432:<\/p>\n<ol>\n<li>\n<p>Vuex. \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0441 SSR \u043d\u0430 CSR, Nuxt \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 Vuex, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c. <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0438\u0434\u0442\u0438 \u043e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438, \u0447\u0442\u043e \u043e\u0434\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 -> \u043e\u0434\u0438\u043d, \u0430 \u0442\u043e \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0434\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0431\u043e\u0440 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438), \u044d\u0442\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0435\u0441\u0442\u044c \u0432\u0441\u0451 \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0435\u0441\u0442\u0430 \u0432 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043a\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0430\u0446\u0438\u044f. \u0425\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0447\u0451\u0442\u043a\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043f\u043e\u0434\u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435: \u044d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0431\u043e\u0442\u044b, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0441\u043a\u043e\u0443\u043f \u0437\u0430\u0434\u0430\u0447 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443. \u041c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u044b \u044d\u0442\u043e \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u044b\u0442\u0435\u043a\u0430\u044e\u0449\u0435\u0435 &#8212; \u0434\u043b\u044f \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u044d\u0442\u043e \u043d\u0435 \u0441\u0442\u043e\u043b\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e;<\/p>\n<\/li>\n<li>\n<p>\u0412\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u043d\u0430\u0434 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435 \u0432 \u043e\u0434\u043d\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0442\u043a\u0430\u0442\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0451, \u0430 \u043d\u0435 \u0432\u0435\u0441\u044c \u0440\u0435\u043b\u0438\u0437. \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441 API \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0440\u0435\u043b\u0438\u0437\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u0431\u043e\u0440\u043a\u0438:<\/p>\n<ol>\n<li>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0451, \u0434\u0430\u0436\u0435 \u0442\u043e, \u0447\u0435\u043c \u043e\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0435\u043c\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u0432\u044b\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d (\u043e\u043d\u0430 \u043d\u0435 \u0433\u043e\u0442\u043e\u0432\u0430 \u0438\u043b\u0438 \u044d\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430), \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0435\u0451 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043e\u043a. \u041c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u044f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432 \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0435 (\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044f \u043f\u043b\u043e\u0445\u043e \u0438\u0441\u043a\u0430\u043b). \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u043b\u0438\u0448\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u043e\u043f\u0430\u0434\u0430\u043b\u0438 \u0432\u0441\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0441\u0440\u0430\u0437\u0443 (require(`.\/icons\/${name}.svg`) \u0438 \u0432\u0443\u0430\u043b\u044f, Webpack \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0441\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0432 \u043e\u0434\u0438\u043d \u0431\u0430\u043d\u0434\u043b)<\/p>\n<\/li>\n<\/ol>\n<h2>\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u043d\u043e\u043c\u0435\u0440 \u0440\u0430\u0437. \u0414\u0440\u043e\u0431\u0438\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/h2>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044f \u0432\u0438\u0434\u0435\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b 2, 3 \u0438 4. \u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u043d\u0435 \u0431\u044b\u043b\u0430, Vuex \u0431\u044b\u043b \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c.<\/p>\n<p>\u0420\u0435\u0448\u0438\u043b\u0438 \u0438\u0434\u0442\u0438 \u043e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438. \u041e\u0434\u0438\u043d \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 &#8212; \u043e\u0434\u0438\u043d \u043f\u0440\u043e\u0435\u043a\u0442. <\/p>\n<p>\u041c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439: \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 Nuxt. \u0422\u0430\u043a\u043e\u0439 \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0441\u0442\u0440\u0430\u0434\u0430\u0435\u0442 \u0438 \u0441\u0430\u043c Vue. \u0412\u044b \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u0440\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0447\u0435\u0440\u0435\u0437 \u043c\u043e\u0434\u0443\u043b\u044c? \u0410 \u0435\u0441\u043b\u0438 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445 \u0435\u0441\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442? \u0418\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f\u043c \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 Nuxt.<\/p>\n<p>\u0411\u043b\u0430\u0433\u043e, \u0432 Nuxt 3 \u0431\u0443\u0434\u0435\u0442 Nuxt Kit \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u0442\u0430\u043d\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435. <\/p>\n<p><strong>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f<\/strong><\/p>\n<ol>\n<li>\n<p>\u041d\u0430\u0431\u043e\u0440 routes \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 extend \u0434\u043b\u044f Vue Router.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0431\u043e\u0440 SCSS \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0431\u043e\u0440 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0431\u043e\u0440 Vuex Store.<\/p>\n<\/li>\n<\/ol>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e \u043f\u0440\u043e\u0439\u0434\u0435\u043c\u0441\u044f \u043f\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<ol>\n<li>\n<p>\u0414\u0435\u043b\u0430\u0435\u043c <code>this.nuxt.extendRoutes<\/code> \u0438 \u0437\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u043f\u0443\u0442\u0438 \u0432 <code>routes<\/code>, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432 \u0432\u044b\u0437\u0432\u0430\u0442\u044c <code>resolve<\/code>   \u0441 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u043c \u043f\u0443\u0442\u0451\u043c \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0443\u0442\u0438 \u0441 <code>lang: 'scss'<\/code> \u0432 <code>this.nuxt.options.styleResources.scss<\/code> \u0438 <code>this.nuxt.options.css<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0412\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0451 \u043b\u0435\u0433\u043a\u043e:<\/p>\n<pre><code class=\"javascript\">this.nuxt.addPlugin({     src: plugin.path,     ssr: plugin.ssr, });<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>\u041d\u0430 Vuex \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u043f\u043e\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u043d\u0435 \u0441\u0442\u0430\u043b\u043e \u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u044f \u0438\u0434\u0443 \u043a\u0443\u0434\u0430-\u0442\u043e \u043d\u0435 \u0442\u0443\u0434\u0430. <\/p>\n<pre><code class=\"javascript\">this.nuxt.addPlugin({    src: join(__dirname, 'nuxt-vuex.js'),    options: {       keys: Object.keys(this.config.vuexStore).join(','),       values: this.config.vuexStore,    }, });<\/code><\/pre>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u0430\u043c nuxt-vuex.js<\/p>\n<pre><code class=\"javascript\">const vuexPlugin = async (context) => { &lt;% options.keys.split(',').forEach((key) => { %>     context.store.registerModule('&lt;%= key %>', {     ...require('&lt;%= serializeFunction(options.values[key]).replace('\"', '').replace('\"', '') %>'),     namespaced: true,     }, { preserveState: context.isClient }); &lt;% }); %> };  export default vuexPlugin; <\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c, \u0447\u0442\u043e \u0442\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442:<\/p>\n<ol>\n<li>\n<p>&lt;% \u0438 %> \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0431\u0440\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u041f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p>Object.entries, for in \u0438 \u0442.\u0434. \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u044f \u043d\u0435 \u0441\u043c\u043e\u0433. \u041d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043b\u0438 \u043a\u043b\u044e\u0447\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u043f\u043e \u043d\u0438\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u043e\u043a\u0430 4. \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e serializeFunction, \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0434\u0432\u0435 \u043a\u0430\u0432\u044b\u0447\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f, \u0430 \u0437\u0430\u0442\u0435\u043c \u0434\u0435\u043b\u0430\u0435\u043c require \u043d\u0430\u0448\u0435\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 (\u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442).<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u043e\u043a\u0430 7. \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0446\u0438\u043a\u043b, \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0432 template tags, \u043d\u0430\u0434\u043e \u0432 \u043d\u0438\u0445 \u0436\u0435.<\/p>\n<\/li>\n<\/ol>\n<p>\u041e\u043f\u0443\u0441\u0442\u0438\u043c \u0432\u0440\u0435\u043c\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u043d\u0430 \u044d\u0442\u043e, \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u043e Vuex. \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code>new AVPlatformConfig({ nuxt: this, config: { routes: [{path: '\/', component: join(__dirname, 'src\/pages\/index.vue')}], scss: [ { \/\/\u0410 \u0442\u0443\u0442 join \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 src: `${ __dirname }\/..\/scss\/variables.scss`, \/\/\u0427\u0442\u043e\u0431\u044b \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c CSS \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0438 \u043a\u043e\u043d\u0435\u0446 strategy: 'unshift', },     ], plugins: [ { path: join(__dirname, 'nuxt-plugin.js'), ssr: true, },     ], vuexStore: { myModule: { state,  actions, namespaced: true, modules: { myNestedModule: {...}, } }  }, }, }).init();<\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0435 \u0441\u0442\u043e\u043b\u044c \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e. \u041d\u0430\u0434\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c nuxt: this, \u043f\u043e\u0434\u043c\u043e\u0434\u0443\u043b\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 myModule, \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c Vuex \u0441 \u043b\u044e\u0431\u044b\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c. \u041d\u043e \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e. <\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/strong><\/p>\n<ol>\n<li>\n<p>\u041a\u0430\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 Hot Reload? \u041f\u0440\u043e\u043a\u0438\u043d\u0443\u043b\u0438 Volume \u0432 Docker Compose \u043d\u0430 \u0440\u0435\u043b\u044f\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043a \u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0443. \u0410 \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432? <\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0430\u0441\u0441\u0435\u0442\u0430\u043c\u0438? \u041f\u043e \u043a\u0430\u043a\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u0438\u0445 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c? \u0422\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u043b\u044f\u0442\u0438\u0432\u043d\u043e, \u0432\u044b\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f, \u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0435\u0441\u0442\u044c (\u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b Code Splitting).<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438? \u042d\u0442\u043e \u0432\u0435\u0434\u044c \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438 yarn install. \u041a\u0430\u043a \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0441 \u043c\u043e\u0434\u0443\u043b\u0435\u043c, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e?<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u0443\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e tsconfig?<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b? \u0418\u043b\u0438 \u043d\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435, \u0430 \u0441\u043c\u0435\u0436\u043d\u044b\u0435? \u0414\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 UI Kit?<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c layout \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430?<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b? \u041e\u0442\u043a\u0443\u0434\u0430 \u0431\u0440\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u043a \u043d\u0438\u043c?<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0435\u0441\u0442\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u043a\u0430\u043a \u0438\u0445 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c? \u041e\u0442\u043a\u0443\u0434\u0430 \u0431\u0440\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e Nuxt Config? \u041a\u043e\u0441\u0442\u044b\u043b\u044f\u043c\u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e?<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c autocomplete \u0434\u043b\u044f SCSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445? \u0412\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0445 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443?<\/p>\n<\/li>\n<\/ol>\n<p>\u042d\u0442\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u044f\u043b\u043e \u0440\u0435\u0448\u0438\u0442\u044c. \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d\u0438 \u0432\u0441\u043f\u043b\u044b\u043b\u0438, \u0441\u0442\u0430\u043b\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0447\u0435\u043c \u0445\u043e\u0440\u043e\u0448\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u0441\u0442\u044b\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u0432\u044b\u0448\u0430\u043b\u0441\u044f \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u043f\u0443\u043d\u043a\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0441\u044f &#8212; \u0438 \u044d\u0442\u043e \u044f \u0435\u0449\u0435 \u043d\u0435 \u0432\u0441\u0451 \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043b.<\/p>\n<p>\u0421\u0442\u043e\u0438\u0442 \u0442\u0430\u043a\u0436\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, SCSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438 \u0442.\u0434. \u041d\u0435 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0440\u0435\u0448\u0438\u043b\u043e \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0438 \u044d\u0442\u043e \u0432\u0441\u0451 \u0435\u0449\u0435 \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0431\u044b\u043b\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n<h2>\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u043d\u043e\u043c\u0435\u0440 \u0434\u0432\u0430<\/h2>\n<p>\u0420\u0430\u0437 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f\u043c\u0438 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u043f\u043e\u0439\u0442\u0438 \u043e\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e. \u041c\u043d\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u044b: \u0443 \u043d\u0438\u0445 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043c\u0438\u043d\u0443\u0441\u043e\u0432 \u043b\u0438\u0447\u043d\u043e \u0434\u043b\u044f \u043c\u0435\u043d\u044f. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432 \u0441\u043b\u043e\u0436\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043e\u0449\u0443\u0449\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u043b\u044e\u0441\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435. <\/p>\n<p>\u041a \u043c\u043e\u043c\u0435\u043d\u0442\u0443, \u043a\u043e\u0433\u0434\u0430 \u044f \u0441\u043d\u043e\u0432\u0430 \u0432\u0435\u0440\u043d\u0443\u043b\u0441\u044f \u043a \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435, \u043c\u044b \u0443\u0436\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e Vuex \u043f\u043e-\u0445\u043e\u0440\u043e\u0448\u0435\u043c\u0443 \u0442\u043e\u0436\u0435 \u0431\u044b \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u0438 \u043d\u0435 \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043b\u0438\u0448\u043d\u0435\u0433\u043e, \u0438 \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438. \u0417\u0430\u0434\u0430\u0447\u0438 \u0442\u0435 \u0436\u0435, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0434\u0440\u0443\u0433\u0430\u044f.<\/p>\n<h4>\u0428\u0430\u0433 1. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/h4>\n<p>\u0420\u0430\u0437 \u0443\u0436 \u0443 \u043d\u0430\u0441 \u0432\u0441\u0451 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u043d\u0430\u0434\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0430\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c. \u041b\u0443\u0447\u0448\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u043b\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f.<\/p>\n<p>\u0417\u0430 \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f PROJECTS \u0432 environment. \u041e\u043d\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0438:<\/p>\n<ul>\n<li>\n<p>\u041f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430. \u0412 \u044d\u0442\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0432\u0441\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0438\u0437 \u043a\u043b\u044e\u0447\u0430 &#171;projects&#187; \u0432 package.json \u0438\u043b\u0438 \u043f\u0430\u043f\u043a\u0438 src\/projects \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<br \/> <code>PROJECTS=<\/code> <\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u043e\u043a\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u043d\u0430 &#171;!&#187; (\u0431\u0435\u0437 \u043a\u0430\u0432\u044b\u0447\u0435\u043a). \u0412 \u044d\u0442\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0442\u0430\u043a\u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u043d\u043e \u0431\u0435\u0437 \u0442\u0435\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u043f\u043e\u0441\u043b\u0435 \u0432\u043e\u0441\u043a\u043b\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u043a\u0430 (\u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u0430\u043f\u044f\u0442\u043e\u0439 \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432)<br \/> <code>PROJECTS=!micromodule-test,something-else<\/code> (dev) \u0438\u043b\u0438 <code>PROJECTS=!@av.ru\/micro-module-test,@av.ru\/something-else<\/code> ( prod)<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432. \u0412\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b<br \/><code>PROJECTS=micromodule-test,something-else,@av.ru\/if-you-need-specific-version-from-npm@0.0.2<\/code> (dev) \u0438\u043b\u0438 <code>PROJECTS=@av.ru\/micro-module-test,@av.ru\/something-else<\/code> (prod)<\/p>\n<\/li>\n<li>\n<p>false. \u041f\u0440\u043e\u0435\u043a\u0442\u044b \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b<br \/> <code>PROJECTS=false<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e \u043c\u044b \u0442\u0443\u0442 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438:<\/p>\n<ul>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432\u0441\u0435, \u043a\u0440\u043e\u043c\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0442\u0430\u043a \u0438 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0432 npm (\u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0441 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438, \u0431\u0443\u0434\u0443\u0442 \u044f\u0432\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0440\u0435\u0434\u043a\u0438\u043c\u0438).<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u043e\u0441\u043e\u0431\u043b\u0435\u043d\u043d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b).<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430 \u0432 env &#8212; \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0443\u0441\u0442\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 (\u0438\u043b\u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438) \u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u044f\u043c\u043e \u0432 package.json \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u043a\u043b\u044e\u0447:<\/p>\n<pre><code class=\"json\">{   \"projects\": {     \"@av.ru\/micro-module-test\": \"0.0.3\"   } }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u043e\u0442\u0441\u044e\u0434\u0430 \u043c\u0451\u0440\u0436\u0430\u0442\u0441\u044f \u0441 <code>dependencies<\/code>, \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u044b.<\/p>\n<h4>\u0428\u0430\u0433 2. \u0412\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h4>\n<p>\u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e <strong>\u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/strong> (\u043c\u044b \u0438\u0445 \u043d\u0430\u0437\u0432\u0430\u043b\u0438 \u0442\u0430\u043a) \u0432 \u043f\u0430\u043f\u043a\u0435 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430: config.ts \u0438 package.json. \u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u043f\u043e\u043a\u0430 \u043d\u0430 \u0432\u0442\u043e\u0440\u043e\u043c. <\/p>\n<pre><code class=\"json\">{   \/\/\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430   \"name\": \"@av.ru\/micro-module-test\",   \/\/\u0412\u0435\u0440\u0441\u0438\u044f   \"version\": \"0.0.3\",   \/\/\u041c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c beta \u0438 \u0442.\u0434.   \"tag\": \"latest\",   \/\/\u041f\u043e\u043a\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c   \"main\": \".\/config.ts\",   \/\/\u0414\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438   \"publishConfig\": {     \"@av.ru:registry\": \"https:\/\/AV_GITLAB_DOMAIN\/api\/v4\/projects\/PROJECT_ID\/packages\/npm\/\"   } }<\/code><\/pre>\n<p>\u0412\u0435\u0440\u0441\u0438\u0438 \u043c\u044b \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c \u0432 Gitlab \u043f\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 (\u043d\u0430\u0434\u043e \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0443 \u0432 CI\/CD). \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0434\u0435\u043b\u0430\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e CI\/CD Jobs, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <a href=\"https:\/\/docs.gitlab.com\/ee\/ci\/pipelines\/parent_child_pipelines.html\" rel=\"noopener noreferrer nofollow\">Parent-child pipelines<\/a>: <\/p>\n<pre><code class=\"javascript\">for (const path of packageJsons) {     const json = require(join(__dirname, '..\/..\/src\/projects', path, 'package.json'));     configs += ` push:npm:${ json.name.replace('@av.ru\/', '') }-${ json.version }-${ json.tag || 'latest' }:     script:         - npm config set @av.ru:registry https:\/\/AV_GITLAB_URL\/api\/v4\/packages\/npm\/         - npm config set \/\/AV_GITLAB_URL\/api\/v4\/packages\/npm\/:_authToken \"\\${CI_JOB_TOKEN}\"         - cd src\/projects\/${ path }         - echo '\/\/AV_GITLAB_URL\/api\/v4\/projects\/\\${CI_PROJECT_ID}\/packages\/npm\/:_authToken=\\${CI_JOB_TOKEN}'>.npmrc         - npm publish${ json.tag ? ` --tag=${ json.tag }` : '' }     when: manual     allow_failure: true     image: AV_DOCKER_REGISTRY_URL\/base\/node:16.14 `; }  writeFileSync('projects-config.gitlab-ci.yml', configs, 'utf-8');<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0443 \u043d\u0430\u0441 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u0430\u0431\u043e\u0440 Jobs, \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043a \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. <\/p>\n<h4>\u0428\u0430\u0433 3. \u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f<\/h4>\n<p>\u0412 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435:<\/p>\n<ol>\n<li>\n<p>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Vuex).<\/p>\n<\/li>\n<li>\n<p>extendRoutes (\u0432 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435 Nuxt, \u0430 \u043d\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 routes).<\/p>\n<\/li>\n<li>\n<p>scssVariables: \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0440\u0430\u043d\u0435\u0435.<\/p>\n<\/li>\n<li>\n<p>routesRegExp: \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<\/li>\n<li>\n<p>vuex: \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043a\u043b\u044e\u0447\u0430\u043c\u0438, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043b\u044e\u0447 \u0440\u0430\u0432\u0435\u043d \u043f\u043e\u0434\u043c\u043e\u0434\u0443\u043b\u044e \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0415\u0441\u0442\u044c \u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 index, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0432\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443 \u043c\u043e\u0434\u0443\u043b\u044f \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p>mixins: \u043d\u0430\u0431\u043e\u0440 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Nuxt \u0444\u0443\u043d\u043a\u0446\u0438\u044e inject).<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">const config: IProjectConfig&lt;'microModuleTest'> = {     name: 'microModuleTest',     extendRoutes: (routes, resolve) => {         routes.push({             path: '\/2.0\/test',           \/\/\u0418\u043c\u0435\u043d\u043d\u043e \u0432\u044b\u0437\u043e\u0432 resolve \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0434\u043b\u044f build             component: resolve(__dirname, 'pages\/index.vue'),         });         return routes;     },     scssVariables: [         {           \/\/join \u0432\u0441\u0451 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043b\u044c\u0437\u044f             src: __dirname + '\/scss\/microModuleVariables.scss',             strategy: 'push',         },     ],     routesRegExp: {         '2.0\/test': \/^\\\/2.0\\\/test\/,     },     vuex: {         index: indexStore,         test: testStore,     },     mixins: [         {           \/\/\u042d\u0442\u043e \u043d\u0430\u0448 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c - inject             key: '$microModuleTest',             mixin: microModuleTest,             initAndBind: true,         },     ], };  export default config;<\/code><\/pre>\n<h4>\u0428\u0430\u0433 4. \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f<\/h4>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u043f\u043e \u043a\u043e\u0434\u0443 \u0432\u044b\u0448\u0435, \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 IProjectConfig \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0438\u043a. \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u043c\u043e\u0447\u044c \u0440\u0435\u0448\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b:<\/p>\n<ol>\n<li>\n<p>\u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441\u0430\u0439\u0442\u0430 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u0435\u0449\u0435 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435, \u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u0412\u0435\u0441\u0442\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 (nuxt-link) \u0438\u043b\u0438 \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u044e\u044e\/\u043b\u0435\u0433\u0430\u0441\u0438 (a href);<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u0430\u043c\u0435\u043d\u044b \u043b\u0435\u0433\u0430\u0441\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a, \u043d\u0435 \u043c\u0435\u043d\u044f\u044f \u043d\u0438\u0447\u0435\u0433\u043e \u0432 \u043a\u043e\u0434\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 nuxt-link;<\/p>\n<\/li>\n<li>\n<p>\u0414\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439: \u0434\u0440\u043e\u0431\u0438\u043c \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043a\u0438 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0433\u0440\u0443\u043f\u043f\u043e\u0432\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<li>\n<p>\u042f \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043e\u043a, \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435. \u041d\u0430\u043c \u043d\u0430\u0434\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0435\u0441\u0442\u044c \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043a\u043e\u043c\u043f\u043b\u0438\u0442 \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e.<\/p>\n<\/li>\n<\/ol>\n<p>\u0418\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441:<\/p>\n<pre><code class=\"javascript\">export interface IProjects {     microModuleTest: {         routes: '2.0\/test',       \/\/\u041d\u0430\u0431\u043e\u0440 \u0438\u043a\u043e\u043d\u043e\u043a         \/\/\u0422\u0443\u0442 \u0432\u043e\u043e\u0431\u0449\u0435 \u0441\u0442\u043e\u0438\u0442 Type, \u044d\u0442\u043e \u044f \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438         icons: 'icon-name' | 'another-icon',      };     catalog: {   \/\/\u041d\u0430\u0431\u043e\u0440 \u0441\u0442\u0440\u0430\u043d\u0438\u0446         routes: 'catalog' | 'search' | 'discount' | 'brands' | 'collections'   \/\/\u0423 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u043f\u043e\u043a\u0430) \u043d\u0435\u0442 \u0438\u043a\u043e\u043d\u043e\u043a, \u043d\u043e \u043a\u043b\u044e\u0447 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c,   \/\/\u0447\u0442\u043e\u0431\u044b TS \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u043b\u0441\u044f         icons: never,     }; }  export type IProjectsPaths = IProjects[keyof IProjects]['routes'] export type IProjectsList = keyof IProjects export type IProjectsIcons = {   \/\/\u0410\u0432\u0442\u043e\u043a\u043e\u043c\u043b\u043f\u0438\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a microModuleTest\/icon-name     [K in IProjectsList as `${ K }\/${ IProjects[K]['icons'] }`]: true }<\/code><\/pre>\n<p><code>IProjectsList<\/code>  \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a.<\/p>\n<h4>\u0428\u0430\u0433 5. \u0418\u043a\u043e\u043d\u043a\u0438<\/h4>\n<p>\u041f\u0440\u0438\u0437\u043d\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0441\u0442\u043d\u043e, \u044d\u0442\u043e \u044f \u0434\u0435\u043b\u0430\u043b \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c, \u0438\u0431\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0432\u0430\u0442\u043e. \u041d\u0430\u0434\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0438\u043a\u043e\u043d\u043a\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c, \u043d\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0447\u0430\u043d\u043a\u0430\u0445. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0431\u043c\u0430\u043d\u0449\u0438\u043a\u0430 Webpack \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c Nuxt, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0441 Code Splitting. <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0437\u043d\u0430\u0447\u0438\u0442, \u0434\u0435\u043b\u044f\u0442\u0441\u044f \u043f\u0440\u0438 resolve? \u041d\u0443 \u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u043e. <\/p>\n<pre><code class=\"javascript\">\/\/projects\/micromodule-test\/pages\/index.vue export default Vue.extend({     name: 'TestIndex',     mixins: [         createProjectIconsMixin({             project: 'microModuleTest', \/\/\u0418\u0437 IProjectsList             requireFunction: (icon: string) => require(`.\/..\/assets\/icons\/${ icon }.svg?advanced`),         }),     ] });<\/code><\/pre>\n<p>\u041c\u0438\u043a\u0441\u0438\u043d:<\/p>\n<pre><code class=\"javascript\">export function createProjectIconsMixin({     project,     requireFunction, }: {     project: IProjectsList,     requireFunction: (icon: string) => any, }): ComponentOptions&lt;Vue> {     return {         beforeCreate() {           \/\/commonIconsList - \u044d\u0442\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442          \/\/\u041a\u043e\u0441\u0442\u044b\u043b\u044c \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043a\u043e\u043d\u043a\u0438           \/\/\u041f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0440\u0430\u0448\u0438\u0442\u0441\u044f \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439             if (!commonIconsList[project]) {                 commonIconsList[project] = (icon: string) => {                   \/\/\u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e, \u043a\u0430\u043a \u0431\u044b\u043b\u043e \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435,                   \/\/\u0438\u043a\u043e\u043d\u043a\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a microModuleTest\/icon-name                   \/\/icon-name \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e svg-\u0444\u0430\u0439\u043b\u0430                     return requireFunction(icon.replace(`${ project }\/`, ''));                 };             }         },     }; }<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435:<\/p>\n<pre><code class=\"javascript\">        const [projectName, secondPart] = this.type.split('\/');         let component: any;         if (projectName &amp;&amp; secondPart) {             if (getProjects(this.$config).find(x => x.name === projectName)) {                 component = commonIconsList[projectName as IProjectsList]?.(this.type);             }         }          if (!component)          component = require(`..\/..\/assets\/svg\/${ this.type }.svg?advanced`); <\/code><\/pre>\n<h4>\u0428\u0430\u0433 6. Vuex<\/h4>\n<p>\u041d\u0430\u0448\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430: \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438 \u043f\u0440\u0438 \u0437\u0430\u0445\u043e\u0434\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043d\u043e \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0430, \u0438 \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u0445 (Unregister) \u0438\u0437 \u043f\u0430\u043c\u044f\u0442\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u0440\u0438 \u0443\u0445\u043e\u0434\u0435, \u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u043b\u043e\u0441\u044c.<\/p>\n<p>\u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 \u0432 middleware \u0438 \u0432 plugin, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0437\u0432\u0430\u043b\u043e\u0441\u044c \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0410 \u0442\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043a\u0438, \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0433\u0440\u0443\u0437\u0438\u0442\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0442!<\/p>\n<pre><code class=\"javascript\">    isCurrentProjectPath(config: IProjectConfig&lt;IProjectsList>, path = this.ctx.route.path): boolean {         return Object.values(config.routesRegExp).some(x => x.test(path));     }      processProjectsVuex(register: boolean) {         for (const config of getProjects(this.ctx.$config)) {             if (!config.vuex) continue;              const isCurrentPath = this.isCurrentProjectPath(config);              if (isCurrentPath &amp;&amp; register) {                 if (Object.keys(config.vuex).length &amp;&amp; !this.ctx.store.hasModule(config.name)) {                     this.ctx.$accessorRegisterModule(config.name, {                         namespaced: true,                         ...(config.vuex.index || {}),                     });                 }                  for (const [key, value] of Object.entries(config.vuex)) {                     if (key === 'index' || !value || this.ctx.store.hasModule([config.name, key])) continue;                     this.ctx.$accessorRegisterModule([config.name, key], value);                 }             }             else if (!isCurrentPath &amp;&amp; !register) {                 if (!this.ctx.store.hasModule(config.name)) continue;                 this.ctx.$accessorUnregisterModule(config.name);             }         }     } <\/code><\/pre>\n<p>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0434\u043b\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <a href=\"https:\/\/github.com\/danielroe\/typed-vuex\/pull\/267\" rel=\"noopener noreferrer nofollow\">\u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043a\u0440\u0443\u0442\u043e\u0433\u043e typed-vuex<\/a>, \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043d\u0430 <a href=\"https:\/\/vuex.vuejs.org\/api\/#registermodule\" rel=\"noopener noreferrer nofollow\">API Vuex<\/a>.<\/p>\n<p>\u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u043e\u0432\u0440\u0435\u043c\u044f.<\/p>\n<pre><code class=\"javascript\">\/\/src\/plugins\/projects.ts context.app.router?.afterEach(async () => {  \/\/\u0416\u0434\u0451\u043c \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u043d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439    await Vue.nextTick();    \/\/\u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u0442\u0430\u0440\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438    context.$baseHelpers.processProjectsVuex(false); }); <\/code><\/pre>\n<pre><code class=\"javascript\">\/\/src\/middleware\/projects.ts import { Middleware } from '@nuxt\/types';  const projectsMiddleware: Middleware = (context) => {     context.$baseHelpers.processProjectsVuex(true); };  export default projectsMiddleware; <\/code><\/pre>\n<p>middleware \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u043d\u043e, afterEach &#8212; \u043f\u043e\u0437\u0434\u043d\u043e. \u0422\u043e, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e.<\/p>\n<h2>\u0427\u0442\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/h2>\n<p>\u041f\u043e \u0438\u0442\u043e\u0433\u0430\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<ol>\n<li>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. inject \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 CSR \u0438 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0434\u0440\u043e\u0431\u0438\u0442\u044c \u043d\u0430 \u0444\u0430\u0439\u043b\u044b, \u0442\u0430\u043a \u0447\u0442\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0438 \u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0431\u0443\u0434\u0443\u0442 \u0432\u0441\u0435 \u0440\u0430\u0437\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 layouts. \u042f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c layout \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 page, \u0442\u0430\u043a \u0447\u0442\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043e\u043d\u0438 \u0432\u0441\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b (\u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e).<\/p>\n<\/li>\n<\/ol>\n<h2>\u0427\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/h2>\n<ol>\n<li>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u0434.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0434\u0440\u043e\u0431\u0438\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u0438\u043a\u043e\u043d\u043e\u043a.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e (\u0434\u0435-)\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044e \u043c\u043e\u0434\u0443\u043b\u0435\u0439 Vuex.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0434\u0432\u0438\u0436\u043a\u0443 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043d\u0430 \u043a\u0430\u043a\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u043c\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u043c\u0441\u044f.<\/p>\n<\/li>\n<\/ol>\n<h2>\u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c<\/h2>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/945\/a8a\/7e0\/945a8a7e0a94c9acb6a328b5afc0d242.png\" width=\"1093\" height=\"716\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/945\/a8a\/7e0\/945a8a7e0a94c9acb6a328b5afc0d242.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0418\u0442\u043e\u0433\u0438<\/h2>\n<p>\u041f\u043e \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u044f\u043c, \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u0435\u043f\u043b\u043e\u0445\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u043e\u0432. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u0443\u0436\u0435 \u0432\u0435\u0434\u0435\u043c \u043d\u0430 \u043d\u0435\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u0430 \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043d\u0435 \u0431\u044b\u043b\u043e \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0444\u0438\u0434\u0431\u0435\u043a\u0430 (\u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u044b\u043b \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0445\u043e\u0434\u0430 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438).<\/p>\n<p>\u042f \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u044f \u043c\u043e\u0433 \u0447\u0435\u0433\u043e-\u0442\u043e \u043d\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e, \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u043e &#8212; \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u0438\u0448\u0438\u0442\u0435 \u0441\u0432\u043e\u0438 \u043c\u044b\u0441\u043b\u0438 \u043e\u0431\u043e \u0432\u0441\u0451\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c!<\/p>\n<p>\u041f\u043e\u0434 \u043a\u043e\u043d\u0435\u0446 \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e, \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u043c, \u043a\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u043d\u0430 Vue\/Nuxt, \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0434\u043b\u044f Nuxt \u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432 \u043e\u0431\u0449\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0435 \u043d\u0435 \u043d\u0430\u0448\u0435\u043b.<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/663260\/\"> https:\/\/habr.com\/ru\/post\/663260\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u042f &#8212; Senior Frontend Developer \u0432 \u0410\u0437\u0431\u0443\u043a\u0435 \u0432\u043a\u0443\u0441\u0430. \u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u043d\u0430\u0448 \u0441\u0430\u0439\u0442 \u0441 \u043b\u0435\u0433\u0430\u0441\u0438 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a, \u0438 \u043c\u043d\u0435 \u0434\u043e\u0432\u0435\u043b\u043e\u0441\u044c \u0441\u0442\u0430\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430. <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u0441 \u043b\u0435\u0433\u0430\u0441\u0438 (jQuery + Java \u0438\u043b\u0438 PHP) \u0431\u044b\u043b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c. \u0421\u0430\u043c\u043e\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0435 &#8212; \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0441\u0442\u044d\u043a\u0430 (\u0433\u0434\u0435-\u0442\u043e Bitrix, \u0433\u0434\u0435-\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u0435\u0449\u0435), \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442 \u0447\u0451\u0442\u043a\u0438\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439, \u043d\u0430 \u0447\u0435\u043c \u0438 \u043a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c. <\/p>\n<p>\u0410 \u0435\u0449\u0451 &#8212; \u0432\u0435\u0441\u044c HTML \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u0443 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0431\u044d\u043a\u0435\u043d\u0434 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432 \u0435\u0433\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435. \u042d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u043b\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443. <\/p>\n<p>\u041d\u0443 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430 jQuery \u0432 2021 \u0433\u043e\u0434\u0443 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u043e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0441 \u0432\u0438\u0434\u043d\u0435\u0432\u0448\u0438\u043c\u0438\u0441\u044f \u043d\u0430 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0435 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u0430\u043c\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f UI Kit.<\/p>\n<p>\u041d\u043e\u0432\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f Vue 2 + Nuxt 2 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 Typescript.<\/p>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0442\u0438\u043a\u0430<\/h2>\n<p>\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0432\u0441\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043b\u0438, \u0447\u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u0442\u044c\u0441\u044f. \u0415\u0449\u0451 \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u044f \u043d\u0430\u0447\u0430\u043b \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u044b, \u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0432 \u00ab\u043c\u043e\u043d\u043e\u0440\u0435\u043f\u0435\u00bb \u0431\u0435\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u043b\u0438\u0441\u044c \u0432:<\/p>\n<ol>\n<li>\n<p>Vuex. \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0441 SSR \u043d\u0430 CSR, Nuxt \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 Vuex, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c. <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0438\u0434\u0442\u0438 \u043e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438, \u0447\u0442\u043e \u043e\u0434\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 -> \u043e\u0434\u0438\u043d, \u0430 \u0442\u043e \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0434\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0431\u043e\u0440 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438), \u044d\u0442\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0435\u0441\u0442\u044c \u0432\u0441\u0451 \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0435\u0441\u0442\u0430 \u0432 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043a\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0430\u0446\u0438\u044f. \u0425\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0447\u0451\u0442\u043a\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043f\u043e\u0434\u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435: \u044d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0431\u043e\u0442\u044b, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0441\u043a\u043e\u0443\u043f \u0437\u0430\u0434\u0430\u0447 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443. \u041c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u044b \u044d\u0442\u043e \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u044b\u0442\u0435\u043a\u0430\u044e\u0449\u0435\u0435 &#8212; \u0434\u043b\u044f \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u044d\u0442\u043e \u043d\u0435 \u0441\u0442\u043e\u043b\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e;<\/p>\n<\/li>\n<li>\n<p>\u0412\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u043d\u0430\u0434 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435 \u0432 \u043e\u0434\u043d\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0442\u043a\u0430\u0442\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0451, \u0430 \u043d\u0435 \u0432\u0435\u0441\u044c \u0440\u0435\u043b\u0438\u0437. \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441 API \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0440\u0435\u043b\u0438\u0437\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u0431\u043e\u0440\u043a\u0438:<\/p>\n<ol>\n<li>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0451, \u0434\u0430\u0436\u0435 \u0442\u043e, \u0447\u0435\u043c \u043e\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0435\u043c\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u0432\u044b\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d (\u043e\u043d\u0430 \u043d\u0435 \u0433\u043e\u0442\u043e\u0432\u0430 \u0438\u043b\u0438 \u044d\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430), \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0435\u0451 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043e\u043a. \u041c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u044f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432 \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0435 (\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044f \u043f\u043b\u043e\u0445\u043e \u0438\u0441\u043a\u0430\u043b). \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u043b\u0438\u0448\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u043e\u043f\u0430\u0434\u0430\u043b\u0438 \u0432\u0441\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0441\u0440\u0430\u0437\u0443 (require(`.\/icons\/${name}.svg`) \u0438 \u0432\u0443\u0430\u043b\u044f, Webpack \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0441\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0432 \u043e\u0434\u0438\u043d \u0431\u0430\u043d\u0434\u043b)<\/p>\n<\/li>\n<\/ol>\n<h2>\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u043d\u043e\u043c\u0435\u0440 \u0440\u0430\u0437. \u0414\u0440\u043e\u0431\u0438\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/h2>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044f \u0432\u0438\u0434\u0435\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b 2, 3 \u0438 4. \u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u043d\u0435 \u0431\u044b\u043b\u0430, Vuex \u0431\u044b\u043b \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c.<\/p>\n<p>\u0420\u0435\u0448\u0438\u043b\u0438 \u0438\u0434\u0442\u0438 \u043e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438. \u041e\u0434\u0438\u043d \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 &#8212; \u043e\u0434\u0438\u043d \u043f\u0440\u043e\u0435\u043a\u0442. <\/p>\n<p>\u041c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439: \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 Nuxt. \u0422\u0430\u043a\u043e\u0439 \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0441\u0442\u0440\u0430\u0434\u0430\u0435\u0442 \u0438 \u0441\u0430\u043c Vue. \u0412\u044b \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u0440\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0447\u0435\u0440\u0435\u0437 \u043c\u043e\u0434\u0443\u043b\u044c? \u0410 \u0435\u0441\u043b\u0438 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445 \u0435\u0441\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442? \u0418\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f\u043c \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 Nuxt.<\/p>\n<p>\u0411\u043b\u0430\u0433\u043e, \u0432 Nuxt 3 \u0431\u0443\u0434\u0435\u0442 Nuxt Kit \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u0442\u0430\u043d\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435. <\/p>\n<p><strong>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f<\/strong><\/p>\n<ol>\n<li>\n<p>\u041d\u0430\u0431\u043e\u0440 routes \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 extend \u0434\u043b\u044f Vue Router.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0431\u043e\u0440 SCSS \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0431\u043e\u0440 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0431\u043e\u0440 Vuex Store.<\/p>\n<\/li>\n<\/ol>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e \u043f\u0440\u043e\u0439\u0434\u0435\u043c\u0441\u044f \u043f\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<ol>\n<li>\n<p>\u0414\u0435\u043b\u0430\u0435\u043c <code>this.nuxt.extendRoutes<\/code> \u0438 \u0437\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u043f\u0443\u0442\u0438 \u0432 <code>routes<\/code>, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432 \u0432\u044b\u0437\u0432\u0430\u0442\u044c <code>resolve<\/code>   \u0441 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u043c \u043f\u0443\u0442\u0451\u043c \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0443\u0442\u0438 \u0441 <code>lang: 'scss'<\/code> \u0432 <code>this.nuxt.options.styleResources.scss<\/code> \u0438 <code>this.nuxt.options.css<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0412\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0451 \u043b\u0435\u0433\u043a\u043e:<\/p>\n<pre><code class=\"javascript\">this.nuxt.addPlugin({     src: plugin.path,     ssr: plugin.ssr, });<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>\u041d\u0430 Vuex \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u043f\u043e\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u043d\u0435 \u0441\u0442\u0430\u043b\u043e \u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u044f \u0438\u0434\u0443 \u043a\u0443\u0434\u0430-\u0442\u043e \u043d\u0435 \u0442\u0443\u0434\u0430. <\/p>\n<pre><code class=\"javascript\">this.nuxt.addPlugin({    src: join(__dirname, 'nuxt-vuex.js'),    options: {       keys: Object.keys(this.config.vuexStore).join(','),       values: this.config.vuexStore,    }, });<\/code><\/pre>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u0430\u043c nuxt-vuex.js<\/p>\n<pre><code class=\"javascript\">const vuexPlugin = async (context) => { &lt;% options.keys.split(',').forEach((key) => { %>     context.store.registerModule('&lt;%= key %>', {     ...require('&lt;%= serializeFunction(options.values[key]).replace('\"', '').replace('\"', '') %>'),     namespaced: true,     }, { preserveState: context.isClient }); &lt;% }); %> };  export default vuexPlugin; <\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c, \u0447\u0442\u043e \u0442\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442:<\/p>\n<ol>\n<li>\n<p>&lt;% \u0438 %> \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0431\u0440\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u041f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p>Object.entries, for in \u0438 \u0442.\u0434. \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u044f \u043d\u0435 \u0441\u043c\u043e\u0433. \u041d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043b\u0438 \u043a\u043b\u044e\u0447\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u043f\u043e \u043d\u0438\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u043e\u043a\u0430 4. \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e serializeFunction, \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0434\u0432\u0435 \u043a\u0430\u0432\u044b\u0447\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f, \u0430 \u0437\u0430\u0442\u0435\u043c \u0434\u0435\u043b\u0430\u0435\u043c require \u043d\u0430\u0448\u0435\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 (\u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442).<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u043e\u043a\u0430 7. \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0446\u0438\u043a\u043b, \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0432 template tags, \u043d\u0430\u0434\u043e \u0432 \u043d\u0438\u0445 \u0436\u0435.<\/p>\n<\/li>\n<\/ol>\n<p>\u041e\u043f\u0443\u0441\u0442\u0438\u043c \u0432\u0440\u0435\u043c\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u043d\u0430 \u044d\u0442\u043e, \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u043e Vuex. \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code>new AVPlatformConfig({ nuxt: this, config: { routes: [{path: '\/', component: join(__dirname, 'src\/pages\/index.vue')}], scss: [ { \/\/\u0410 \u0442\u0443\u0442 join \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 src: `${ __dirname }\/..\/scss\/variables.scss`, \/\/\u0427\u0442\u043e\u0431\u044b \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c CSS \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0438 \u043a\u043e\u043d\u0435\u0446 strategy: 'unshift', },     ], plugins: [ { path: join(__dirname, 'nuxt-plugin.js'), ssr: true, },     ], vuexStore: { myModule: { state,  actions, namespaced: true, modules: { myNestedModule: {...}, } }  }, }, }).init();<\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0435 \u0441\u0442\u043e\u043b\u044c \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e. \u041d\u0430\u0434\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c nuxt: this, \u043f\u043e\u0434\u043c\u043e\u0434\u0443\u043b\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 myModule, \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c Vuex \u0441 \u043b\u044e\u0431\u044b\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c. \u041d\u043e \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e. <\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/strong><\/p>\n<ol>\n<li>\n<p>\u041a\u0430\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 Hot Reload? \u041f\u0440\u043e\u043a\u0438\u043d\u0443\u043b\u0438 Volume \u0432 Docker Compose \u043d\u0430 \u0440\u0435\u043b\u044f\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043a \u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0443. \u0410 \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432? <\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0430\u0441\u0441\u0435\u0442\u0430\u043c\u0438? \u041f\u043e \u043a\u0430\u043a\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u0438\u0445 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c? \u0422\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u043b\u044f\u0442\u0438\u0432\u043d\u043e, \u0432\u044b\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f, \u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0435\u0441\u0442\u044c (\u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b Code Splitting).<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438? \u042d\u0442\u043e \u0432\u0435\u0434\u044c \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438 yarn install. \u041a\u0430\u043a \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0441 \u043c\u043e\u0434\u0443\u043b\u0435\u043c, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e?<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u0443\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e tsconfig?<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b? \u0418\u043b\u0438 \u043d\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435, \u0430 \u0441\u043c\u0435\u0436\u043d\u044b\u0435? \u0414\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 UI Kit?<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c layout \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430?<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b? \u041e\u0442\u043a\u0443\u0434\u0430 \u0431\u0440\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u043a \u043d\u0438\u043c?<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0435\u0441\u0442\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u043a\u0430\u043a \u0438\u0445 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c? \u041e\u0442\u043a\u0443\u0434\u0430 \u0431\u0440\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e Nuxt Config? \u041a\u043e\u0441\u0442\u044b\u043b\u044f\u043c\u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e?<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c autocomplete \u0434\u043b\u044f SCSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445? \u0412\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0445 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443?<\/p>\n<\/li>\n<\/ol>\n<p>\u042d\u0442\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u044f\u043b\u043e \u0440\u0435\u0448\u0438\u0442\u044c. \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d\u0438 \u0432\u0441\u043f\u043b\u044b\u043b\u0438, \u0441\u0442\u0430\u043b\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0447\u0435\u043c \u0445\u043e\u0440\u043e\u0448\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u0441\u0442\u044b\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u0432\u044b\u0448\u0430\u043b\u0441\u044f \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u043f\u0443\u043d\u043a\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0441\u044f &#8212; \u0438 \u044d\u0442\u043e \u044f \u0435\u0449\u0435 \u043d\u0435 \u0432\u0441\u0451 \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043b.<\/p>\n<p>\u0421\u0442\u043e\u0438\u0442 \u0442\u0430\u043a\u0436\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, SCSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438 \u0442.\u0434. \u041d\u0435 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0440\u0435\u0448\u0438\u043b\u043e \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0438 \u044d\u0442\u043e \u0432\u0441\u0451 \u0435\u0449\u0435 \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0431\u044b\u043b\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n<h2>\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u043d\u043e\u043c\u0435\u0440 \u0434\u0432\u0430<\/h2>\n<p>\u0420\u0430\u0437 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f\u043c\u0438 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u043f\u043e\u0439\u0442\u0438 \u043e\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e. \u041c\u043d\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u044b: \u0443 \u043d\u0438\u0445 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043c\u0438\u043d\u0443\u0441\u043e\u0432 \u043b\u0438\u0447\u043d\u043e \u0434\u043b\u044f \u043c\u0435\u043d\u044f. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432 \u0441\u043b\u043e\u0436\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043e\u0449\u0443\u0449\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u043b\u044e\u0441\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435. <\/p>\n<p>\u041a \u043c\u043e\u043c\u0435\u043d\u0442\u0443, \u043a\u043e\u0433\u0434\u0430 \u044f \u0441\u043d\u043e\u0432\u0430 \u0432\u0435\u0440\u043d\u0443\u043b\u0441\u044f \u043a \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435, \u043c\u044b \u0443\u0436\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e Vuex \u043f\u043e-\u0445\u043e\u0440\u043e\u0448\u0435\u043c\u0443 \u0442\u043e\u0436\u0435 \u0431\u044b \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u0438 \u043d\u0435 \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043b\u0438\u0448\u043d\u0435\u0433\u043e, \u0438 \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438. \u0417\u0430\u0434\u0430\u0447\u0438 \u0442\u0435 \u0436\u0435, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0434\u0440\u0443\u0433\u0430\u044f.<\/p>\n<h4>\u0428\u0430\u0433 1. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/h4>\n<p>\u0420\u0430\u0437 \u0443\u0436 \u0443 \u043d\u0430\u0441 \u0432\u0441\u0451 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u043d\u0430\u0434\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0430\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c. \u041b\u0443\u0447\u0448\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u043b\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f.<\/p>\n<p>\u0417\u0430 \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f PROJECTS \u0432 environment. \u041e\u043d\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0438:<\/p>\n<ul>\n<li>\n<p>\u041f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430. \u0412 \u044d\u0442\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0432\u0441\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0438\u0437 \u043a\u043b\u044e\u0447\u0430 &#171;projects&#187; \u0432 package.json \u0438\u043b\u0438 \u043f\u0430\u043f\u043a\u0438 src\/projects \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<br \/> <code>PROJECTS=<\/code> <\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u043e\u043a\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u043d\u0430 &#171;!&#187; (\u0431\u0435\u0437 \u043a\u0430\u0432\u044b\u0447\u0435\u043a). \u0412 \u044d\u0442\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0442\u0430\u043a\u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u043d\u043e \u0431\u0435\u0437 \u0442\u0435\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u043f\u043e\u0441\u043b\u0435 \u0432\u043e\u0441\u043a\u043b\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u043a\u0430 (\u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u0430\u043f\u044f\u0442\u043e\u0439 \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432)<br \/> <code>PROJECTS=!micromodule-test,something-else<\/code> (dev) \u0438\u043b\u0438 <code>PROJECTS=!@av.ru\/micro-module-test,@av.ru\/something-else<\/code> ( prod)<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432. \u0412\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b<br \/><code>PROJECTS=micromodule-test,something-else,@av.ru\/if-you-need-specific-version-from-npm@0.0.2<\/code> (dev) \u0438\u043b\u0438 <code>PROJECTS=@av.ru\/micro-module-test,@av.ru\/something-else<\/code> (prod)<\/p>\n<\/li>\n<li>\n<p>false. \u041f\u0440\u043e\u0435\u043a\u0442\u044b \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b<br \/> <code>PROJECTS=false<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e \u043c\u044b \u0442\u0443\u0442 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438:<\/p>\n<ul>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432\u0441\u0435, \u043a\u0440\u043e\u043c\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0442\u0430\u043a \u0438 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0432 npm (\u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0441 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438, \u0431\u0443\u0434\u0443\u0442 \u044f\u0432\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0440\u0435\u0434\u043a\u0438\u043c\u0438).<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u043e\u0441\u043e\u0431\u043b\u0435\u043d\u043d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b).<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430 \u0432 env &#8212; \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0443\u0441\u0442\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 (\u0438\u043b\u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438) \u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u044f\u043c\u043e \u0432 package.json \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u043a\u043b\u044e\u0447:<\/p>\n<pre><code class=\"json\">{   \"projects\": {     \"@av.ru\/micro-module-test\": \"0.0.3\"   } }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u043e\u0442\u0441\u044e\u0434\u0430 \u043c\u0451\u0440\u0436\u0430\u0442\u0441\u044f \u0441 <code>dependencies<\/code>, \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u044b.<\/p>\n<h4>\u0428\u0430\u0433 2. \u0412\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h4>\n<p>\u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e <strong>\u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/strong> (\u043c\u044b \u0438\u0445 \u043d\u0430\u0437\u0432\u0430\u043b\u0438 \u0442\u0430\u043a) \u0432 \u043f\u0430\u043f\u043a\u0435 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430: config.ts \u0438 package.json. \u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u043f\u043e\u043a\u0430 \u043d\u0430 \u0432\u0442\u043e\u0440\u043e\u043c. <\/p>\n<pre><code class=\"json\">{   \/\/\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430   \"name\": \"@av.ru\/micro-module-test\",   \/\/\u0412\u0435\u0440\u0441\u0438\u044f   \"version\": \"0.0.3\",   \/\/\u041c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c beta \u0438 \u0442.\u0434.   \"tag\": \"latest\",   \/\/\u041f\u043e\u043a\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c   \"main\": \".\/config.ts\",   \/\/\u0414\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438   \"publishConfig\": {     \"@av.ru:registry\": \"https:\/\/AV_GITLAB_DOMAIN\/api\/v4\/projects\/PROJECT_ID\/packages\/npm\/\"   } }<\/code><\/pre>\n<p>\u0412\u0435\u0440\u0441\u0438\u0438 \u043c\u044b \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c \u0432 Gitlab \u043f\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 (\u043d\u0430\u0434\u043e \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0443 \u0432 CI\/CD). \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0434\u0435\u043b\u0430\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e CI\/CD Jobs, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <a href=\"https:\/\/docs.gitlab.com\/ee\/ci\/pipelines\/parent_child_pipelines.html\" rel=\"noopener noreferrer nofollow\">Parent-child pipelines<\/a>: <\/p>\n<pre><code class=\"javascript\">for (const path of packageJsons) {     const json = require(join(__dirname, '..\/..\/src\/projects', path,<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-333856","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/333856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=333856"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/333856\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=333856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=333856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=333856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}