{"id":296832,"date":"2020-01-07T15:00:07","date_gmt":"2020-01-07T15:00:07","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=296832"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=296832","title":{"rendered":"Vue \u0434\u043b\u044f \u0441\u0430\u043c\u044b\u0445 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 a.k.a \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0431\u043b\u043e\u0433 \u043f\u043e \u0432\u0441\u0435\u043c \u043a\u0430\u043d\u043e\u043d\u0430\u043c"},"content":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/483064\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sv\/wv\/ux\/svwvuxu3tfp4xm_e46t5vv9u50m.png\"><\/p>\n<p>  \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0444\u0440\u043e\u043d\u0442\u0430 \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u043e\u0433\u043e \u0431\u043b\u043e\u0433\u0430 \u043d\u0430 Vue \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0441\u0435\u0445 \u043f\u0440\u0435\u043b\u0435\u0441\u0442\u0435\u0439 Vue \u0432\u043a\u043b\u044e\u0447\u0430\u044f Vuex \u0438 Router. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0438 \u0440\u043e\u0443\u0442\u0435\u0440\u043e\u043c.<br \/>  <a name=\"habracut\"><\/a><br \/>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u044d\u0442\u0430\u043f\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0440\u043e\u043d\u0442\u0430 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u043b\u043e\u0433\u0430):  <\/p>\n<ol>\n<li>\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/li>\n<li>\u0441\u043a\u0435\u043b\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<li>\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0435\u0439<\/li>\n<li>\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438<\/li>\n<li>\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 \u0440\u043e\u0443\u0442\u043e\u0432<\/li>\n<li>\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/li>\n<li>\u043f\u0440\u0430\u0432\u043a\u0438<\/li>\n<\/ol>\n<h2>1. \u041f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0441\u043f\u0438\u0448\u0435\u043c \u0447\u0442\u043e \u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0430\u0448\u0435 SPA. \u041d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0442\u043e, \u0441 \u0447\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c (\u0435\u0441\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u0433\u0440\u0443\u0431\u043e \u043e\u043a\u0440\u0443\u0433\u043b\u0438\u0442\u044c \u044d\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0442\u0435\u0441\u0442\u0430\u043c TDD \u2013 \u043c\u044b \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u0430\u043a \u0441 \u043d\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0430 \u0437\u0430\u0442\u0435\u043c \u0443\u0436\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439).<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u043a\u0430\u043a\u0438\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:  <\/p>\n<ul>\n<li>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u2013 \u043d\u0430 \u043d\u0435\u0439 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0438 \u0441\u0442\u0430\u0442\u044c\u0438<\/li>\n<li>\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u2013 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0430\u0442\u0435\u0439 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438<\/li>\n<li>\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u2013 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432, \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438\u0437 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438<\/li>\n<\/ul>\n<p>  \u0415\u0441\u043b\u0438 \u043d\u0430\u043a\u0438\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0442\u043e \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041d\u0435\u0441\u0443\u0441\u0432\u0435\u0442\u043d\u0430\u044f \u043a\u0440\u0430\u0441\u043e\u0442\u0435\u043d\u044c<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/d6\/ry\/8a\/d6ry8a-vgf-cs9q5pv0ttxpg_o0.jpeg\">  <\/div>\n<\/div>\n<p>  \u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043d\u043e \u043d\u0430 \u0442\u043e \u044d\u0442\u043e \u0438 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \ud83d\ude42 \u0421\u0440\u0430\u0437\u0443 \u043f\u043e\u044f\u0441\u043d\u044e \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043e \u043d\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043e\u0444\u0442\u0438\u043d\u044b \u0434\u043b\u044f \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f: \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0435 \u043a\u0443\u0434\u0430 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u043f\u0440\u043e\u0449\u0435, \u043d\u0443 \u0438 \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u0440\u0443\u043a\u0430\u043c\u0438 \u0448\u0435\u0432\u0435\u043b\u0438\u0442\u044c, \u0430 \u0442\u043e, \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u0435\u043b\u043e \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0433\u0434\u0435-\u0442\u043e \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0432\u0441\u0435\u043c \u0433\u0440\u0443\u0441\u0442\u043d\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f.<\/p>\n<p>  \u0418\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043d\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:  <\/p>\n<ul>\n<li>\u0421\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0430\u0442\u0435\u0439<\/li>\n<li>\u0421\u043f\u0438\u0441\u043e\u043a \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439<\/li>\n<li>\u0421\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432<\/li>\n<li>\u0424\u043e\u0440\u043c\u0430 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f<\/li>\n<\/ul>\n<p>  \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0443\u0436\u0435 \u043f\u043e \u0445\u043e\u0434\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0430\u043c\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u044d\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<p>  \u0418 \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u043e\u043f\u0438\u0441\u0430\u0432 \u0432\u0441\u0435 \u0442\u043e\u0447\u043a\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043e\u043f\u0438\u0448\u0435\u043c \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:  <\/p>\n<ul>\n<li>\u0421\u0442\u0430\u0442\u044c\u044f (\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435, \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432)<\/li>\n<li>\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f (\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439)<\/li>\n<li>\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 (\u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435)<\/li>\n<\/ul>\n<p>  \u0412\u0430\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438 (\u0411\u041b), \u0430 \u043d\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0431\u0430\u0437\u044b. \u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0444\u0440\u043e\u043d\u0442 \u0447\u0430\u0441\u0442\u0438, \u0434\u0430 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0431\u044d\u043a\u0430 (\u0438\u0441\u043a\u043b\u044e\u0447\u0430\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445), \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0411\u041b, \u0430 \u043d\u0435 \u00ab\u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438\u00bb. \u041f\u0440\u0438\u0447\u0435\u043c \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u0430\u043c\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0417\u0430\u0434\u0435\u043b \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e, \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0440\u0435\u0434\u043a\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u0430\u0435\u0442, \u0430 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u043b\u043e\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <b>\u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u0430\u044f<\/b>, \u0442\u043e \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0438 \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043b\u0438\u0448\u043d\u0435\u0433\u043e \u0432 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<h2>2. \u0421\u043a\u0435\u043b\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>  \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b. \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:  <\/p>\n<pre><code class=\"bash\">npm install -g @vue\/cli vue create vue-blog-habr -n -d -m npm cd vue-blog-habr <\/code><\/pre>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u00abvue-blog-habr\u00bb \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0440\u043e vue-cli \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0442\u0443\u0442: <a href=\"https:\/\/cli.vuejs.org\/ru\/\" rel=\"nofollow\">cli.vuejs.org\/ru<\/a><\/p>\n<p>  \u0418 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/mv\/rt\/fs\/mvrtfspsimtxg-bl7r7a-nzorxg.png\"><\/p>\n<p>  \u0421\u0440\u0430\u0437\u0443 \u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u043f\u0430\u043a\u0435\u0442\u044b:  <\/p>\n<pre><code class=\"bash\">npm install vue-router vuex axios bootstrap-vue sass-loader npm install --save-dev --unsafe-perm node-sass <\/code><\/pre>\n<p>  \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/main.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import App from '.\/App.vue' import Vue from 'vue' import VueRouter from 'vue-router' import BootstrapVue from 'bootstrap-vue'  import store from '.\/store' import router from '.\/router'  Vue.config.productionTip = false  Vue.use(VueRouter) Vue.use(BootstrapVue)  new Vue({   store,   router,   render: h =&gt; h(App), }).$mount('#app') <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041f\u0440\u0430\u0432\u0438\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/eb\/s_\/pd\/ebs_pdpl5nj7obmhh4g9l_efyms.png\"><\/p>\n<p>  \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439:  <\/p>\n<ul>\n<li><b>api <\/b> \u2014 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0444\u0430\u0439\u043b\u044b \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430 \u00ab\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u00bb \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c<\/li>\n<li><b>assets <\/b> \u2014 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b: \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0438\u043a\u043e\u043d\u043a\u0438, &#8230;<\/li>\n<li><b>components <\/b> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0431\u0435\u0437 \u00ab\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u00bb \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0432 \u0440\u043e\u0443\u0442\u0435\u0440\u0435<\/li>\n<li><b>models <\/b> \u2014 \u043c\u043e\u0434\u0435\u043b\u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438, \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u044b\u0449\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0439 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435<\/li>\n<li><b>pages <\/b> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0432 \u0440\u043e\u0443\u0442\u0435\u0440\u0435<\/li>\n<li><b>router <\/b> \u2014 \u0444\u0430\u0439\u043b\u044b \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438<\/li>\n<li><b>services<\/b> \u2014 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0435\u0440\u0432\u0438\u0441 Display, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/li>\n<li><b>store <\/b> \u2014 \u0444\u0430\u0439\u043b\u044b Vuex \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430<\/li>\n<li><b>styles <\/b> \u2014 \u0444\u0430\u0439\u043b\u044b \u0441\u0442\u0438\u043b\u0435\u0439<\/li>\n<\/ul>\n<p>  \u0418 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440:  <\/p>\n<pre><code class=\"bash\">npm run serve<\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 runtime \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043f\u0440\u0430\u0432\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443: <a href=\"http:\/\/localhost\" rel=\"nofollow\">localhost<\/a>:8080<\/p>\n<h2>3. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0435\u0439<\/h2>\n<p>  \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438, \u043d\u043e \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u0447\u0438\u043d:  <\/p>\n<ul>\n<li><b>\u043a\u043e\u043d\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432<\/b> \u2013 \u043b\u044e\u0431\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b. \u041a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u044b, \u043c\u044b \u0437\u043d\u0430\u0435\u043c \u043a\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0435\u0441\u0442\u044c \u0443 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430<\/li>\n<li><b>\u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/b> \u2013 \u0432\u044b\u0442\u0435\u043a\u0430\u0435\u0442 \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Vue \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u044e\u0442 \u0442\u0438\u043f \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/li>\n<li><b>\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e <\/b>\u2013 \u043e\u043f\u0435\u0440\u0438\u0440\u0443\u044f \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438, \u043c\u044b \u043e\u043f\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u0438\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435. \u0422\u0430\u043a\u0436\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a get\/set\/static<\/li>\n<\/ul>\n<p>  \u0412\u0441\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438. \u041a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u044c\u0438, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/models\/Article.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">export default class Article {   constructor(id, title, content) {     this.id = id;     this.title = title;     this.content = content;     this.comments = [];   }    addComment(item) {     this.comments.push(item);   }    static createFrom(data) {     const {id, title, content} = data;     return new this(id, title, content);   } } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <\/p>\n<h2>4. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438<\/h2>\n<p>  \u041d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e, \u043d\u043e \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0441\u0430\u043c\u043e\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u041d\u0415 \u043d\u0443\u0436\u043d\u043e. \u041d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u0438:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/store\/index.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import Vue from 'vue' import Vuex from 'vuex' import blog from '.\/modules\/blog'  Vue.use(Vuex)  export default new Vuex.Store({   modules: {     blog,   }, })<\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0410 \u0432 \u0441\u0430\u043c\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435 \u0443\u0436\u0435 \u0434\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438\/\u0433\u0435\u0442\u0442\u0435\u0440\u044b\/\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e, \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/store\/modules\/blog.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">export default {   state: {},   getters: {},   mutations: {},   actions: {}, } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u043e\u0434\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 API \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b. \u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0444\u0440\u043e\u043d\u0442 \u0447\u0430\u0441\u0442\u0438, \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/api\/index.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import Article from '@\/models\/Article'; import Comment from '@\/models\/Comment'; import Category from '@\/models\/Category';  export default {   getArticles() {     const comments = this.getComments();     const items = [       {         id: 1, title: '\u0421\u0442\u0430\u0442\u044c\u044f 1', content: '\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 1',       },       {         id: 2, title: '\u0421\u0442\u0430\u0442\u044c\u044f 2', content: '\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 2',       },       {         id: 3, title: '\u0421\u0442\u0430\u0442\u044c\u044f 3', content: '\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 3',       },       {         id: 4, title: '\u0421\u0442\u0430\u0442\u044c\u044f 4', content: '\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 4',       },       {         id: 5, title: '\u0421\u0442\u0430\u0442\u044c\u044f 5', content: '\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 5',       },       {         id: 6, title: '\u0421\u0442\u0430\u0442\u044c\u044f 6', content: '\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 6',       },     ];     return items.map((item) =&gt; {       const article = Article.createFrom(item);       article.comments = comments.filter((comment) =&gt; comment.article_id == article.id);        return article;     });   },   getComments() {     const items = [       {         id: 1, article_id: 1, content: '\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043a \u0441\u0442\u0430\u0442\u044c\u0435 1',       },     ];     return items.map((item) =&gt; Comment.createFrom(item))   },   getCategories() {     const items = [       {         id: 1, title: '\u041d\u043e\u0432\u043e\u0441\u0442\u0438', articles: [1,3,5],       },       {         id: 2, title: '\u0421\u043f\u043e\u0440\u0442', articles: [2,3,4],       },       {         id: 3, title: '\u041a\u0440\u0430\u0441\u043e\u0442\u0430', articles: [],       },     ];     return items.map((item) =&gt; Category.createFrom(item))   },   addComment(comment) {     if (comment) {       \/\/ \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0431\u044d\u043a     }   }, }; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0427\u0442\u043e \u0434\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 vuex:  <\/p>\n<ul>\n<li><b>\u0447\u0438\u0441\u0442\u043e\u0442\u0443 <\/b>\u2013 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0432 God \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u00ab\u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u044e\u0442\u00bb<\/li>\n<li><b>\u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u044c<\/b> \u2013 \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0442\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 vuex \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u043d\u0438 (\u0434\u0430\u043d\u043d\u044b\u0435) \u043e\u0431\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435<\/li>\n<li><b>\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e<\/b> \u2013 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u0438 \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a store, \u0447\u0435\u043c \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0442\u0438\u043f\u044b \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0438\/\u0438\u043b\u0438 \u0432\u044b\u0437\u043e\u0432 API<\/li>\n<li><b>\u0442\u0435\u0441\u0442\u044b<\/b> \u2013 \u0445\u043e\u0442\u044f \u043a\u0442\u043e \u0438\u043c\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f?<\/li>\n<\/ul>\n<p>  <\/p>\n<h2>5. \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 \u0440\u043e\u0443\u0442\u043e\u0432<\/h2>\n<p>  \u0418\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0441\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0440\u0430\u043d\u0435\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c 4 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b: Index, Category, Article, \u0430 \u0442\u0430\u043a\u0436\u0435 404 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0412 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 src\/pages \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0444\u0430\u0439\u043b\u044b:  <\/p>\n<ul>\n<li>Article.vue<\/li>\n<li>Category.vue<\/li>\n<li>Index.vue<\/li>\n<li>404.vue<\/li>\n<\/ul>\n<p>  \u0415\u0441\u043b\u0438 \u0443 404 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c, \u0442\u043e \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/App.vue<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"xml\">&lt;template&gt;   &lt;div id=\"app\"&gt;     &lt;template v-if=\"is404\"&gt;       &lt;router-view&gt;&lt;\/router-view&gt;     &lt;\/template&gt;          &lt;template v-else&gt;       &lt;Header&gt;&lt;\/Header&gt;       &lt;main&gt;         &lt;b-container&gt;           &lt;router-view&gt;&lt;\/router-view&gt;         &lt;\/b-container&gt;       &lt;\/main&gt;     &lt;\/template&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt; import '@\/styles\/index.scss'; import Header from '@\/components\/Header.vue';  export default {   name: 'App',   components: {     Header,   },   computed: {     is404() {       return this.$route.name === '404';     },   }, } &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0424\u0430\u0439\u043b \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/pages\/Index.vue<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"xml\">&lt;template&gt;   &lt;b-row&gt;     &lt;b-col md=\"8\" lg=\"9\"&gt;       &lt;ListItems :items=\"lastArticles\"&gt;         &lt;template v-slot:default=\"props\"&gt;           &lt;ArticleItem :item=\"props.item\"&gt;&lt;\/ArticleItem&gt;         &lt;\/template&gt;         &lt;template v-slot:empty&gt;           \u0421\u0442\u0430\u0442\u044c\u0438 \u0435\u0449\u0435 \u043f\u0438\u0448\u0443\u0442\u0441\u044f :)         &lt;\/template&gt;       &lt;\/ListItems&gt;     &lt;\/b-col&gt;     &lt;b-col md=\"4\" lg=\"3\"&gt;       &lt;ListItems :items=\"popularCategories\" v-slot=\"props\"&gt;         &lt;router-link :to=\"getCategoryRoute(props.item)\"&gt;           {{ props.item.title }}         &lt;\/router-link&gt;       &lt;\/ListItems&gt;       &lt;CommentItem v-for=\"(item, index) in lastComments\" :key=\"index\" :item=\"item\"&gt;&lt;\/CommentItem&gt;     &lt;\/b-col&gt;   &lt;\/b-row&gt; &lt;\/template&gt;  &lt;script&gt; import ListItems from '@\/components\/ListItems.vue' import ArticleItem from '@\/components\/ArticleItem.vue' import CommentItem from '@\/components\/CommentItem.vue' import {   mapGetters, } from 'vuex'  export default {   name: 'Index',   components: {     ListItems,     ArticleItem,     CommentItem,   },   data() {     return {};   },   methods: {     getCategoryRoute(item) {       return {         name: 'Category',         params: {           category_id: item.id,         },       };     },   },   computed: {     ...mapGetters([       'lastArticles',       'lastComments',       'popularCategories',     ]),   },   created() {     \/**      * \u0417\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c (\u0430 \u043d\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u044f\u043c)      *\/     this.$store.dispatch('loadArticles');     this.$store.dispatch('loadComments');     this.$store.dispatch('loadCategories');   }, } &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0432\u0441\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0433\u0435\u0442\u0442\u0435\u0440\u044b \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 vuex (\u0431\u0435\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438):  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/store\/modules\/blog.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">export default {   state: {     articles: [],     comments: [],     categories: [],     \/\/      activeArticle: null,     activeCategory: null,   },   getters: {     lastArticles(state) {       return [];     },     lastComments(state) {       return [];     },     popularCategories(state) {       return [];     },     activeCategoryArticles(state) {       return [];     },   },   mutations: {},   actions: {     async loadArticles({ commit, state }) {},     async loadComments({ commit, state }) {},     async loadCategories({ commit, state }) {},     async loadActiveCategory(context, id) {},     async loadActiveArticle(context, id) {},     async addComment({ commit }, payload) {},   }, } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041d\u0443\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432:  <\/p>\n<ul>\n<li>\u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0443\u0436\u043d\u043e \u043a state. \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e getters;<\/li>\n<li>\u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0443\u0436\u043d\u043e \u043a actions, \u0430 \u043d\u0435 mutations. \u041e\u0434\u043d\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0443\u0442\u0430\u0446\u0438\u0439 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0442\u0430\u043a\u0436\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043a\u0440\u043e\u043c\u0435 \u043a\u0430\u043a \u0437\u0430\u043f\u0438\u0441\u044c \u0432 state \u0438 \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0441\u0442\u044c<\/li>\n<li>\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a API\/Rest. \u041f\u0440\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0447\u0435\u0440\u0435\u0437 Vuex \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0435\u0441\u043b\u0438 \u0441\u0430\u043c\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e)<\/li>\n<li>\u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u0441\u044b\u043b\u043a\u0430\u0445 \u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430\u043c. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0431\u0435\u0437\u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0430\u043c\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b, \u043d\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u0443\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e. \u0420\u0435\u0447\u044c \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0440\u043e \u0441\u0441\u044b\u043b\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 SPA, \u0430\u0434\u0440\u0435\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0440\u043e\u0443\u0442\u0435\u0440\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e<\/li>\n<\/ul>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u0440\u043e\u0443\u0442\u0435\u0440:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/router\/index.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import VueRouter from 'vue-router' import blog from '.\/blog'  export default new VueRouter({   mode: 'history',   routes: [     {       path: '\/',       name: 'Index',       component: () =&gt; import('@\/pages\/Index.vue'),     },     \/**      * \u041a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u0440\u043e\u0443\u0442\u044b \u043b\u0443\u0447\u0448\u0435 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b      * \u0420\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u043e \u043c\u043e\u0434\u0443\u043b\u044f\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f      * \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0438\u0437\u043b\u0438\u0448\u043d\u0435 \u0438 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f      *\/     ...blog,     {       path: '*',       name: '404',       component: () =&gt; import('@\/pages\/404.vue'),     },   ] }) <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0412\u0441\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438: <a href=\"https:\/\/router.vuejs.org\/ru\/api\/#%D0%BE%D0%BF%D1%86%D0%B8%D0%B8-%D0%BA%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%D0%B0-router\" rel=\"nofollow\">router.vuejs.org\/ru\/api\/#\u043e\u043f\u0446\u0438\u0438-\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430-router<\/a><\/p>\n<h2>6. \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435:  <\/p>\n<ul>\n<li>CategoryItem<\/li>\n<li>ArticleItem<\/li>\n<li>CommentItem<\/li>\n<li>CommentForm<\/li>\n<\/ul>\n<p>  \u0418 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435:  <\/p>\n<ul>\n<li>ListItems<\/li>\n<li>Header<\/li>\n<\/ul>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u0438, \u0442\u043e \u043f\u0440\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/components\/ArticleItem.vue<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"xml\">&lt;template&gt;   &lt;b-card :title=\"item.title\" class=\"article-item-card\"&gt;     &lt;router-link :to=\"getArticleRoute\" class=\"card-link\"&gt;       \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435     &lt;\/router-link&gt;   &lt;\/b-card&gt; &lt;\/template&gt;  &lt;script&gt; import Article from '@\/models\/Article';  export default {   name: 'ArticleItem',   props: {     item: Article,   },   computed: {     getArticleRoute() {       return {         name: 'Article',         params: {           post_id: this.item.id,         },       };     },   }, } &lt;\/script&gt;  &lt;style&gt; .article-item-card {   margin-bottom: 1rem; } &lt;\/style&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041f\u0430\u0440\u0443 \u0441\u043b\u043e\u0432 \u043f\u0440\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/pages\/Index.vue<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"xml\">&lt;template&gt;   &lt;b-row&gt;     &lt;b-col md=\"8\" lg=\"9\"&gt;       &lt;ListItems :items=\"lastArticles\"&gt;         &lt;template v-slot:default=\"props\"&gt;           &lt;ArticleItem :item=\"props.item\"&gt;&lt;\/ArticleItem&gt;         &lt;\/template&gt;         &lt;template v-slot:empty&gt;           \u0421\u0442\u0430\u0442\u044c\u0438 \u0435\u0449\u0435 \u043f\u0438\u0448\u0443\u0442\u0441\u044f :)         &lt;\/template&gt;       &lt;\/ListItems&gt;     &lt;\/b-col&gt;     &lt;b-col md=\"4\" lg=\"3\"&gt;       &lt;ListItems :items=\"popularCategories\" v-slot=\"props\"&gt;         &lt;router-link :to=\"getCategoryRoute(props.item)\"&gt;           {{ props.item.title }}         &lt;\/router-link&gt;       &lt;\/ListItems&gt;       &lt;CommentItem v-for=\"(item, index) in lastComments\" :key=\"index\" :item=\"item\"&gt;&lt;\/CommentItem&gt;     &lt;\/b-col&gt;   &lt;\/b-row&gt; &lt;\/template&gt;  &lt;script&gt; import ListItems from '@\/components\/ListItems.vue' import ArticleItem from '@\/components\/ArticleItem.vue' import CommentItem from '@\/components\/CommentItem.vue' import {   mapGetters, } from 'vuex'  export default {   name: 'Index',   components: {     ListItems,     ArticleItem,     CommentItem,   },   data() {     return {};   },   methods: {     getCategoryRoute(item) {       return {         name: 'Category',         params: {           category_id: item.id,         },       };     },   },   computed: {     ...mapGetters([       'lastArticles',       'lastComments',       'popularCategories',     ]),   },   created() {     \/**      * \u0417\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c (\u0430 \u043d\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u044f\u043c)      *\/     this.$store.dispatch('loadArticles');     this.$store.dispatch('loadComments');     this.$store.dispatch('loadCategories');   }, } &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u00ab\u043e\u0431\u0435\u0440\u0442\u043e\u0447\u043d\u044b\u0439\u00bb \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ListItems. \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u043c, \u0432\u0435\u0434\u044c \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439 v-for \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043b\u043e\u0442\u043e\u0432 \u0441\u0438\u043b\u044c\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u0434 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445.<\/p>\n<p>  \u041d\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0430\u0442\u0435\u0439, \u0442\u043e \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 (Index \u0438 Category) \u0441 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ArticleItems \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043e\u0442 ListItems:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/components\/ArticleItems.vue<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"xml\">&lt;template&gt;   &lt;ListItems :items=\"items\"&gt;     &lt;template v-slot:default=\"props\"&gt;       &lt;ArticleItem :item=\"props.item\"&gt;&lt;\/ArticleItem&gt;     &lt;\/template&gt;     &lt;template v-slot:empty&gt;       \u0421\u0442\u0430\u0442\u044c\u0438 \u0435\u0449\u0435 \u043f\u0438\u0448\u0443\u0442\u0441\u044f :)     &lt;\/template&gt;   &lt;\/ListItems&gt; &lt;\/template&gt;  &lt;script&gt; import ListItems from '@\/components\/ListItems.vue' import ArticleItem from '@\/components\/ArticleItem.vue'  export default {   name: 'ArticleItems',   components: {     ArticleItem,     ListItems,   },   extends: ListItems, } &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e props), \u043e\u043d\u043e \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0440\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043f\u0440\u0438\u043c\u0435\u0441\u0438: <a href=\"https:\/\/ru.vuejs.org\/v2\/api\/#extends\" rel=\"nofollow\">ru.vuejs.org\/v2\/api\/#extends<\/a>, <a href=\"https:\/\/ru.vuejs.org\/v2\/guide\/mixins.html\" rel=\"nofollow\">ru.vuejs.org\/v2\/guide\/mixins.html<\/a><\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u0443\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/pages\/Category.vue (\u0431\u044b\u043b\u043e)<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"xml\">&lt;template&gt;   &lt;div&gt;     &lt;div v-if=\"category\"&gt;       &lt;h1&gt;         {{ category.title }}       &lt;\/h1&gt;       &lt;ListItems :items=\"articles\"&gt;         &lt;template v-slot:default=\"props\"&gt;           &lt;ArticleItem :item=\"props.item\"&gt;&lt;\/ArticleItem&gt;         &lt;\/template&gt;         &lt;template v-slot:empty&gt;           \u0421\u0442\u0430\u0442\u044c\u0438 \u0435\u0449\u0435 \u043f\u0438\u0448\u0443\u0442\u0441\u044f :)         &lt;\/template&gt;       &lt;\/ListItems&gt;     &lt;\/div&gt;     &lt;div v-else&gt;       \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u0430     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt; import ListItems from '@\/components\/ListItems.vue' import ArticleItem from '@\/components\/ArticleItem.vue' import {   mapActions, } from 'vuex'  export default {   name: 'Category',   components: {     ListItems,     ArticleItem,   },   computed: {     categoryId() {       return this.$route.params['category_id'] || null;     },     category() {       return this.$store.state.blog.activeCategory;     },     articles() {       return this.$store.getters.activeCategoryArticles;     },   },   methods: {     ...mapActions([       'loadActiveCategory',     ]),   },   mounted() {     this.loadActiveCategory(this.categoryId);   }, } &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/pages\/Category.vue (\u0441\u0442\u0430\u043b\u043e)<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"xml\">&lt;template&gt;   &lt;div&gt;     &lt;div v-if=\"category\"&gt;       &lt;h1&gt;         {{ category.title }}       &lt;\/h1&gt;       &lt;ArticleItems :items=\"articles\"&gt;&lt;\/ArticleItems&gt;     &lt;\/div&gt;     &lt;div v-else&gt;       \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u0430     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt; import ArticleItems from '@\/components\/ArticleItems.vue' import {   mapActions, } from 'vuex'  export default {   name: 'Category',   components: {     ArticleItems,   },   computed: {     categoryId() {       return this.$route.params['category_id'] || null;     },     category() {       return this.$store.state.blog.activeCategory;     },     articles() {       return this.$store.getters.activeCategoryArticles;     },   },   methods: {     ...mapActions([       'loadActiveCategory',     ]),   },   mounted() {     this.loadActiveCategory(this.categoryId);   }, } &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0444\u043e\u0440\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432. \u041d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432 API \u043d\u0435 \u0434\u0435\u043b\u0430\u044e\u0442\u0441\u044f, \u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 Vuex \u0438 \u0443\u0436\u0435 \u00ab\u0432\u043d\u0443\u0442\u0440\u0438\u00bb \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u043a API, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0443\u0436\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c Article \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432. \u041a\u043e\u0434 \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/components\/CommentForm.vue<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"xml\">&lt;template&gt;   &lt;form @submit.prevent=\"onSubmit\"&gt;     &lt;textarea class='form-control' v-model=\"content\"&gt;&lt;\/textarea&gt;     &lt;br&gt;     &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c&lt;\/button&gt;   &lt;\/form&gt; &lt;\/template&gt;  &lt;script&gt; export default {   name: 'CommentForm',   props: {     articleId: Number,   },   data() {     return {       content: '',     };   },   methods: {     onSubmit() {       if (this.content) {         this.$store.dispatch('addComment', {           content: this.content,           article_id: this.articleId,         });         this.content = '';       }     },   }, } &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u0433\u043b\u0443\u0448\u0435\u043a \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0444\u0440\u043e\u043d\u0442 \u0447\u0430\u0441\u0442\u044c \u0431\u043b\u043e\u0433\u0430 \u0433\u043e\u0442\u043e\u0432\u0430. \u041d\u043e \u043a\u0430\u043a \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0431\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435, \u044d\u0442\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0432\u0435\u0434\u044c \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0430\u0432\u043a\u0438 \ud83d\ude42<\/p>\n<h2>7. \u041f\u0440\u0430\u0432\u043a\u0438<\/h2>\n<p>  \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0435\u0439 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439: \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 2 \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u041f\u0440\u0438\u0447\u0435\u043c \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u0435 \u043a\u0430\u043a \u0435\u0441\u0442\u044c. <\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ArticleItems \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <b>cols<\/b> \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432.  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/components\/ArticleItems.vue (\u0441\u0442\u0430\u043b\u043e)<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"xml\">&lt;template&gt;   &lt;ListItems :items=\"items\" class=\"row\"&gt;     &lt;template v-slot:default=\"props\"&gt;       &lt;b-col :cols=\"itemCols\"&gt;         &lt;ArticleItem :item=\"props.item\"&gt;&lt;\/ArticleItem&gt;       &lt;\/b-col&gt;     &lt;\/template&gt;     &lt;template v-slot:empty&gt;       &lt;b-col&gt;         \u0421\u0442\u0430\u0442\u044c\u0438 \u0435\u0449\u0435 \u043f\u0438\u0448\u0443\u0442\u0441\u044f :)       &lt;\/b-col&gt;     &lt;\/template&gt;   &lt;\/ListItems&gt; &lt;\/template&gt;  &lt;script&gt; import ListItems from '@\/components\/ListItems.vue' import ArticleItem from '@\/components\/ArticleItem.vue'  export default {   name: 'ArticleItems',   components: {     ArticleItem,     ListItems,   },   extends: ListItems,   props: {     cols: {       type: Number,       default: 1,     },   },   computed: {     itemCols() {       return 12 \/ this.cols;     },   }, } &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0412 \u0432\u044b\u0437\u043e\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0443\u0436\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/pages\/Category.vue<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"xml\">&lt;ArticleItems :items=\"articles\" :cols=\"2\"&gt;&lt;\/ArticleItems&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043d\u0430\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0441\u0442\u0430\u0442\u044c\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 (\u0432\u043f\u0435\u0440\u0435\u0434\/\u043d\u0430\u0437\u0430\u0434). \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c 2 \u0433\u0435\u0442\u0442\u0435\u0440\u0430 \u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/pages\/Article.vue<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"xml\">&lt;template&gt;   &lt;b-row v-if=\"article\"&gt;     &lt;b-col md=\"8\" lg=\"9\"&gt;       &lt;h1&gt;         {{ article.title }}       &lt;\/h1&gt;       &lt;p class=\"mb-4\"&gt;         {{ article.content }}       &lt;\/p&gt;        &lt;table class=\"table table-bordered\"&gt;         &lt;tbody&gt;           &lt;tr&gt;             &lt;td class=\"w-50\"&gt;               &lt;router-link v-if=\"prevArticle\" :to=\"getArticleRoute(prevArticle)\"&gt;                 {{ prevArticle.title }}               &lt;\/router-link&gt;             &lt;\/td&gt;             &lt;td class=\"text-right\"&gt;               &lt;router-link v-if=\"nextArticle\" :to=\"getArticleRoute(nextArticle)\"&gt;                 {{ nextArticle.title }}               &lt;\/router-link&gt;             &lt;\/td&gt;           &lt;\/tr&gt;         &lt;\/tbody&gt;       &lt;\/table&gt;        &lt;CommentForm :articleId=\"article.id\"&gt;&lt;\/CommentForm&gt;       &lt;CommentItem v-for=\"(item, index) in article.comments\" :key=\"index\" :item=\"item\"&gt;&lt;\/CommentItem&gt;     &lt;\/b-col&gt;     &lt;b-col md=\"4\" lg=\"3\"&gt;       &lt;CommentItem v-for=\"(item, index) in lastComments\" :key=\"index\" :item=\"item\"&gt;&lt;\/CommentItem&gt;     &lt;\/b-col&gt;   &lt;\/b-row&gt; &lt;\/template&gt;  &lt;script&gt; import CommentForm from '@\/components\/CommentForm.vue'; import CommentItem from '@\/components\/CommentItem.vue'; import {   mapActions,   mapGetters, } from 'vuex'  export default {   name: 'Article',   components: {     CommentForm,     CommentItem,   },   computed: {     ...mapGetters([       'lastComments',       'nextArticle',       'prevArticle',     ]),     articleId() {       return this.$route.params['post_id'] || null;     },     article() {       return this.$store.state.blog.activeArticle;     },   },   methods: {     ...mapActions([       'loadComments',       'loadActiveArticle',     ]),     getArticleRoute(item) {       return {         name: 'Article',         params: {           post_id: item.id,         },       };     },   },   mounted() {     this.loadComments();     this.loadActiveArticle(this.articleId);   },   watch: {     articleId(value) {       this.loadActiveArticle(value);     },   }, } &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0418 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0430\u043c\u0438\u0445 \u0433\u0435\u0442\u0442\u0435\u0440\u043e\u0432:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/store\/modules\/blog.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">...     prevArticle(state) {       let prevItem = null;       if (state.activeArticle) {         state.articles.forEach((item, index) =&gt; {           if (item.id == state.activeArticle.id) {             prevItem = state.articles[index-1] || null;           }         });       }       return prevItem;     },     nextArticle(state) {       let nextItem = null;       if (state.activeArticle) {         state.articles.forEach((item, index) =&gt; {           if (item.id == state.activeArticle.id) {             nextItem = state.articles[index+1] || null;           }         });       }       return nextItem;     }, ... <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0418 \u043d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c URL \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0442\u0430\u0442\u044c\u0438, \u0441 \u00abarticle-123\u00bb \u043d\u0430 \u00abpost-123\u00bb. \u0422\u0430\u043a \u043a\u0430\u043a \u0432\u043e \u0432\u0441\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b, \u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0431\u043b\u043e\u043d \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/router\/blog\/index.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">export default [   {     path: '\/cat-:category_id',     name: 'Category',     component: () =&gt; import('@\/pages\/Category.vue'),   },   {     path: '\/post-:post_id',     name: 'Article',     component: () =&gt; import('@\/pages\/Article.vue'),   }, ]; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<h2>\u041f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u043b\u0438\u0442\u0435\u0440\u0430\u0442\u0443\u0440\u0430<\/h2>\n<p>  <\/p>\n<ol>\n<li><a href=\"https:\/\/vuex.vuejs.org\/ru\/guide\/\" rel=\"nofollow\">vuex.vuejs.org\/ru\/guide<\/a><\/li>\n<li><a href=\"https:\/\/cli.vuejs.org\/ru\/guide\/\" rel=\"nofollow\">cli.vuejs.org\/ru\/guide<\/a><\/li>\n<li><a href=\"https:\/\/router.vuejs.org\/ru\/\" rel=\"nofollow\">router.vuejs.org\/ru<\/a><\/li>\n<\/ol>\n<h2>P.S.<\/h2>\n<p>  \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0447\u0442\u043e-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438\/\u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c:  <\/p>\n<ul>\n<li>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u043e\u043c, \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0432 \u0432\u0438\u0434\u0435 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0438 \u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u0440\u044f\u043c\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a API.<\/li>\n<li>\u041c\u043e\u0434\u0435\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u0432\u0441\u0435 \u0441\u0432\u044f\u0437\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438. \u0422\u0430\u043a\u0436\u0435 \u041d\u0415 \u043e\u0431\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u043a API.<\/li>\n<li>\u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 (vuex) \u0441\u0432\u044f\u0437\u0443\u044e\u0449\u0435\u0435 \u0437\u0432\u0435\u043d\u043e \u0432\u0441\u0435\u0445 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445: \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0443 API \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043c\u043e\u0434\u0435\u043b\u0438, \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/li>\n<\/ul>\n<p>  \u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u0430\u043a:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/di\/qv\/gh\/diqvghmwyg2-ottosprcasqghi8.png\"><\/p>\n<p>  \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u0439 \u0441\u0445\u0435\u043c\u0435 \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0437\u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0442\u0440\u0435\u043c\u044f \u044e\u043d\u0438\u0442\u0430\u043c\u0438:  <\/p>\n<ul>\n<li>\u041c\u0438\u0441\u0442\u0435\u0440 \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u2014 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u0438, \u0438 \u043a\u0430\u043a\u0438\u0435 \u0433\u0435\u0442\u0442\u0435\u0440\u044b \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430;<\/li>\n<li>\u041c\u0438\u0441\u0442\u0435\u0440 \u0444\u0440\u043e\u043d\u0442 \u2014 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438 \u0438 Vuex-\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u043e\u043c \u0438 \u0432\u0441\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0447\u0442\u043e \u043d\u0435 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043c\u0438\u0441\u0442\u0435\u0440\u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0438;<\/li>\n<li>\u041c\u0438\u0441\u0442\u0435\u0440 \u0431\u044d\u043a \u2014 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 API \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0431\u044d\u043a\u044d\u043d\u0434\u0430.<\/li>\n<\/ul>\n<p>  \u0412\u0441\u0435 \u044e\u043d\u0438\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430, \u0435\u0441\u043b\u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u0433\u043e\u0432\u043e\u0440\u0435\u043d\u044b \u0432\u0441\u0435 \u0442\u043e\u0447\u043a\u0438 \u0441\u043e\u043f\u0440\u0438\u043a\u043e\u0441\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 (\u0432 \u043e\u0431\u0449\u0435\u043c \u0435\u0441\u043b\u0438 \u0434\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0431\u044b\u043b\u043e \u043a\u0430\u043a\u043e\u0435-\u043d\u0438\u043a\u0430\u043a\u043e\u0435 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435).<\/p>\n<p>  \u041b\u0438\u0431\u043e \u0435\u0441\u043b\u0438 \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043d\u0435\u0442, \u0442\u043e \u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0438\u0434\u0442\u0438 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0441\u0432\u0435\u0440\u0445\u0443-\u0432\u043d\u0438\u0437, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u043d\u044c\u0448\u0435 \u0431\u044b\u043b\u043e \u0447\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c (\u0432\u044b\u043a\u0430\u0442\u0438\u0442\u044c MVP).<\/p>\n<p>  \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c\u0438: <a href=\"https:\/\/github.com\/irpsv\/vue-blog-habr\" rel=\"nofollow\">github.com\/irpsv\/vue-blog-habr<\/a><\/div>\n<p>               <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d() } } }t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>      <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\/483064\/\"> https:\/\/habr.com\/ru\/post\/483064\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/483064\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sv\/wv\/ux\/svwvuxu3tfp4xm_e46t5vv9u50m.png\"><\/p>\n<p>  \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0444\u0440\u043e\u043d\u0442\u0430 \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u043e\u0433\u043e \u0431\u043b\u043e\u0433\u0430 \u043d\u0430 Vue \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0441\u0435\u0445 \u043f\u0440\u0435\u043b\u0435\u0441\u0442\u0435\u0439 Vue \u0432\u043a\u043b\u044e\u0447\u0430\u044f Vuex \u0438 Router. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0438 \u0440\u043e\u0443\u0442\u0435\u0440\u043e\u043c.  <\/p>\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-296832","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/296832","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=296832"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/296832\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=296832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=296832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=296832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}