{"id":407698,"date":"2024-06-29T19:42:31","date_gmt":"2024-06-29T19:42:31","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=407698"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=407698","title":{"rendered":"Vuetify \u200a\u2014 \u200a\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n
<\/figcaption><\/figure>\n

\u0425\u043e\u0442\u044c UI \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0434\u043b\u044f Vue.js \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u043c\u043d\u043e\u0433\u043e, \u043d\u043e Vuetify \u043a\u0430\u043a \u0440\u0430\u0437 \u0437\u0434\u0435\u0441\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u043f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043f\u0435\u0440\u0435\u0434\u0438 \u0434\u0440\u0443\u0433\u0438\u0445. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0432 \u044d\u0442\u043e\u0439 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e\u0431 \u0434\u0430\u043d\u043d\u043e\u043c UI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435, \u0435\u0433\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0435\u0433\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043a \u0447\u0435\u043c\u0443 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c. \u0418 \u0447\u0435\u0441\u0442\u043d\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u043c\u043d\u043e\u0433\u043e \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u043f\u043e\u0434 \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e Vuetify.<\/p>\n

P.S. \u0412\u043e\u0442 \u0441\u044b\u043b\u043b\u043a\u0430 \u043d\u0430 GitHub<\/a> \u0441 \u043a\u043e\u0434\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n

\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435\/\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430<\/h2>\n

\u041e\u043a\u0435\u0439, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u0447\u0442\u043e \u0432\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0432\u0441\u0435 \u0442\u0430\u043a\u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f Vuetify \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0441\u0432\u043e\u0451 \u043f\u0435\u0440\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0435\u0433\u043e. \u0418 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438, \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u043e\u0435 Vue CLI \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e npm:<\/p>\n

vue create vuetify-app<\/code><\/pre>\n
\u0412\u0430\u0436\u043d\u043e<\/strong>, \u043d\u0430\u0434\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u043b\u043e \u0432\u0435\u0440\u0441\u0438\u044e Vue 2.0, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432 Vuetify \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0438\u0434\u0451\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f Vue 2.0 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u200a\u2014\u200a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c UI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043a\u0430\u043a \u043f\u043b\u0430\u0433\u0438\u043d:<\/p>\n
vue add vuetify<\/code><\/pre>\n
\u041d\u0430\u0441 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0435\u0441\u0435\u0442, \u0438 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e V3 (\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430), \u0442\u043e \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0440\u0435\u0441\u0435\u0442 \u201cDefault\u201d:<\/p>\n
<\/figcaption><\/figure>\n
\u041a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 Vuetify \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c\u0441\u044f, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n
npm run serve<\/code><\/pre>\n
\u0418 \u043e\u0442\u043a\u0440\u044b\u0432 https:\/\/localhost:8080<\/a> \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u0442 Vuetify \u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u0441\u044b\u043b\u043b\u043a\u0430\u043c\u0438:<\/p>\n
<\/figcaption><\/figure>\n
\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u0442\u044c \u0443\u0436\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n
\u0422\u0430\u043a \u043e \u0447\u0435\u043c \u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435?<\/h2>\n
\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u0432\u0435\u0434\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0443\u0436\u0435 Vue CLI \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 Vuetify, \u043d\u043e \u044f \u0442\u0430\u043a \u0438 \u043d\u0435 \u0441\u043a\u0430\u0437\u0430\u043b \u0447\u0442\u043e \u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041c\u043e\u0439 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0435 \u0435\u0434\u044b \u200a\u2014\u200a \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u0435\u043c\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
\u041d\u043e \u043f\u0435\u0440\u0435\u0434 \u044d\u0442\u0438\u043c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c Vue Router:<\/p>\n
vue add router<\/code><\/pre>\n
\u041a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u043c\u043e\u0436\u0435\u0442 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0431\u044b\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432 commit, \u043c\u044b \u0437\u0434\u0435\u0441\u044c \u043f\u0438\u0448\u0435\u043c \u201cy\u201d (\u0442.\u0435. yes) \u0438 \u0434\u0432\u0438\u0433\u0430\u0435\u043c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435:<\/p>\n
<\/figcaption><\/figure>\n
\u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043d\u0430\u0441 \u0441\u043f\u0440\u043e\u0441\u0438\u0442 \u0445\u043e\u0442\u0438\u043c \u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0436\u0438\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0432 \u043c\u0430\u0440\u0448\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438, \u0438 \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0442\u044b\u043a\u0430\u0435\u043c \u201cy\u201d:<\/p>\n
<\/figcaption><\/figure>\n
\u0412\u043e\u0442 \u0442\u0435\u043f\u0435\u0440\u044c Vue Router \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d, \u0438 \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0443\u0431\u0440\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0432 src\/router\/index.js<\/strong> \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u0441\u043d\u043e\u0432\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u200a\u2014\u200a \u043d\u0435 \u0431\u044b\u043b\u043e \u043e\u0448\u0438\u0431\u043e\u043a:<\/p>\n
\/\/ \u0424\u0430\u0439\u043b src\/router\/index.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [    ] const router = new VueRouter({   mode: 'history',   base: process.env.BASE_URL,   routes }) export default router<\/code><\/pre>\n
\u0424\u0430\u0439\u043b \u043c\u0430\u0440\u0448\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d \u0438 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432, \u043d\u0443 \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0444\u0430\u0439\u043b App.vue<\/strong>:<\/p>\n
<!-- App.vue --> <template>   <div id=\"app\">     <!-- \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0434\u0435\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u0434-->   <\/div> <\/template> <script> export default {   name: 'App' } <\/script><\/code><\/pre>\n
\u0425\u043e\u0440\u043e\u0448\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u043d\u0430\u0448\u0438 \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u200a\u2014\u200a \u0430 \u0441\u0430\u043c\u043e\u0435 \u043b\u0443\u0447\u0448\u0435\u0435 \u044d\u0442\u043e \u0442\u043e \u200a\u2014\u200a \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n
Layout<\/h2>\n
\u0412 Vuetify \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u044f \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u043d\u0430\u044f \u0433\u0438\u0431\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0441\u0435\u0442\u043a\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0418 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u0441 \u043d\u0435\u0439 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0432\u0443\u043c\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u044d\u0442\u043e v-app<\/strong> \u0438 v-main<\/strong>. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c App.vue<\/strong> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0445:<\/p>\n
<template>   <v-app>         <v-main>    <\/v-main>        <\/v-app> <\/template> <script> export default {   name: 'App' } <\/script><\/code><\/pre>\n
\u0421 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 v-app<\/strong> \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u043d\u0438\u043c\u043e\u043c \u0442\u0435\u0433\u0430 <div> \u0441 id=\u201dapp\u201d, \u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 v-main<\/strong> \u043c\u044b \u0443\u0436\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0445\u0435\u0434\u0435\u0440 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 v-app-bar<\/strong>:<\/p>\n
<template>   <v-app>          <v-app-bar       app     >          <\/v-app-bar>          <v-main>     <\/v-main>        <\/v-app> <\/template> <!-- <script> --><\/code><\/pre>\n
\u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u200a\u2014\u200a \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n
\"\u0410
\u0410 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0443\u0441\u0442\u043e\u0432\u0430\u0442\u043e<\/figcaption><\/figure>\n
\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0435\u0442\u0443 \u043d\u0438\u0447\u0435\u0433\u043e \u043a\u0440\u043e\u043c\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u0445\u0435\u0434\u0435\u0440\u0430. \u041e\u0431\u044a\u044f\u0441\u043d\u044e \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0430\u0442\u0440\u0438\u0431\u0443\u0442 app<\/strong> \u0432 v-app-bar<\/strong>. \u041a\u043e\u0433\u0434\u0430 Vuetify \u0432\u0438\u0434\u0438\u0442 \u0447\u0442\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 v-app-bar<\/strong> \u0435\u0441\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 app<\/strong>, \u0442\u043e \u043e\u043d \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u0447\u0442\u043e \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044c layout\u2019a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041c\u043d\u043e\u0433\u0438\u0435 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0445\u0435\u0434\u0435\u0440 \u043f\u0435\u0440\u0435\u0434 v-main<\/strong>, \u043e\u0442\u0432\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439: \u0432 v-main<\/strong> \u0431\u0443\u0434\u0435\u0442 \u0443\u0436\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 router-view<\/strong> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432, \u0430 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430\u0448 \u0445\u0435\u0434\u0435\u0440 \u044d\u0442\u043e \u043d\u0435 \u0441\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u200a\u2014\u200a \u0442\u043e \u044f \u0438 \u0432\u044b\u043d\u0435\u0441 \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c v-main<\/strong>.<\/p>\n
\u041c\u043d\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0446\u0432\u0435\u0442 \u0445\u0435\u0434\u0435\u0440\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0433\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 color<\/strong>:<\/p>\n
<template>   <v-app>          <v-app-bar       app       color=\"red\"     >       <!-- \u0421\u0435\u0439\u0447\u0430\u0441 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u044e\u0434\u0430 title -->     <\/v-app-bar>          <v-main>       <!-- \u041a\u043e\u043d\u0442\u0435\u043d\u0442 -->     <\/v-main>        <\/v-app> <\/template><\/code><\/pre>\n
\u041e\u043a\u0435\u0439, \u0438 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440? \u0422\u043e \u0432\u043e\u0442 \u0447\u0442\u043e \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0443\u0432\u0438\u0434\u0438\u043c:<\/p>\n
\"\u0421
\u0421 \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0445\u0435\u0434\u0435\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0443\u0436\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043b\u0443\u0447\u0448\u0435<\/figcaption><\/figure>\n
\u041a\u0440\u0443\u0442\u043e, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0443\u0436\u0435 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442? \u0414\u0430, \u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u044d\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0432 \u0445\u0435\u0434\u0435\u0440 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043c\u0430\u0440\u0448\u0443\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 v-main<\/strong>:<\/p>\n
<template>   <v-app>          <v-app-bar       app       color=\"red\"     >       <v-app-bar-title>         <h3 class=\"text-h4 white--text\">iFood<\/h3>       <\/v-app-bar-title>     <\/v-app-bar>          <v-main>       <router-view><\/router-view>     <\/v-main>        <\/v-app> <\/template><\/code><\/pre>\n
\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 v-app-bar-title<\/strong>, \u0438 \u0443\u0436\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0442\u0435\u0433 h4 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u043e\u0442 Vuetify \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435:<\/p>\n
\"\u0412\u043e\u0442
\u0412\u043e\u0442 \u0438 \u043d\u0430\u0448 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f<\/figcaption><\/figure>\n
\u0421\u0443\u043f\u0435\u0440, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0435\u0441\u0442\u044c. \u0425\u043e\u0440\u043e\u0448\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/h2>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 src\/components\/List.vue<\/strong> \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432\u0435\u0441\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JSON \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e items_list<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438 \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0439:<\/p>\n
<!-- src\/components\/List.vue --> <template>   <div>     <!-- \u041f\u043e\u043a\u0430 \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439 div -->   <\/div> <\/template> <script> export default {   name: 'List',   data: () => ({     items_list: [       {         id: 0,         title: '\u0417\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 1',         description: '\u042d\u0442\u043e \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0441\u0430\u043c\u043e\u0435 \u043a\u0440\u0443\u0442\u043e\u0435 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u043d\u0430\u0442\u044c',         img: '' \/\/ \u0417\u0434\u0435\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043b\u044e\u0431\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435       },       {         id: 1,         title: '\u0417\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 2',         description: 'Lorem ipsum',         img: '' \/\/ \u0417\u0434\u0435\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043b\u044e\u0431\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435       }       \/\/ \u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432 \u0441\u043f\u0438\u0441\u043e\u043a     ]   }) } <\/script><\/code><\/pre>\n
\u041e\u043a\u0435\u0439, \u0441\u043f\u0438\u0441\u043e\u043a \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c, \u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0430\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0442 Vuetify \u0431\u0443\u0434\u0435\u043c \u0435\u0433\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c? \u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c v-card<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u043e \u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u0445 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e. \u041d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f Bootstrap Vue<\/strong> \u0447\u0442\u043e\u0431\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n
<!-- src\/components\/List.vue --> <template>   <v-container> <!-- \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438 \u0431\u0443\u0434\u0443\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 -->          <v-row class=\"list__cafes-title\"> <!-- \u0412 \u044d\u0442\u043e row \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 -->       <v-col>         <h2 class=\"text-center text-h3 py-3\">List of cafes<\/h2>       <\/v-col>     <\/v-row>          <v-row class=\"list__cafes-content\">       <v-col md=\"4\" v-for=\"item in items_list\" :key=\"item.id\">         <v-card>                      <v-img             height=\"250\"             :src=\"item.img\"           ><\/v-img> <!-- \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e v-img \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 -->                      <v-card-title> <!-- \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f -->             <h3 class=\"text-h4\">{{ item.title }}<\/h3>           <\/v-card-title>                      <v-card-text> <!-- \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f -->             <p class=\"text-body-1\">{{ item.description }}<\/p>           <\/v-card-text>                  <\/v-card>       <\/v-col>     <\/v-row>      <\/v-container> <\/template><\/code><\/pre>\n
\u041c\u043d\u043e\u0433\u0438\u0435 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0447\u0442\u043e \u0432 row\u2019e \u0433\u0434\u0435 \u043c\u044b \u0443\u0436\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u0430\u043c\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e v-for<\/strong> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 v-col<\/strong> \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442 md=\u201d4<\/strong>«. \u0422\u0435 \u043a\u0442\u043e \u0443\u0447\u0438\u043b\u0438 Bootstrap \u0443\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0443\u0436\u0435\u043d \u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0438 \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u0437\u0430\u0434\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043b\u043e\u043d\u043e\u043a. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u044f \u0443\u043a\u0430\u0437\u0430\u043b \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u0430\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0430 \u0438\u043c\u0435\u043b\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u044b 4\/12 \u0438 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043f\u043e 3 \u0448\u0442\u0443\u043a\u0438 \u0432 \u043e\u0434\u0438\u043d \u0440\u044f\u0434. \u041e\u043a\u0435\u0439, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0432\u043e\u0434\u0430 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u0433\u043e\u0442\u043e\u0432, \u043d\u0430\u0434\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0432 \u0444\u0430\u0439\u043b src\/router\/index.js<\/strong>:<\/p>\n
import Vue from 'vue' import VueRouter from 'vue-router' import List from '..\/components\/List.vue' Vue.use(VueRouter) const routes = [   {     path: '\/',     name: 'List',     component: List   } ] const router = new VueRouter({   mode: 'history',   base: process.env.BASE_URL,   routes }) export default router<\/code><\/pre>\n
\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0432\u043e\u0434\u0430:<\/p>\n
\"\u041d\u0430
\u041d\u0430 \u0434\u0435\u043a\u0441\u0442\u043e\u043f \u0438 \u043d\u0430 \u043c\u043e\u0431\u0430\u0439\u043b \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e, \u043c\u043e\u0436\u0435\u043c \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435<\/figcaption><\/figure>\n
\u0421\u0443\u043f\u0435\u0440\u200b \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u044f \u0434\u0443\u043c\u0430\u044e \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442\u0443 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0431\u0440\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 API \u200a\u2014\u200a \u0442\u043e \u0441\u0430\u043c\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0439.<\/p>\n
\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f<\/h4>\n
\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 src\/components\/CafeView.vue<\/strong> \u0438 \u043f\u0435\u0440\u0432\u043e\u0435 \u0447\u0442\u043e \u0432 \u043d\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c, \u0435\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0439 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c CafeInfo.vue<\/strong>, \u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u044d\u0442\u0438\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0443\u0436\u0435 \u0447\u0435\u043c-\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 CafeView.vue<\/strong>:<\/p>\n
<!-- src\/components\/CafeView.vue --> <template>   <v-container>          <CafeInfo><\/CafeInfo> <!-- \u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c -->        <\/v-container> <\/template>  <script> import CafeInfo from '.\/Cafe\/CafeInfo.vue' export default {   name: 'CafeView',   components: {     CafeInfo   } } <\/script><\/code><\/pre>\n
\u0425\u043e\u0440\u043e\u0448\u043e, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 CafeInfo.vue<\/strong>:<\/p>\n
<!-- src\/components\/Cafe\/CafeInfo.vue --> <template>   <v-row>          <v-col md=\"6\">              <v-card class=\"h-100\">         <v-img           height=\"350\"           :src=\"main_info.img\"           class=\"d-flex align-end\"         >           <!--             \u0412\u044b\u0448\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0447\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u043e\u0432 d-flex \u0438 align-end, \u043c\u044b \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b\u0438 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 display: flex; \u0438 align-items: flex-end. \u042d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432\u043d\u0438\u0437\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f           -->           <h2 class=\"text-h4 ml-4 mb-4 white--text\">{{ main_info.title }}<\/h2>         <\/v-img>       <\/v-card>            <\/v-col>     <v-col md=\"6\">               <v-card class=\"h-100\">                    <v-card-text>           <p class=\"font-weight-light\">{{ main_info.description }}<\/p>          <\/v-card-text>                  <\/v-card>            <\/v-col>        <\/v-row>    <\/template> <script> export default {   name: 'CafeInfo',   data: () => ({     main_info: {       img: 'https:\/\/example.com\/image_1.jpg',       title: '\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f',       description: '\u0410 \u0437\u0434\u0435\u0441\u044c \u0443\u0436\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f'     }   }) } <\/script>  <style> .h-100 {   height: 100%; } <\/style><\/code><\/pre>\n
\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 data \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0433\u043e\u0442\u043e\u0432 \u200a\u2014\u200a \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 CafeView.vue <\/strong>\u0432 src\/routes\/index.js<\/strong>:<\/p>\n
import Vue from 'vue' import VueRouter from 'vue-router' import List from '..\/components\/List.vue' import CafeView from '..\/components\/CafeView.vue'  Vue.use(VueRouter)  const routes = [   {     path: '\/',     name: 'List',     component: List   },   {     path: '\/cafe\/view',     name: 'CafeView',     component: CafeView   } ] \/\/ ...<\/code><\/pre>\n
\u041e\u043a\u0435\u0439, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043d\u0430 url http:\/\/localhost:8080\/cafe\/view:<\/a><\/p>\n
<\/figcaption><\/figure>\n
\u0412\u0438\u0434 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431 \u0435\u0449\u0451 \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u0435\u0435. \u041d\u043e \u043f\u0443\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a \u0441 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 Vuetify \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0441\u044b\u043b\u043b\u043a\u0443 \u043d\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 List.vue<\/strong>:<\/p>\n
<!-- src\/components\/List.vue --> <template>   <v-container>          <v-row class=\"list__cafes-title\">       <v-col>         <h2 class=\"text-center text-h3 py-3\">List of cafes<\/h2>       <\/v-col>     <\/v-row>          <v-row class=\"list__cafes-content\">       <v-col md=\"4\" v-for=\"item in items_list\" :key=\"item.id\">                  <v-card>                      <v-img             height=\"250\"             :src=\"item.img\"           ><\/v-img>                      <v-card-title>             <router-link to=\"\/cafe\/view\">               <h3 class=\"text-h4\">{{ item.title }}<\/h3>             <\/router-link>           <\/v-card-title>                      <v-card-text>             <p class=\"text-body-1\">{{ item.description }}<\/p>           <\/v-card-text>                    <\/v-card>                <\/v-col>     <\/v-row>   <\/v-container> <\/template><\/code><\/pre>\n
\u0412 \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0435\u0449\u0451 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 url, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u043e \u0432 \u0441\u0435\u0431\u0435 \u043b\u0438\u043d\u043a\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u200a\u2014\u200a \u043d\u043e \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0430\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443 \u043d\u0430\u0441 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0435, \u0442\u043e \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a. \u0412\u044b\u0432\u043e\u0434\u0430 \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f\u200a\u2014\u200a\u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u041d\u0443\u0436\u043d\u043e \u0435\u0449\u0451 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0432\u043e\u0434\u0430 \u043c\u0435\u043d\u044e \u0442\u043e\u0432\u0430\u0440\u043e\u0432 (\u0435\u0434\u044b) \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 CafeMenu.vue<\/strong>.<\/p>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u0435\u043d\u044e \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f<\/h2>\n
\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 src\/components\/Cafe\/CafeMenu.vue<\/strong>, \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e\u0431 \u0442\u043e\u0432\u0430\u0440\u0430\u0445:<\/p>\n
<!-- src\/components\/Cafe\/CafeMenu.vue --> <template>   <v-row>     <!-- \u041f\u043e\u043a\u0430 \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439 row -->   <\/v-row> <\/template>  <script> export default {   name: 'CafeMenu',   data: () => ({     menu_items: [       {         id: 0,         name: 'King Burger',         img: 'https:\/\/example.com\/burger_1.png',         price: 34.99       },       {         id: 1,         name: 'Dark Burger',         img: 'https:\/\/example.com\/burger_2.png',         price: 39.99       },       \/\/ \u041c\u043e\u0436\u0435\u0442\u0435 \u0442\u0430\u043a\u0436\u0435 \u0434\u0430\u043b\u044c\u0448\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u043e\u0432\u0430\u0440\u044b      ]   }) } <\/script><\/code><\/pre>\n
\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u043e\u0432\u0430\u0440\u044b \u0432 \u0441\u043f\u0438\u0441\u043e\u043a. \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435:<\/p>\n
<!-- src\/components\/Cafe\/CafeMenu.vue --> <template>   <v-row>          <v-col md=\"6\">       <v-card>                  <v-img           height=\"250\"           src=\"https:\/\/example.com\/menu_img.png\"           class=\"d-flex align-end\"         >           <h2 class=\"ml-4 mb-4 text-h3 white--text\">MENU<\/h2>         <\/v-img>                <\/v-card>     <\/v-col>          <v-col md=\"6\">       <v-card>                  <v-card-text>           <!--             \u0417\u0434\u0435\u0441\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0442\u043e\u0432\u0430\u0440\u044b,             \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a           -->           <v-list-item-group>                          <v-list-item v-for=\"item in menu_items\" :key=\"item.id\">                              <v-list-item-avatar>                 <!-- \u0412\u044b\u0432\u043e\u0434\u0438\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0432\u0430\u0440\u0430 -->                 <img :src=\"item.img\" fluid \/>               <\/v-list-item-avatar>                              <v-list-item-content>                                  <v-list-item-title>                   <!-- \u0412\u044b\u0432\u043e\u0434\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u043e\u0432\u0430\u0440\u0430 -->                   <h5 class=\"text-h5\">{{ item.name }}<\/h5>                 <\/v-list-item-title>                                  <v-list-item-subtitle>                   <!-- \u0412\u044b\u0432\u043e\u0434\u0438\u043c \u0446\u0435\u043d\u0443 \u0442\u043e\u0432\u0430\u0440\u0443 -->                   <b>{{ item.price }}<\/b>                 <\/v-list-item-subtitle>                                <\/v-list-item-content>                              <v-list-item-action>                 <!-- \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u043f\u043e\u043a\u0443\u043f\u043a\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 -->                 <v-btn icon>                   <v-icon>mdi-plus<\/v-icon>                 <\/v-btn>               <\/v-list-item-action>                            <\/v-list-item>                        <\/v-list-item-group>         <\/v-card-text>                <\/v-card>          <\/v-col>        <\/v-row> <\/template><\/code><\/pre>\n
\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 v-list-item-group<\/strong> \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0441\u043f\u0438\u0441\u043e\u043a, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e v-for<\/strong> \u0432 v-list-item<\/strong> \u0432\u044b\u0432\u0435\u043b\u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0442\u043e\u0432\u0430\u0440\u043e\u0432. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 v-list-item-content<\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0430\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a (v-list-item-title<\/strong>) \u0438 \u0446\u0435\u043d\u0443 (\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e v-list-item-subtitle<\/strong>). \u0410 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e v-list-item-action<\/strong>, \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u043f\u043e\u043a\u0443\u043f\u043a\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 (v-btn<\/strong>), \u0430\u0442\u0440\u0438\u0431\u0443\u0442 icon \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0447\u0442\u043e\u0431\u044b \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043a\u043e\u043d\u043a\u0430.\u00a0<\/p>\n
\u0412\u043d\u0443\u0442\u0440\u0438 v-icon \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0438\u043a\u043e\u043d\u043a\u0443 \u043e\u0442 Material Design. \u041e\u043a\u0435\u0439, \u0442\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u0433\u0434\u0430 \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u043b \u0447\u0442\u043e \u043a \u0447\u0435\u043c\u0443\u200a\u2014\u200a\u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n
<!-- src\/components\/CafeView.vue --> <template>   <v-container>          <CafeInfo><\/CafeInfo>     <CafeMenu><\/CafeMenu>        <\/v-container> <\/template>  <script> import CafeInfo from '.\/Cafe\/CafeInfo.vue' import CafeMenu from '.\/Cafe\/CafeMenu.vue' export default {   name: 'CafeView',   components: {     CafeInfo,     CafeMenu   } } <\/script><\/code><\/pre>\n
\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
<\/figcaption><\/figure>\n
\u041a\u0440\u0443\u0442\u043e, \u043d\u043e \u043d\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043c\u0435\u043d\u044e\u0448\u043a\u0438 \u0432 \u0445\u0435\u0434\u0435\u0440\u0435 \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0451 \u0441\u0435\u0439\u0447\u0430\u0441 \u0434\u043e\u0431\u0430\u0432\u0438\u043c.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/h4>\n
\u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App.vue<\/strong> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 v-navigation-drawer<\/strong>:<\/p>\n
<template>   <v-app>          <v-navigation-drawer       app       left     ><\/v-navigation-drawer>          <v-app-bar       app       color=\"red\"     >       <v-app-bar-title>         <h3 class=\"text-h4 white--text\">iFood<\/h3>       <\/v-app-bar-title>     <\/v-app-bar>          <v-main>       <router-view><\/router-view>     <\/v-main>        <\/v-app> <\/template>  <script> export default {   name: 'App' } <\/script><\/code><\/pre>\n
\u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u0435\u043d\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b \u0430\u0442\u0440\u0438\u0431\u0443\u0442 left<\/strong> \u0447\u0442\u043e\u0431\u044b \u043f\u0443\u0441\u0442\u043e\u0435 \u043c\u0435\u043d\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0441 \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b:<\/p>\n
<\/figcaption><\/figure>\n
\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0432\u0430\u0442\u043e, \u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u044d\u0442\u043e \u043f\u043e\u0444\u0438\u043a\u0441\u0438\u043c. \u0414\u043e\u0431\u0430\u0432\u043b\u044e \u0442\u0430\u043a\u0436\u0435 \u0447\u0442\u043e v-navigation-drawer<\/strong> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 layout \u0441\u0438\u0441\u0442\u0435\u043c\u044b Vuetify, \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043c\u0435\u043d\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u043c\u0435\u043d\u044e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u043e \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443 \u0432 \u0445\u0435\u0434\u0435\u0440\u0435:<\/p>\n
<template>   <v-app>          <v-navigation-drawer       app       left       absolute       temporary       v-model=\"drawer\"     ><\/v-navigation-drawer>          <v-app-bar       app       color=\"red\"     >       <v-app-bar-nav-icon @click=\"drawer = !drawer\">       <\/v-app-bar-nav-icon>       <v-app-bar-title>         <h3 class=\"text-h4 white--text\">iFood<\/h3>       <\/v-app-bar-title>     <\/v-app-bar>          <v-main>       <router-view><\/router-view>     <\/v-main>        <\/v-app> <\/template>  <script> export default {   name: 'App',   data: () => ({     drawer: false   }) } <\/script><\/code><\/pre>\n
\u0417\u0430\u0447\u0435\u043c \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b absolute<\/strong>, temporary<\/strong> \u0438 v-model<\/strong> \u0432 v-navigation-drawer<\/strong>? \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, absolute<\/strong> \u0437\u0430\u0434\u0430\u0435\u0442 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e position: absolute;<\/strong> \u0430 \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u0430 \u043c\u0435\u043d\u044e\u0448\u043a\u0430 \u0438 \u043d\u0430 \u043c\u043e\u0431\u0430\u0439\u043b \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0430\u0441\u044c. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, temporary \u0437\u0430\u0434\u0430\u0435\u0442 z-index<\/strong> \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438\u200a\u2014\u200a\u0447\u0442\u043e\u0431\u044b \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0437\u0430\u043b\u0430\u0437\u0438\u043b\u0438 \u043d\u0430 \u043d\u0435\u0451.\u00a0<\/p>\n
\u0418 \u0432\u043e-\u0442\u0440\u0435\u0442\u044c\u0438\u0445, v-model<\/strong> \u0438\u043c\u0435\u0435\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e drawer, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f true<\/strong> \u0438\u043b\u0438 false<\/strong> \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u043d\u044e. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f drawer<\/strong> \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e true<\/strong>\u200a\u2014\u200a\u0442\u043e \u043c\u0435\u043d\u044e\u0448\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f. \u0415\u0441\u043b\u0438 false<\/strong>, \u0442\u043e \u043c\u0435\u043d\u044e\u0448\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043f\u0440\u044f\u0442\u0430\u043d\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u0442\u0435 \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u200a\u2014\u200a\u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0432 \u0445\u0435\u0434\u0435\u0440\u0435 \u0438\u043a\u043e\u043d\u043a\u0443 \u0438 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043d\u0435\u0451 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043b\u0430\u0437\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043c\u0435\u043d\u044e:<\/p>\n
\"\u0412\u043e\u0442
\u0412\u043e\u0442 \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0438 \u043c\u043e\u0436\u0435\u043c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0443 \u0432\u00a0\u0445\u0435\u0434\u0435\u0440\u0435<\/figcaption><\/figure>\n
\"\u0410
\u0410 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0441\u0430\u043c\u0443 \u0438\u043a\u043e\u043d\u043a\u0443 \u0432\u044b\u043b\u0430\u0437\u0438\u0442 \u043f\u0443\u0441\u0442\u043e\u0435 \u043c\u0435\u043d\u044e \u0441 \u043b\u0435\u0432\u043e\u0439\u00a0\u0441\u0442\u043e\u0440\u043e\u043d\u044b<\/figcaption><\/figure>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0447\u0435\u043c-\u0442\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043c\u0435\u043d\u044e, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0441 \u043f\u0443\u043d\u043a\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u043c\u0435\u043d\u044e:<\/p>\n
<!-- .\/ template --> <script> export default {   name: 'App',   data: () => ({     drawer: false,     menu_items: [       {         id: 0,         name: '\u0421\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f',         url: '\/'       },       {         id: 1,         name: '\u041e \u043d\u0430\u0441',         url: '#'       },       {         id: 2,         name: '\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b',         url: '#'       },       {         id: 3,         name: '\u041f\u043e\u043c\u043e\u0449\u044c',         url: '#'       }     ]   }) } <\/script><\/code><\/pre>\n
\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u0432\u0441\u0435 \u044d\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 v-navigation-drawer<\/strong>:<\/p>\n
<template>   <v-app>          <v-navigation-drawer       app       left       absolute       temporary       v-model=\"drawer\"     >              <v-list-item-group>                  <v-list-item v-for=\"item in menu_items\" :key=\"item.id\">           <v-list-item-title>             <router-link :to=\"item.url\">{{ item.name }}<\/router-link>           <\/v-list-item-title>         <\/v-list-item>                <\/v-list-item-group>            <\/v-navigation-drawer>          <v-app-bar       app       color=\"red\"     >       <v-app-bar-nav-icon @click=\"drawer = !drawer\"><\/v-app-bar-nav-icon>       <v-app-bar-title>         <h3 class=\"text-h4 white--text\">iFood<\/h3>       <\/v-app-bar-title>     <\/v-app-bar>          <v-main>       <router-view><\/router-view>     <\/v-main>        <\/v-app> <\/template><\/code><\/pre>\n
\u0413\u043e\u0442\u043e\u0432\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u0435\u0441\u043b\u0438 \u043c\u044b \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u043c\u0435\u043d\u044e \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n
<\/figcaption><\/figure>\n
\u0418 \u0432\u043e\u0442 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043c\u0435\u043d\u044e\u0448\u043a\u0430 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442 \u043d\u0435 \u043f\u0440\u044f\u043c \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043d\u043e \u043e\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0436\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041e\u043a\u0435\u0439, \u0438 \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f? \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0432\u044b\u0432\u043e\u0434\u043e\u043c \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0439, \u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u043e\u043c \u044d\u0442\u0438\u0445 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0439. \u0412\u0441\u0435 \u044d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u0430\u043a\u0438 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u043e\u200a\u2014\u200a\u0442\u043e \u043c\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u0443\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0441 Vuetify.<\/p>\n
\u0418\u0442\u043e\u0433<\/h2>\n
\u041e\u043a\u0435\u0439, \u043d\u0430\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043d\u0435\u043a\u0438\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e UI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0434\u043b\u044f Vue.js\u200a\u2014\u200aVuetify. \u041c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c\u200a\u2014\u200a\u043d\u043e \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b\u043e \u0441\u0442\u0430\u0442\u044c\u044e \u0435\u0449\u0451 \u0431\u043e\u043b\u0435\u0435 \u0434\u043b\u0438\u043d\u043d\u043e\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043f\u043e \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u0435, \u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043c\u043e\u0451 \u0432\u0438\u0434\u0435\u043e<\/a> \u0433\u0434\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u200a\u2014\u200a\u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0434\u0435\u0441\u044c \u0443\u0436\u0435 \u0438\u0434\u0451\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0439 \u0447\u0442\u043e \u0438 \u043a\u0430\u043a \u0438 \u043a\u0443\u0434\u0430. \u041a\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u0442\u044c.<\/p>\n
\u042f \u043b\u0438\u0448\u044c \u0441\u043a\u0430\u0436\u0443 \u0447\u0442\u043e \u0441\u0447\u0438\u0442\u0430\u044e Vuetify \u043b\u0443\u0447\u0448\u0438\u043c UI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c \u0434\u043b\u044f Vue.js, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0435\u0433\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043d\u043e\u0432\u043e\u0433\u043e Vue \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u0435\u0434\u044c \u0442\u0443\u0442 \u0443\u0436\u0435 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442, \u0438 \u043d\u0430\u043c \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u044b.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/575050\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
<\/figcaption><\/figure>\n
\u0425\u043e\u0442\u044c UI \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0434\u043b\u044f Vue.js \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u043c\u043d\u043e\u0433\u043e, \u043d\u043e Vuetify \u043a\u0430\u043a \u0440\u0430\u0437 \u0437\u0434\u0435\u0441\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u043f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043f\u0435\u0440\u0435\u0434\u0438 \u0434\u0440\u0443\u0433\u0438\u0445. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0432 \u044d\u0442\u043e\u0439 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e\u0431 \u0434\u0430\u043d\u043d\u043e\u043c UI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435, \u0435\u0433\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0435\u0433\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043a \u0447\u0435\u043c\u0443 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c. \u0418 \u0447\u0435\u0441\u0442\u043d\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u043c\u043d\u043e\u0433\u043e \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u043f\u043e\u0434 \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e Vuetify.<\/p>\n
P.S. \u0412\u043e\u0442 \u0441\u044b\u043b\u043b\u043a\u0430 \u043d\u0430 GitHub<\/a> \u0441 \u043a\u043e\u0434\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435\/\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430<\/h2>\n
\u041e\u043a\u0435\u0439, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u0447\u0442\u043e \u0432\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0432\u0441\u0435 \u0442\u0430\u043a\u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f Vuetify \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0441\u0432\u043e\u0451 \u043f\u0435\u0440\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0435\u0433\u043e. \u0418 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438, \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u043e\u0435 Vue CLI \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e npm:<\/p>\n
vue create vuetify-app<\/code><\/pre>\n
\u0412\u0430\u0436\u043d\u043e<\/strong>, \u043d\u0430\u0434\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u043b\u043e \u0432\u0435\u0440\u0441\u0438\u044e Vue 2.0, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432 Vuetify \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0438\u0434\u0451\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f Vue 2.0 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u200a\u2014\u200a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c UI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043a\u0430\u043a \u043f\u043b\u0430\u0433\u0438\u043d:<\/p>\n
vue add vuetify<\/code><\/pre>\n
\u041d\u0430\u0441 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0435\u0441\u0435\u0442, \u0438 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e V3 (\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430), \u0442\u043e \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0440\u0435\u0441\u0435\u0442 \u201cDefault\u201d:<\/p>\n
<\/figcaption><\/figure>\n
\u041a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 Vuetify \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c\u0441\u044f, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n
npm run serve<\/code><\/pre>\n
\u0418 \u043e\u0442\u043a\u0440\u044b\u0432 https:\/\/localhost:8080<\/a> \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u0442 Vuetify \u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u0441\u044b\u043b\u043b\u043a\u0430\u043c\u0438:<\/p>\n
<\/figcaption><\/figure>\n
\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u0442\u044c \u0443\u0436\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n
\u0422\u0430\u043a \u043e \u0447\u0435\u043c \u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435?<\/h2>\n
\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u0432\u0435\u0434\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0443\u0436\u0435 Vue CLI \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 Vuetify, \u043d\u043e \u044f \u0442\u0430\u043a \u0438 \u043d\u0435 \u0441\u043a\u0430\u0437\u0430\u043b \u0447\u0442\u043e \u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041c\u043e\u0439 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0435 \u0435\u0434\u044b \u200a\u2014\u200a \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u0435\u043c\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
\u041d\u043e \u043f\u0435\u0440\u0435\u0434 \u044d\u0442\u0438\u043c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c Vue Router:<\/p>\n
vue add router<\/code><\/pre>\n
\u041a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u043c\u043e\u0436\u0435\u0442 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0431\u044b\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432 commit, \u043c\u044b \u0437\u0434\u0435\u0441\u044c \u043f\u0438\u0448\u0435\u043c \u201cy\u201d (\u0442.\u0435. yes) \u0438 \u0434\u0432\u0438\u0433\u0430\u0435\u043c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435:<\/p>\n
<\/figcaption><\/figure>\n
\u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043d\u0430\u0441 \u0441\u043f\u0440\u043e\u0441\u0438\u0442 \u0445\u043e\u0442\u0438\u043c \u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0436\u0438\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0432 \u043c\u0430\u0440\u0448\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438, \u0438 \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0442\u044b\u043a\u0430\u0435\u043c \u201cy\u201d:<\/p>\n
<\/figcaption><\/figure>\n
\u0412\u043e\u0442 \u0442\u0435\u043f\u0435\u0440\u044c Vue Router \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d, \u0438 \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0443\u0431\u0440\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0432 src\/router\/index.js<\/strong> \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u0441\u043d\u043e\u0432\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u200a\u2014\u200a \u043d\u0435 \u0431\u044b\u043b\u043e \u043e\u0448\u0438\u0431\u043e\u043a:<\/p>\n
\/\/ \u0424\u0430\u0439\u043b src\/router\/index.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [    ] const router = new VueRouter({   mode: 'history',   base: process.env.BASE_URL,   routes }) export default router<\/code><\/pre>\n
\u0424\u0430\u0439\u043b \u043c\u0430\u0440\u0448\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d \u0438 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432, \u043d\u0443 \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0444\u0430\u0439\u043b App.vue<\/strong>:<\/p>\n
<!-- App.vue --> <template>   <div id=\"app\">     <!-- \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0434\u0435\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u0434-->   <\/div> <\/template> <script> export default {   name: 'App' } <\/script><\/code><\/pre>\n
\u0425\u043e\u0440\u043e\u0448\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u043d\u0430\u0448\u0438 \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u200a\u2014\u200a \u0430 \u0441\u0430\u043c\u043e\u0435 \u043b\u0443\u0447\u0448\u0435\u0435 \u044d\u0442\u043e \u0442\u043e \u200a\u2014\u200a \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n
Layout<\/h2>\n
\u0412 Vuetify \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u044f \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u043d\u0430\u044f \u0433\u0438\u0431\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0441\u0435\u0442\u043a\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0418 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u0441 \u043d\u0435\u0439 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0432\u0443\u043c\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u044d\u0442\u043e v-app<\/strong> \u0438 v-main<\/strong>. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c App.vue<\/strong> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0445:<\/p>\n
<template>   <v-app>         <v-main>    <\/v-main>        <\/v-app> <\/template> <script> export default {   name: 'App' } <\/script><\/code><\/pre>\n
\u0421 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 v-app<\/strong> \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u043d\u0438\u043c\u043e\u043c \u0442\u0435\u0433\u0430 <div> \u0441 id=\u201dapp\u201d, \u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 v-main<\/strong> \u043c\u044b \u0443\u0436\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0445\u0435\u0434\u0435\u0440 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 v-app-bar<\/strong>:<\/p>\n
<template>   <v-app>          <v-app-bar       app     >          <\/v-app-bar>          <v-main>     <\/v-main>        <\/v-app> <\/template> <!-- <script> --><\/code><\/pre>\n
\u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u200a\u2014\u200a \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n
\u0410 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0443\u0441\u0442\u043e\u0432\u0430\u0442\u043e<\/figcaption><\/figure>\n
\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0435\u0442\u0443 \u043d\u0438\u0447\u0435\u0433\u043e \u043a\u0440\u043e\u043c\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u0445\u0435\u0434\u0435\u0440\u0430. \u041e\u0431\u044a\u044f\u0441\u043d\u044e \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0430\u0442\u0440\u0438\u0431\u0443\u0442 app<\/strong> \u0432 v-app-bar<\/strong>. \u041a\u043e\u0433\u0434\u0430 Vuetify \u0432\u0438\u0434\u0438\u0442 \u0447\u0442\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 v-app-bar<\/strong> \u0435\u0441\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 app<\/strong>, \u0442\u043e \u043e\u043d \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u0447\u0442\u043e \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044c layout\u2019a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041c\u043d\u043e\u0433\u0438\u0435 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0445\u0435\u0434\u0435\u0440 \u043f\u0435\u0440\u0435\u0434 v-main<\/strong>, \u043e\u0442\u0432\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439: \u0432 v-main<\/strong> \u0431\u0443\u0434\u0435\u0442 \u0443\u0436\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 router-view<\/strong> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432, \u0430 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430\u0448 \u0445\u0435\u0434\u0435\u0440 \u044d\u0442\u043e \u043d\u0435 \u0441\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u200a\u2014\u200a \u0442\u043e \u044f \u0438 \u0432\u044b\u043d\u0435\u0441 \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c v-main<\/strong>.<\/p>\n
\u041c\u043d\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0446\u0432\u0435\u0442 \u0445\u0435\u0434\u0435\u0440\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0433\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 color<\/strong>:<\/p>\n
<template>   <v-app>          <v-app-bar       app       color=\"red\"     >       <!-- \u0421\u0435\u0439\u0447\u0430\u0441 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u044e\u0434\u0430 title -->     <\/v-app-bar>          <v-main>       <!-- \u041a\u043e\u043d\u0442\u0435\u043d\u0442 -->     <\/v-main>        <\/v-app> <\/template><\/code><\/pre>\n
\u041e\u043a\u0435\u0439, \u0438 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440? \u0422\u043e \u0432\u043e\u0442 \u0447\u0442\u043e \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0443\u0432\u0438\u0434\u0438\u043c:<\/p>\n
\u0421 \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0445\u0435\u0434\u0435\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0443\u0436\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043b\u0443\u0447\u0448\u0435<\/figcaption><\/figure>\n
\u041a\u0440\u0443\u0442\u043e, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0443\u0436\u0435 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442? \u0414\u0430, \u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u044d\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0432 \u0445\u0435\u0434\u0435\u0440 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043c\u0430\u0440\u0448\u0443\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 v-main<\/strong>:<\/p>\n
<template>   <v-app>          <v-app-bar       app       color=\"red\"     >       <v-app-bar-title>         <h3 class=\"text-h4 white--text\">iFood<\/h3>       <\/v-app-bar-title>     <\/v-app-bar>          <v-main>       <router-view><\/router-view>     <\/v-main>        <\/v-app> <\/template><\/code><\/pre>\n
\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 v-app-bar-title<\/strong>, \u0438 \u0443\u0436\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0442\u0435\u0433 h4 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u043e\u0442 Vuetify \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435:<\/p>\n
\u0412\u043e\u0442 \u0438 \u043d\u0430\u0448 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f<\/figcaption><\/figure>\n
\u0421\u0443\u043f\u0435\u0440, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0435\u0441\u0442\u044c. \u0425\u043e\u0440\u043e\u0448\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/h2>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 src\/components\/List.vue<\/strong> \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432\u0435\u0441\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JSON \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e items_list<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438 \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0439:<\/p>\n
<!-- src\/components\/List.vue --> <template>   <div>     <!-- \u041f\u043e\u043a\u0430 \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439 div -->   <\/div> <\/template> <script> export default {   name: 'List',   data: () => ({     items_list: [       {         id: 0,         title: '\u0417\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 1',         description: '\u042d\u0442\u043e \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0441\u0430\u043c\u043e\u0435 \u043a\u0440\u0443\u0442\u043e\u0435 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u043d\u0430\u0442\u044c',         img: '' \/\/ \u0417\u0434\u0435\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043b\u044e\u0431\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435       },       {         id: 1,         title: '\u0417\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 2',         description: 'Lorem ipsum',         img: '' \/\/ \u0417\u0434\u0435\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043b\u044e\u0431\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435       }       \/\/ \u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432 \u0441\u043f\u0438\u0441\u043e\u043a     ]   }) } <\/script><\/code><\/pre>\n
\u041e\u043a\u0435\u0439, \u0441\u043f\u0438\u0441\u043e\u043a \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c, \u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0430\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0442 Vuetify \u0431\u0443\u0434\u0435\u043c \u0435\u0433\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c? \u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c v-card<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u043e \u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u0445 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e. \u041d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f Bootstrap Vue<\/strong> \u0447\u0442\u043e\u0431\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n
<!-- src\/components\/List.vue --> <template>   <v-container> <!-- \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438 \u0431\u0443\u0434\u0443\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 -->          <v-row class=\"list__cafes-title\"> <!-- \u0412 \u044d\u0442\u043e row \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 -->       <v-col>         <h2 class=\"text-center text-h3 py-3\">List of cafes<\/h2>       <\/v-col>     <\/v-row>          <v-row class=\"list__cafes-content\">       <v-col md=\"4\" v-for=\"item in items_list\" :key=\"item.id\">         <v-card>                      <v-img             height=\"250\"             :src=\"item.img\"           ><\/v-img> <!-- \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e v-img \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 -->                      <v-card-title> <!-- \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f -->             <h3 class=\"text-h4\">{{ item.title }}<\/h3>           <\/v-card-title>                      <v-card-text> <!-- \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f -->             <p class=\"text-body-1\">{{ item.description }}<\/p>           <\/v-card-text>                  <\/v-card>       <\/v-col>     <\/v-row>      <\/v-container> <\/template><\/code><\/pre>\n
\u041c\u043d\u043e\u0433\u0438\u0435 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0447\u0442\u043e \u0432 row\u2019e \u0433\u0434\u0435 \u043c\u044b \u0443\u0436\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u0430\u043c\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e v-for<\/strong> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 v-col<\/strong> \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442 md=\u201d4<\/strong>«. \u0422\u0435 \u043a\u0442\u043e \u0443\u0447\u0438\u043b\u0438 Bootstrap \u0443\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0443\u0436\u0435\u043d \u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0438 \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u0437\u0430\u0434\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043b\u043e\u043d\u043e\u043a. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u044f \u0443\u043a\u0430\u0437\u0430\u043b \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u0430\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0430 \u0438\u043c\u0435\u043b\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u044b 4\/12 \u0438 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043f\u043e 3 \u0448\u0442\u0443\u043a\u0438 \u0432 \u043e\u0434\u0438\u043d \u0440\u044f\u0434. \u041e\u043a\u0435\u0439, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0432\u043e\u0434\u0430 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u0433\u043e\u0442\u043e\u0432, \u043d\u0430\u0434\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0432 \u0444\u0430\u0439\u043b src\/router\/index.js<\/strong>:<\/p>\n
import Vue from 'vue' import VueRouter from 'vue-router' import List from '..\/components\/List.vue' Vue.use(VueRouter) const routes = [   {     path: '\/',     name: 'List',     component: List   } ] const router = new VueRouter({   mode: 'history',   base: process.env.BASE_URL,   routes }) export default router<\/code><\/pre>\n
\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0432\u043e\u0434\u0430:<\/p>\n
\u041d\u0430 \u0434\u0435\u043a\u0441\u0442\u043e\u043f \u0438 \u043d\u0430 \u043c\u043e\u0431\u0430\u0439\u043b \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e, \u043c\u043e\u0436\u0435\u043c \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435<\/figcaption><\/figure>\n
\u0421\u0443\u043f\u0435\u0440\u200b \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u044f \u0434\u0443\u043c\u0430\u044e \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442\u0443 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0431\u0440\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 API \u200a\u2014\u200a \u0442\u043e \u0441\u0430\u043c\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0439.<\/p>\n
\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f<\/h4>\n
\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 src\/components\/CafeView.vue<\/strong> \u0438 \u043f\u0435\u0440\u0432\u043e\u0435 \u0447\u0442\u043e \u0432 \u043d\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c, \u0435\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0439 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c CafeInfo.vue<\/strong>, \u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u044d\u0442\u0438\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0443\u0436\u0435 \u0447\u0435\u043c-\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 CafeView.vue<\/strong>:<\/p>\n
<!-- src\/components\/CafeView.vue --> <template>   <v-container>          <CafeInfo><\/CafeInfo> <!-- \u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c -->        <\/v-container> <\/template>  <script> import CafeInfo from '.\/Cafe\/CafeInfo.vue' export default {   name: 'CafeView',   components: {     CafeInfo   } } <\/script><\/code><\/pre>\n
\u0425\u043e\u0440\u043e\u0448\u043e, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 CafeInfo.vue<\/strong>:<\/p>\n
<!-- src\/components\/Cafe\/CafeInfo.vue --> <template>   <v-row>          <v-col md=\"6\">              <v-card class=\"h-100\">         <v-img           height=\"350\"           :src=\"main_info.img\"           class=\"d-flex align-end\"         >           <!--             \u0412\u044b\u0448\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0447\u0442\u043e \u0441<\/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-407698","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/407698","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=407698"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/407698\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=407698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=407698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=407698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}