{"id":16577,"date":"2024-01-27T08:03:38","date_gmt":"2024-01-27T04:33:38","guid":{"rendered":"https:\/\/rasanegar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-vue\/"},"modified":"2024-01-27T08:03:38","modified_gmt":"2024-01-27T04:33:38","slug":"%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-vue","status":"publish","type":"post","link":"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-vue\/","title":{"rendered":"\u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062a\u06a9 \u0635\u0641\u062d\u0647 \u0627\u06cc \u0628\u0627 Vue.js \u0648 Flask: \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Vue.js \u0645\u0642\u062f\u0645\u0647 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc \u06cc\u06a9 \u0633\u0631\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u0627\u0633\u062a \u0631\u0648\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Flask \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u067e\u0634\u062a\u0647 \u06a9\u0627\u0645\u0644.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u0645\u0646 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0631\u0648\u0634 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u0645 \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0632 \u06cc\u06a9 \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc\u06cc \u0645\u062a\u0634\u06a9\u0644 \u0627\u0632 \u06cc\u06a9 Vue.js Single \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a."},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0633\u0631\u0641\u0635\u0644\u0647\u0627\u06cc \u0645\u0637\u0644\u0628<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-vue\/#%d8%b1%d8%a7%d9%87_%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c_%d9%88_%d8%a2%d8%b4%d9%86%d8%a7%db%8c%db%8c_%d8%a8%d8%a7_vuejs\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 Vue.js<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-vue\/#%d9%85%d8%b9%d8%b1%d9%81%db%8c\" >\u0645\u0639\u0631\u0641\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-vue\/#%d9%85%d8%ad%d8%aa%d9%88%db%8c%d8%a7%d8%aa_%d8%b3%d8%b1%db%8c\" >\u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0633\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-vue\/#%d8%b1%d8%a7%d9%87_%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c_frontend_%d8%a8%d8%a7_vue-cli_%d9%88_webpack\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Frontend \u0628\u0627 vue-cli \u0648 webpack<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-vue\/#%d8%a2%d9%88%d8%b1%d8%af%d9%86_%d8%af%d8%b1_%d8%a8%d8%b1%d8%ae%db%8c_%d8%a7%d8%b2_%d8%b3%d8%a8%da%a9\" >\u0622\u0648\u0631\u062f\u0646 \u062f\u0631 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0633\u0628\u06a9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-vue\/#%d8%a8%d9%87_%d8%a2%d9%86_%d8%ae%d8%a7%d9%86%d9%87_%d8%a8%d8%af%d9%87_page\" >\u0628\u0647 \u0622\u0646 \u062e\u0627\u0646\u0647 \u0628\u062f\u0647 (page)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-vue\/#%d8%aa%d9%85%d8%b3%d8%ae%d8%b1_%d8%af%d8%b1%d8%ae%d9%88%d8%a7%d8%b3%d8%aa_ajax_%d8%a8%d8%b1%d8%a7%db%8c_%d9%86%d8%b8%d8%b1%d8%b3%d9%86%d8%ac%db%8c\" >\u062a\u0645\u0633\u062e\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a AJAX \u0628\u0631\u0627\u06cc \u0646\u0638\u0631\u0633\u0646\u062c\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-vue\/#%d9%85%d9%86%d8%a7%d8%a8%d8%b9\" >\u0645\u0646\u0627\u0628\u0639<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-vue\/#%d9%86%d8%aa%db%8c%d8%ac%d9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 12<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span><p> <br \/>\n<\/p>\n<div class=\"content\"><noscript><\/p>\n<style>.lazyload-placeholder { display: none;  }<\/style>\n<p><\/noscript><\/p>\n<h2 id=\"setupandgettingtoknowvuejs\"><span class=\"ez-toc-section\" id=\"%d8%b1%d8%a7%d9%87_%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c_%d9%88_%d8%a2%d8%b4%d9%86%d8%a7%db%8c%db%8c_%d8%a8%d8%a7_vuejs\"><\/span>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 Vue.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"introduction\"><span class=\"ez-toc-section\" id=\"%d9%85%d8%b9%d8%b1%d9%81%db%8c\"><\/span>\u0645\u0639\u0631\u0641\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u067e\u0633\u062a \u0622\u063a\u0627\u0632\u06cc\u0646 \u06cc\u06a9 \u0633\u0631\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u0627\u0633\u062a \u0631\u0648\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0646 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vuejs.org\/\">Vue.js<\/a> \u0648 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/flask.pocoo.org\/\">\u0641\u0644\u0627\u0633\u06a9<\/a> \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u067e\u0634\u062a\u0647 \u06a9\u0627\u0645\u0644.  \u062f\u0631 \u0627\u06cc\u0646 \u0633\u0631\u06cc \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0631\u0648\u0634 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062c\u0644\u0648\u06cc\u06cc \u0645\u062a\u0634\u06a9\u0644 \u0627\u0632 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Vue.js Single Page Application (SPA) \u0648 \u06cc\u06a9 Backend REST API \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0686\u0627\u0631\u0686\u0648\u0628 \u0648\u0628 Flask \u0628\u0627\u0634\u062f\u060c \u0628\u0633\u0627\u0632\u06cc\u0645.<\/p>\n<p>\u0627\u06cc\u0646 \u067e\u0633\u062a \u0627\u0648\u0644\u060c \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 Vue.js v-for \u0648 \u0645\u0631\u0627\u062d\u0644 \u0686\u0631\u062e\u0647 \u0639\u0645\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u067e\u0648\u0634\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<h3 id=\"seriescontents\"><span class=\"ez-toc-section\" id=\"%d9%85%d8%ad%d8%aa%d9%88%db%8c%d8%a7%d8%aa_%d8%b3%d8%b1%db%8c\"><\/span>\u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0633\u0631\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 Vue.js <em>(\u062a\u0648 \u0627\u06cc\u0646\u062c\u0627\u06cc\u06cc)<\/em><\/li>\n<li>\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628 Vue<\/li>\n<li>\u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a\u06cc \u0628\u0627 Vuex<\/li>\n<li>RESTful API \u0628\u0627 Flask<\/li>\n<li>\u0627\u062f\u063a\u0627\u0645 AJAX \u0628\u0627 REST API<\/li>\n<li>\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a JWT<\/li>\n<li>\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u062f\u0631 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u062e\u0635\u0648\u0635\u06cc \u0645\u062c\u0627\u0632\u06cc<\/li>\n<\/ol>\n<h3 id=\"frontendsetupwithvuecliandwebpack\"><span class=\"ez-toc-section\" id=\"%d8%b1%d8%a7%d9%87_%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c_frontend_%d8%a8%d8%a7_vue-cli_%d9%88_webpack\"><\/span>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Frontend \u0628\u0627 vue-cli \u0648 webpack<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0646 \u0627\u0632 \u062f\u0648 \u0627\u0628\u0632\u0627\u0631 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 Vue.js \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f \u06a9\u0647 \u0631\u0633\u0645\u06cc \u0647\u0633\u062a\u0646\u062f <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vuejs.org\/v2\/guide\/installation.html#CLI\">\u0631\u0627\u0628\u0637 \u062e\u0637 \u0641\u0631\u0645\u0627\u0646 Vue.js (CLI)<\/a> \u0648 \u0627\u0628\u0632\u0627\u0631 \u0628\u0633\u06cc\u0627\u0631 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0627\u0646\u062f\u0644\u0631 \u0648 \u0633\u0627\u062e\u062a \u0645\u0627\u0698\u0648\u0644 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webpack.js.org\/\">\u0628\u0633\u062a\u0647 \u0648\u0628<\/a>.  \u0647\u0631 \u062f\u0648\u06cc \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0645\u062a\u06a9\u06cc \u0647\u0633\u062a\u0646\u062f \u0631\u0648\u06cc \u0631\u0627 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a> \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u0648 \u0645\u062f\u06cc\u0631 \u0628\u0633\u062a\u0647 \u0622\u0646\u060c <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/\">npm<\/a>.  \u0627\u06af\u0631 \u0642\u0628\u0644\u0627 \u0646\u0635\u0628 \u0646\u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f node \u0633\u067e\u0633 \u0644\u0637\u0641\u0627 \u0628\u0627 Node.js \u0645\u0634\u0648\u0631\u062a \u06a9\u0646\u06cc\u062f <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nodejs.org\/en\/\">\u0627\u0633\u0646\u0627\u062f \u0646\u0635\u0628<\/a> \u0628\u0631\u0627\u06cc \u0633\u06cc\u0633\u062a\u0645 \u0634\u0645\u0627\u060c \u06a9\u0647 \u0634\u0627\u0645\u0644 \u0646\u0635\u0628 npm \u0646\u06cc\u0632 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>Vue.js CL (vue-cli) \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\">$ npm install vue-cli -g\n<\/code><\/pre>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627 \u0646\u0635\u0628 CLI \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Vue.js SPA \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f.  CLI \u06a9\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<ol>\n<li>\u0628\u0633\u062a\u0647 \u0648\u0628 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u06a9\u062f \u0645\u0646 \u0646\u0635\u0628 \u0648 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u06cc\u06a9 \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u062c\u062f\u062f \u062f\u0627\u063a \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f (\u0647\u0646\u06af\u0627\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u0641\u0627\u06cc\u0644\u060c \u0633\u0631\u0648\u0631 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u062c\u062f\u062f \u0645\u06cc \u0634\u0648\u062f)<\/li>\n<li>\u06cc\u06a9 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0628\u0631\u0627\u06cc vue-router \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0641\u0627\u06cc\u0644 Vue.js SPA \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/li>\n<\/ol>\n<p>\u0645\u0646 \u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u0633\u0637\u062d \u0628\u0627\u0644\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u062a\u0645\u0627\u0645 \u06a9\u062f\u0647\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0647 \u0646\u0627\u0645 &#8220;survey&#8221; \u0627\u0633\u062a.  \u0633\u067e\u0633 \u062f\u0648 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062f\u06cc\u06af\u0631 \u0628\u0647 \u0646\u0627\u0645\u200c\u0647\u0627\u06cc &#8220;frontend&#8221; (\u0628\u0631\u0627\u06cc Vue.js SPA) \u0648 &#8220;backend&#8221; (\u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 REST API) \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u0645\u060c \u0633\u067e\u0633 \u0641\u0647\u0631\u0633\u062a \u06a9\u0627\u0631\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc frontend \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u062f\u0647\u0645.<\/p>\n<pre><code class=\"hljs\">$ mkdir survey\n$ <span class=\"hljs-built_in\">cd<\/span> survey\n$ mkdir frontend\n$ mkdir backend\n$ <span class=\"hljs-built_in\">cd<\/span> frontend\n<\/code><\/pre>\n<p>\u062d\u0627\u0644\u0627 \u0628\u0631\u0627\u06cc \u062c\u0627\u062f\u0648\u06cc \u0648\u0627\u0642\u0639\u06cc.  \u062f\u0633\u062a\u0648\u0631 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 Vue CLI \u0648\u0627\u0631\u062f \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u06a9\u0647 \u0633\u067e\u0633 \u0627\u0632 \u0645\u0646 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f \u0628\u0647 \u06cc\u06a9 \u0633\u0631\u06cc \u0633\u0624\u0627\u0644 \u067e\u0627\u0633\u062e \u062f\u0647\u0645.<\/p>\n<p>Enter \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f \u062a\u0627 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0633\u0624\u0627\u0644\u0627\u062a \u0628\u067e\u0630\u06cc\u0631\u06cc\u062f (i) \u0646\u0627\u0645 \u067e\u0631\u0648\u0698\u0647\u060c (ii) \u0634\u0631\u062d \u067e\u0631\u0648\u0698\u0647\u060c (iii) \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u067e\u0631\u0648\u0698\u0647\u060c (iv) \u0633\u0627\u062e\u062a \u0645\u0633\u062a\u0642\u0644.  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0627\u0632 \u0634\u0645\u0627 \u062e\u0648\u0627\u0633\u062a\u0647 \u0634\u062f vue-router \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f\u060c &#8220;Y&#8221; \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0644\u0647 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.  &#8220;n&#8221; \u0631\u0627 \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0647\u0627\u06cc \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0647\u0627 \u0631\u0627 \u0628\u067e\u0630\u06cc\u0631\u06cc\u062f.<\/p>\n<pre><code class=\"hljs\">$ vue init webpack survey-spa\n\n? Project name survey-spa\n? Project description A Vue.js project\n? Author Adam McQuistan &lt;(email\u00a0protected)&gt;\n? Vue build standalone\n? Install vue-router? No\n? Set up unit tests No\n? Setup e2e tests with Nightwatch? No\n? Should we run `npm install` <span class=\"hljs-keyword\">for<\/span> you after the project has been created? (recommended) npm\n\n   vue-cli \u00b7 Generated <span class=\"hljs-string\">\"survey-spa\"<\/span>.\n\n\n<span class=\"hljs-comment\"># Installing project dependencies ...<\/span>\n...\n<\/code><\/pre>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0641\u0647\u0631\u0633\u062a \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 &#8220;survey-spa&#8221; \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.  \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u0648 \u062f\u0633\u062a\u0648\u0631 npm \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u067e\u0631\u0648\u0698\u0647 \u0648 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0635\u0627\u062f\u0631 \u06a9\u0646\u06cc\u062f.<\/p>\n<pre><code class=\"hljs\">$ <span class=\"hljs-built_in\">cd<\/span> survey-spa\n$ npm run dev\n<\/code><\/pre>\n<p>\u0627\u0644\u0627\u0646 \u0645\u06cc\u062a\u0648\u0646\u0645 \u0648\u0627\u0631\u062f \u0628\u0634\u0645 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/localhost:8080\">http:\/\/localhost:8080<\/a> \u062f\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0646 \u0648 \u0645\u0646 \u0628\u0627\u06cc\u062f \u0642\u0627\u0644\u0628 boilerplate Vue.js \u0631\u0627 \u0628\u0628\u06cc\u0646\u0645 page \u0645\u0634\u0627\u0628\u0647 \u0622\u0646\u0686\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/single-page-apps-vue-and-flask-setting-up-vue-1.png\" alt=\"\u0642\u0627\u0644\u0628 Vue.js page\" title=\"\"><\/p>\n<p>\u0633\u0627\u062e\u062a\u0627\u0631 \u0641\u0627\u06cc\u0644 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0634\u0628\u06cc\u0647 \u0622\u0646\u0686\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0645\u0646 \u0639\u0645\u062f\u0627\u064b \u0628\u0627\u062a\u0644\u0627\u0642 \u0645\u0632\u062e\u0631\u0641\u0627\u062a \u0631\u0627 \u062f\u0631 \u067e\u0648\u0634\u0647 node_modules \u062d\u0630\u0641 \u06a9\u0631\u062f\u0645.<\/p>\n<pre><code class=\"hljs\">survey-spa\/\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 build\n\u2502   \u251c\u2500\u2500 build.js\n\u2502   \u251c\u2500\u2500 check-versions.js\n\u2502   \u251c\u2500\u2500 logo.png\n\u2502   \u251c\u2500\u2500 utils.js\n\u2502   \u251c\u2500\u2500 vue-loader.conf.js\n\u2502   \u251c\u2500\u2500 webpack.base.conf.js\n\u2502   \u251c\u2500\u2500 webpack.dev.conf.js\n\u2502   \u2514\u2500\u2500 webpack.prod.conf.js\n\u251c\u2500\u2500 config\n\u2502   \u251c\u2500\u2500 dev.env.js\n\u2502   \u251c\u2500\u2500 index.js\n\u2502   \u2514\u2500\u2500 prod.env.js\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 package-lock.json\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 src\n\u2502   \u251c\u2500\u2500 App.vue\n\u2502   \u251c\u2500\u2500 assets\n\u2502   \u2502   \u2514\u2500\u2500 logo.png\n\u2502   \u251c\u2500\u2500 components\n\u2502   \u2502   \u2514\u2500\u2500 HelloWorld.vue\n\u2502   \u251c\u2500\u2500 main.js\n\u2502   \u2514\u2500\u2500 router\n\u2502       \u2514\u2500\u2500 index.js\n\u2514\u2500\u2500 static\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u062f\u0631 \u0686\u0646\u062f \u0628\u0627\u0631 \u0627\u0648\u0644\u06cc \u06a9\u0647 \u0628\u0647 \u0622\u0646 \u0646\u06af\u0627\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u06a9\u0645\u06cc \u0633\u062e\u062a \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f\u060c \u0627\u0645\u0627 \u0646\u06af\u0631\u0627\u0646 \u0646\u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0645\u0627 \u0648\u0627\u0642\u0639\u0627\u064b \u0628\u0627\u06cc\u062f \u0628\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc src\/\u060c \u0628\u0647 \u0639\u0644\u0627\u0648\u0647 \u0641\u0627\u06cc\u0644 index.html \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u0645.  \u0627\u0644\u0628\u062a\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0645\u0647\u0645 \u0647\u0633\u062a\u0646\u062f \u0648 \u0634\u0627\u06cc\u062f \u0631\u0648\u0632\u06cc \u0628\u0647 \u0622\u0646\u0686\u0647 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u067e\u0631\u062f\u0627\u0632\u0645\u060c \u0627\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0641\u0642\u0637 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0646\u0627\u062f\u06cc\u062f\u0647 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n<p>\u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc src\/ \u062c\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0645\u0646 \u06a9\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u062f\u0627\u06cc\u062a \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u06cc\u200c\u0646\u0648\u06cc\u0633\u0645.  \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u0645 \u0648 \u0627\u06cc\u062f\u0647 \u0627\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u0646\u0686\u0647 \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0646\u062c\u0627\u0645 \u0627\u0633\u062a \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u06cc\u0645 \u0631\u0648\u06cc.<\/p>\n<p><em>index.html<\/em><\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width,initial-scale=1.0\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>survey-spa<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- built files will be auto injected --&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u062a\u0646\u0647\u0627 \u0641\u0627\u06cc\u0644 HTML \u0627\u0633\u062a \u06a9\u0647 Vue SPA \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0628\u0647 \u0646\u062f\u0631\u062a \u062d\u0627\u0648\u06cc \u0686\u06cc\u0632\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u0622\u0646\u0686\u0647 \u062f\u0631 \u0628\u0627\u0644\u0627 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0628\u0627 \u0627\u06cc\u0646 \u0627\u0633\u062a\u062b\u0646\u0627 \u06a9\u0647 \u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a \u0634\u0645\u0627 \u0628\u0647 \u0686\u0627\u0631\u0686\u0648\u0628\u200c\u0647\u0627\u06cc CSS \u0648 \u062f\u06cc\u06af\u0631 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u067e\u06cc\u0648\u0646\u062f \u0645\u06cc\u200c\u062f\u0647\u06cc\u062f.  \u062a\u0646\u0647\u0627 <code>div<\/code> \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u0628\u0627 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u0634\u0648\u062f <code>id<\/code> \u0627\u0632 &#8220;app&#8221; \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0646\u0645\u0648\u0646\u0647 \u0627\u0635\u0644\u06cc Vue \u0628\u0647 \u0622\u0646 \u0645\u062a\u0635\u0644 \u0645\u06cc \u0634\u0648\u062f.  \u0622\u0646 \u0634\u06cc Vue HTML \u0648 CSS \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0647\u0633\u062a\u0646\u062f\u060c \u062a\u0632\u0631\u06cc\u0642 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u0628\u0639\u062f\u0627\u064b \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u0646 \u0628\u062d\u062b \u0634\u0648\u062f. <code>div<\/code> \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc<\/p>\n<p><em>main.js<\/em><\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">\/\/ The Vue build version to load with the `import` command<\/span>\n<span class=\"hljs-comment\">\/\/ (runtime-only or standalone) has been set in webpack.base.conf with an alias.<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> Vue <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue'<\/span>\n<span class=\"hljs-keyword\">import<\/span> App <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/App'<\/span>\n<span class=\"hljs-keyword\">import<\/span> router <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/router'<\/span>\n\nVue.config.productionTip = <span class=\"hljs-literal\">false<\/span>\n\n<span class=\"hljs-comment\">\/* eslint-disable no-new *\/<\/span>\n<span class=\"hljs-keyword\">new<\/span> Vue({\n  <span class=\"hljs-attr\">el<\/span>: <span class=\"hljs-string\">'#app'<\/span>,\n  router,\n  <span class=\"hljs-attr\">components<\/span>: { App },\n  <span class=\"hljs-attr\">template<\/span>: <span class=\"hljs-string\">'&lt;App\/&gt;'<\/span>\n})\n<\/code><\/pre>\n<p>\u0641\u0627\u06cc\u0644 main.js \u0646\u0642\u0637\u0647 \u0648\u0631\u0648\u062f\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a \u0648 \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0646\u0645\u0648\u0646\u0647 Vue \u0648 \u067e\u0633\u0648\u0646\u062f\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f vue-router \u0648 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/vuejs\/vuex\">vuex<\/a>.  \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u0627\u06cc\u0646 \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0646\u0645\u0648\u0646\u0647 Vue \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f.  \u0646\u0645\u0648\u0646\u0647 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062b\u0628\u062a \u0634\u062f\u0647 \u0627\u0633\u062a <code>div<\/code> \u0642\u0628\u0644\u0627\u064b \u0645\u0648\u0631\u062f \u0628\u062d\u062b \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u060c \u0628\u0647 \u0639\u0644\u0627\u0648\u0647 \u0628\u0647 \u0634\u06cc \u0631\u0648\u062a\u0631 \u0648 \u0633\u0637\u062d \u0628\u0627\u0644\u0627 \u062a\u063a\u0630\u06cc\u0647 \u0645\u06cc \u0634\u0648\u062f <code>App<\/code> \u062c\u0632\u0621.<\/p>\n<p><em>App.vue<\/em><\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\".\/assets\/logo.png\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">router-view<\/span>\/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'App'<\/span>\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n<span class=\"hljs-selector-id\">#app<\/span> {\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">'Avenir'<\/span>, Helvetica, Arial, sans-serif;\n  -webkit-<span class=\"hljs-attribute\">font-smoothing<\/span>: antialiased;\n  -moz-osx-<span class=\"hljs-attribute\">font-smoothing<\/span>: grayscale;\n  <span class=\"hljs-attribute\">text-align<\/span>: center;\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#2c3e50<\/span>;\n  <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">60px<\/span>;\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0641\u0627\u06cc\u0644 App.vue \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u062c\u0632\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0637\u062d \u0628\u0627\u0644\u0627 \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u063a\u0644\u0628 \u0634\u0627\u0645\u0644 \u0637\u0631\u062d \u06a9\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a.  \u0627\u062c\u0632\u0627\u06cc Vue \u0633\u0627\u062e\u062a\u0627\u0631 \u062e\u0627\u0635\u06cc \u062f\u0627\u0631\u0646\u062f \u06a9\u0647 \u062d\u0627\u0648\u06cc \u0627\u0644\u0641 \u0627\u0633\u062a <code>&lt;template&gt;<\/code> \u0628\u062e\u0634 \u0628\u0631\u0627\u06cc HTML \u062e\u0627\u0635 \u062c\u0632\u0621\u060c a <code>&lt;script&gt;<\/code> \u0628\u062e\u0634 \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 <code>Vue<\/code> \u0634\u06cc\u0621 \u0648 \u0631\u0641\u062a\u0627\u0631\u0647\u0627\u06cc \u0622\u0646 \u062c\u0632\u0621 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0634\u062f\u0647 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0648 a <code>&lt;styles&gt;<\/code> \u0628\u062e\u0634 \u0628\u0631\u0627\u06cc \u0642\u0648\u0627\u0646\u06cc\u0646 CSS \/ SCSS.  \u0627\u06cc\u0646 \u0628\u06cc\u062a \u0622\u062e\u0631 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u06a9\u0645\u06cc \u06af\u06cc\u062c \u06a9\u0646\u0646\u062f\u0647 \u0628\u0627\u0634\u062f \u0632\u06cc\u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0633\u0628\u06a9\u06cc \u06a9\u0647 \u062f\u0631 \u06cc\u06a9 \u062c\u0632\u0621 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0641\u0642\u0637 \u0628\u0647 \u0622\u0646 \u062c\u0632\u0621 \u0645\u0631\u0628\u0648\u0637 \u0646\u0645\u06cc \u0634\u0648\u062f.  \u0622\u0646\u0647\u0627 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0647\u0645\u0647 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0644 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u062a\u062d\u062a \u062a\u0627\u062b\u06cc\u0631 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u0646\u062f \u0645\u06af\u0631 \u0627\u06cc\u0646\u06a9\u0647 a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>scoped<\/code> \u0646\u0633\u0628\u062a \u062f\u0627\u062f\u0646 \u0628\u0647 <code>&lt;style&gt;<\/code> \u0639\u0646\u0635\u0631<\/p>\n<p><em>\u0631\u0648\u062a\u0631\/index.js<\/em><\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">import<\/span> Vue <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue'<\/span>\n<span class=\"hljs-keyword\">import<\/span> Router <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue-router'<\/span>\n<span class=\"hljs-keyword\">import<\/span> HelloWorld <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@\/components\/HelloWorld'<\/span>\n\nVue.use(Router)\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-keyword\">new<\/span> Router({\n  <span class=\"hljs-attr\">routes<\/span>: (\n    {\n      <span class=\"hljs-attr\">path<\/span>: <span class=\"hljs-string\">'\/'<\/span>,\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'HelloWorld'<\/span>,\n      <span class=\"hljs-attr\">component<\/span>: HelloWorld\n    }\n  )\n})\n<\/code><\/pre>\n<p>\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a index.js \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0631\u0648\u062a\u0631 \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 URL \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0648 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u0622\u0646 \u0646\u06af\u0627\u0634\u062a \u0645\u06cc \u0634\u0648\u0646\u062f.  \u062f\u0648 \u062e\u0637 \u0627\u0648\u0644 import \u0631\u0627 <code>Vue<\/code> \u0648 <code>Router<\/code> \u0627\u0634\u06cc\u0627\u0621\u060c \u06a9\u0647 \u0633\u067e\u0633 \u062a\u0648\u0633\u0637 <code>use<\/code> \u0631\u0648\u0634 \u0631\u0648\u06cc \u0631\u0627 <code>Vue<\/code> \u0647\u062f\u0641 &#8211; \u0634\u06cc.<\/p>\n<p>\u0645\u0633\u06cc\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u06a9\u0647 \u0627\u0632 \u0627\u0644\u06af\u0648\u06cc \u067e\u06a9 \u0648\u0628 vue-cli \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a root \u06cc\u0627 \u0645\u0633\u06cc\u0631 \u0641\u0647\u0631\u0633\u062a \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u060c \u06a9\u0647 \u0633\u0631\u0648\u0631\u0647\u0627 \u0631\u0627 \u0628\u0627\u0644\u0627 \u0645\u06cc \u0628\u0631\u062f <code>HelloWorld<\/code> \u062c\u0632\u0621.  \u0628\u0631\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u0645\u0633\u06cc\u0631 \u0645\u0633\u06cc\u0631 \u0628\u0647 \u06cc\u06a9 \u062c\u0632\u0621\u060c \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0648\u0627\u0631\u062f \u0634\u0648\u062f\u060c \u0633\u067e\u0633 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0634\u06cc \u0645\u0633\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f <code>routes<\/code> \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u06a9\u0647 \u0628\u0647 \u0622\u0646 \u06cc\u06a9 \u0645\u0633\u06cc\u0631\u060c \u06cc\u06a9 \u0646\u0627\u0645 \u0648 \u062c\u0632\u0621 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p><em>components\/HelloWorld.vue<\/em><\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"hello\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>{{ msg }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Essential Links<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/vuejs.org\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>Core Docs<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/forum.vuejs.org\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>Forum<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/chat.vuejs.org\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>Community Chat<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/twitter.com\/vuejs\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>Twitter<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">br<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"http:\/\/vuejs-templates.github.io\/webpack\/\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>\n          Docs for This Template\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Ecosystem<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"http:\/\/router.vuejs.org\/\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>vue-router<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"http:\/\/vuex.vuejs.org\/\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>vuex<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"http:\/\/vue-loader.vuejs.org\/\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>vue-loader<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/github.com\/vuejs\/awesome-vue\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>\n          awesome-vue\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'HelloWorld'<\/span>,\n  <span class=\"hljs-function\"><span class=\"hljs-title\">data<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> {\n      <span class=\"hljs-attr\">msg<\/span>: <span class=\"hljs-string\">'Welcome to Your Vue.js App'<\/span>\n    }\n  }\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-comment\">&lt;!-- Add \"scoped\" attribute to limit CSS to this component only --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">scoped<\/span>&gt;<\/span><span class=\"css\">\n<span class=\"hljs-selector-tag\">h1<\/span>, <span class=\"hljs-selector-tag\">h2<\/span> {\n  <span class=\"hljs-attribute\">font-weight<\/span>: normal;\n}\n<span class=\"hljs-selector-tag\">ul<\/span> {\n  <span class=\"hljs-attribute\">list-style-type<\/span>: none;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n}\n<span class=\"hljs-selector-tag\">li<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: inline-block;\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10px<\/span>;\n}\n<span class=\"hljs-selector-tag\">a<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#42b983<\/span>;\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc &#8220;components&#8221; \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u062c\u0632\u0627\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u0646\u062f.  \u0627\u06cc\u0646 <code>HelloWorld<\/code> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0627\u0644\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u0634\u0627\u0645\u0644 \u0633\u0647 \u0628\u062e\u0634 \u0627\u0635\u0644\u06cc \u0627\u0644\u06af\u0648\u060c \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u0633\u0628\u06a9 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0645\u06af\u06cc \u062f\u0627\u0631\u0627\u06cc \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0627\u0632 \u0645\u062d\u062a\u0648\u0627\u06cc \u0642\u0627\u0644\u0628 \u0627\u0648\u0644\u06cc\u0647 Vue-cli \u0647\u0633\u062a\u0646\u062f.<\/p>\n<p>\u0628\u0647 \u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0628\u062e\u0634 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0646\u06af\u0627\u0647\u06cc \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f \u06a9\u0647 \u06cc\u06a9 \u0634\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0635\u0627\u062f\u0631\u0627\u062a \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u062c\u0633\u0645 \u0628\u0647 \u062f\u0627\u062e\u0644 \u0628\u062f\u0646 \u062a\u0632\u0631\u06cc\u0642 \u0645\u06cc \u0634\u0648\u062f <code>Vue<\/code> \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u06a9\u0647 \u062f\u0631 \u0641\u0627\u06cc\u0644 main.js \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0634\u062f.  \u062f\u0627\u062e\u0644 \u0627\u06cc\u0646 \u0634\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06cc\u06a9 \u0627\u0633\u062a <code>data<\/code> \u0631\u0648\u0634\u06cc \u06a9\u0647 \u06cc\u06a9 \u0634\u06cc \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.  \u0627\u06cc\u0646 \u0622\u0628\u062c\u06a9\u062a \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062d\u0627\u0644\u062a (\u062f\u0627\u062f\u0647) \u062f\u0631 \u0633\u0637\u062d \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f \u0648 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0648\u0627\u062d\u062f \u0627\u0633\u062a \u06a9\u0647 \u0646\u0627\u0645\u06cc\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f <code>msg<\/code>.<\/p>\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0648\u0636\u0639\u06cc\u062a \u0645\u0624\u0644\u0641\u0647 \u062e\u0648\u062f \u0628\u0627 \u0646\u0627\u0645 \u0648\u06cc\u0698\u06af\u06cc \u0622\u0646 \u062f\u0631 HTML \u062f\u0631 \u0628\u062e\u0634 \u0627\u0644\u06af\u0648 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f.  \u062f\u0631 \u0645\u062b\u0627\u0644 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f <code>{{ msg }}<\/code>.  \u0628\u0631\u0627\u06a9\u062a \u0647\u0627\u06cc \u062f\u0648\u062a\u0627\u06cc\u06cc \u0634\u06a9\u0644 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0642\u0627\u0644\u0628 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0631\u0648\u0646\u06cc\u0627\u0628\u06cc \u0645\u062a\u0646 \u0647\u0633\u062a\u0646\u062f \u0648 \u0627\u0632 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mustache.github.io\/\">\u0633\u0628\u06cc\u0644<\/a> \u0633\u06cc\u0633\u062a\u0645 \u0642\u0627\u0644\u0628  \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 HTML \u0645\u0624\u0644\u0641\u0647\u200c\u062a\u0627\u0646 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f\u060c \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u062f\u0648 \u0628\u0631\u0627\u06a9\u062a \u0645\u062c\u0639\u062f \u0628\u067e\u06cc\u0686\u06cc\u062f.<\/p>\n<h3 id=\"bringinginsomestyle\"><span class=\"ez-toc-section\" id=\"%d8%a2%d9%88%d8%b1%d8%af%d9%86_%d8%af%d8%b1_%d8%a8%d8%b1%d8%ae%db%8c_%d8%a7%d8%b2_%d8%b3%d8%a8%da%a9\"><\/span>\u0622\u0648\u0631\u062f\u0646 \u062f\u0631 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0633\u0628\u06a9<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0645\u06cc \u062c\u0630\u0627\u0628\u06cc\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bulma.io\/\">\u0628\u0648\u0644\u0645\u0627<\/a> \u0686\u0627\u0631\u0686\u0648\u0628 CSS.  \u0647\u062f\u0641 \u0627\u0632 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0646\u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u0631\u0648\u06cc \u0631\u0648\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Bulma\u060c \u0627\u0645\u0627 \u0645\u0646 \u0647\u0645\u0686\u0646\u0627\u0646 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u0645 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0638\u0627\u0647\u0631 \u0636\u0639\u06cc\u0641 HTML \u0628\u06cc\u200c\u0627\u0633\u062a\u06cc\u0644 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0645.<\/p>\n<p>\u0628\u0631\u06af\u0634\u062a \u062f\u0631 terminal \u062f\u0631 \u0647\u0645\u0627\u0646 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0641\u0627\u06cc\u0644 package.json \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f \u0648 bulma \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0628\u0627 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\">$ npm install --save bulma\n<\/code><\/pre>\n<p>\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0645\u0646 \u0628\u0627\u06cc\u062f \u0686\u0646\u062f \u0627\u0628\u0632\u0627\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u0645 \u062a\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u0645 \u062a\u0627 \u0627\u062c\u0632\u0627 \u0628\u062f\u0627\u0646\u0646\u062f \u0686\u06af\u0648\u0646\u0647 \u0628\u0627 \u0622\u0646\u0647\u0627 \u06a9\u0627\u0631 \u06a9\u0646\u0646\u062f.  \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c npm \u0627\u06cc\u0646 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<pre><code class=\"hljs\">$ npm install --save-dev vue-style-loader\n$ npm install --save-dev css-loader\n$ npm install --save-dev sass-loader\n$ npm install --save-dev node-sass\n<\/code><\/pre>\n<p>\u0627\u06a9\u0646\u0648\u0646 App.vue \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0642\u0633\u0645\u062a style \u0631\u0627 \u0628\u0627 \u0622\u0646\u0686\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0627\u0633\u062a \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f import \u0686\u0627\u0631\u0686\u0648\u0628 bulma \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 scss import \u0646\u062d\u0648.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"scss\"<\/span>&gt;<\/span><span class=\"css\">\n<span class=\"hljs-keyword\">@import<\/span> <span class=\"hljs-string\">'~bulma\/bulma'<\/span>\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<\/code><\/pre>\n<h3 id=\"giveitahomepage\"><span class=\"ez-toc-section\" id=\"%d8%a8%d9%87_%d8%a2%d9%86_%d8%ae%d8%a7%d9%86%d9%87_%d8%a8%d8%af%d9%87_page\"><\/span>\u0628\u0647 \u0622\u0646 \u062e\u0627\u0646\u0647 \u0628\u062f\u0647 (page)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0633\u06cc\u0627\u0631 \u062e\u0648\u0628\u060c \u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u062f\u0631\u06a9 \u0627\u0648\u0644\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0633\u0627\u062e\u062a\u0627\u0631 \u0648 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Vue.js SPA \u062f\u0627\u0631\u06cc\u0645\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u0645 \u0634\u0631\u0648\u0639 \u0628\u0647 \u0646\u0648\u0634\u062a\u0646 \u06a9\u062f \u06a9\u0646\u0645.<\/p>\n<p>\u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644 HelloWorld.vue \u0628\u0647 Home.vue \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0628\u062e\u0634 \u0647\u0627\u06cc \u0642\u0627\u0644\u0628\u060c \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u0633\u0628\u06a9 \u0631\u0627 \u067e\u0627\u06a9 \u06a9\u0646\u06cc\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u062f\u0631 App.vue \u062e\u0637 \u0646\u0634\u0627\u0646\u200c\u0648\u0627\u0631\u0647 \u062a\u0635\u0648\u06cc\u0631 Vue \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f <code>&lt;img src=\".\/assets\/logo.png\"&gt;<\/code> \u0648 \u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0631\u0627 \u067e\u0627\u06a9 \u06a9\u0646\u06cc\u062f <code>&lt;style&gt;<\/code> \u0639\u0646\u0635\u0631 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0622\u0646\u062c\u0627 \u0647\u0633\u062a\u06cc\u062f.  \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c router\/index.js \u0648 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f import \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Home.vue \u0631\u0627 \u0628\u0647 \u062c\u0627\u06cc HelloWorld.vue \u0648 \u0634\u06cc route \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Home \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">import<\/span> Vue <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue'<\/span>\n<span class=\"hljs-keyword\">import<\/span> Router <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue-router'<\/span>\n<span class=\"hljs-keyword\">import<\/span> Home <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@\/components\/Home'<\/span>\n\nVue.use(Router)\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-keyword\">new<\/span> Router({\n  <span class=\"hljs-attr\">routes<\/span>: (\n    {\n      <span class=\"hljs-attr\">path<\/span>: <span class=\"hljs-string\">'\/'<\/span>,\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Home'<\/span>,\n      <span class=\"hljs-attr\">component<\/span>: Home\n    }\n  )\n})\n<\/code><\/pre>\n<p>\u062d\u0627\u0644\u0627 \u0641\u0627\u06cc\u0644 Home.vue \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0642\u0633\u0645\u062a \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0628\u0627 \u0622\u0646\u0686\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0627\u0633\u062a \u067e\u0631 \u06a9\u0646\u06cc\u062f.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  <span class=\"hljs-function\"><span class=\"hljs-title\">data<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> {\n      <span class=\"hljs-attr\">surveys<\/span>: ({\n      <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">1<\/span>,\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Dogs'<\/span>,\n      <span class=\"hljs-attr\">created_at<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>(<span class=\"hljs-number\">2017<\/span>, <span class=\"hljs-number\">12<\/span>, <span class=\"hljs-number\">1<\/span>),\n      <span class=\"hljs-attr\">questions<\/span>: (\n        {\n          <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">1<\/span>,\n          <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'What is your favorite dog?'<\/span>,\n          <span class=\"hljs-attr\">choices<\/span>: (\n            { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">1<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Beagle'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n            { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Labrador'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n            { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">3<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Rottweiler'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> })\n        }, {\n          <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">2<\/span>,\n          <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'What is your second favorite dog?'<\/span>,\n          <span class=\"hljs-attr\">choices<\/span>: (\n            { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">5<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Beagle'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n            { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">6<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Labrador'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n            { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">7<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Rottweiler'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> })\n        })\n      }, {\n        <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">2<\/span>,\n        <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Cars'<\/span>,\n        <span class=\"hljs-attr\">created_at<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>(<span class=\"hljs-number\">2017<\/span>, <span class=\"hljs-number\">12<\/span>, <span class=\"hljs-number\">3<\/span>),\n        <span class=\"hljs-attr\">questions<\/span>: (\n          {\n            <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">5<\/span>,\n            <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'What is your favorite car?'<\/span>,\n            <span class=\"hljs-attr\">choices<\/span>: (\n              { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">17<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Corvette'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n              { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">18<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Mustang'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n              { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">19<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Camaro'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> })\n          }, {\n            <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">6<\/span>,\n            <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'What is your second favorite car?'<\/span>,\n            <span class=\"hljs-attr\">choices<\/span>: (\n              { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">21<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Corvette'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n              { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">22<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Mustang'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n              { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">23<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Camaro'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> })\n          })\n      })\n    }\n  }\n}\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u0628\u0647 \u0645\u0627 \u0628\u0631\u062e\u06cc \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0633\u0627\u062e\u062a\u06af\u06cc \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0627 \u0622\u0646\u0647\u0627 \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u0645.  \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u06af\u0648\u06cc\u06cc\u062f \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f\u0647 \u062f\u0648 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0627\u0633\u062a\u060c \u06cc\u06a9\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0633\u06af \u0647\u0627 \u0648 \u062f\u06cc\u06af\u0631\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u062a\u0648\u0645\u0628\u06cc\u0644.  \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634\u060c \u062f\u0631\u0627\u06cc\u0648 \u067e\u0634\u062a HTML \u0631\u0627 \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645\u060c \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062d\u0627\u0644\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u0642\u0627\u0644\u0628 \u06cc\u06a9 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u0645 <code>div<\/code> \u06a9\u0647 \u062a\u0645\u0627\u0645 \u0639\u0646\u0627\u0635\u0631 \u062f\u06cc\u06af\u0631 \u0645\u0646 \u0631\u0627 \u062f\u0631 \u0628\u0631 \u062e\u0648\u0627\u0647\u062f \u06af\u0631\u0641\u062a.  \u0647\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Vue \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f \u0648\u0627\u062d\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u0646\u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0639\u0646\u0627\u0635\u0631 \u062e\u0648\u0627\u0647\u0631 \u0648 \u0628\u0631\u0627\u062f\u0631 \u0633\u0637\u062d \u0628\u0627\u0644\u0627 \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u06cc\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0646\u0645\u06cc \u0634\u0648\u062f.  \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u06cc\u0646 div \u0645\u0646 \u06cc\u06a9 \u0628\u062e\u0634 \u0628\u0631\u0627\u06cc Bulma \u0627\u0636\u0627\u0641\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bulma.io\/documentation\/layout\/hero\/\">\u0647\u062f\u0631 \u0642\u0647\u0631\u0645\u0627\u0646<\/a>.<\/p>\n<p>\u062f\u0631 \u0632\u06cc\u0631 \u0647\u062f\u0631 \u0642\u0633\u0645\u062a \u062f\u06cc\u06af\u0631\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0646\u0627\u0645 \u0647\u0631 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0648 \u062a\u0627\u0631\u06cc\u062e \u0627\u06cc\u062c\u0627\u062f \u0622\u0646 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0628\u0644\u0648\u06a9 HTML \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0634\u0631\u0648\u0639 \u0628\u0647 \u062f\u06cc\u062f\u0646 \u0628\u0631\u062e\u06cc \u0627\u0632 \u062c\u0630\u0627\u0628\u06cc\u062a \u0647\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 Vue.js \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"hero is-primary\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"hero-body\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container has-text-centered\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"title\"<\/span>&gt;<\/span>Check out recent surveys<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"survey in surveys\"<\/span> <span class=\"hljs-attr\">v-bind:key<\/span>=<span class=\"hljs-string\">\"survey.id\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-content\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"title\"<\/span>&gt;<\/span>{{ survey.name}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">'subtitle'<\/span>&gt;<\/span>{{ survey.created_at.toDateString() }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647\u200c\u0646\u0634\u062f\u0647 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f\u060c \u06a9\u0647 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0645\u0637\u0627\u0628\u0642 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0638\u0627\u0647\u0631 \u0634\u0648\u062f:<\/p>\n<p><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/single-page-apps-vue-and-flask-setting-up-vue-2.png\" alt=\"\u06a9\u0627\u0631\u062a \u0647\u0627\u06cc \u0646\u0638\u0631\u0633\u0646\u062c\u06cc\" title=\"\"><\/p>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u062f\u0648 \u06a9\u0627\u0631\u062a Bulma \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0627\u06cc\u0646 \u062f\u0648 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0628\u0647 \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0627\u0634\u06cc\u0627\u0621 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u06a9\u0647 \u062f\u0631 \u062a\u0627\u0628\u0639 \u062f\u0627\u062f\u0647 \u0645\u0646 \u0627\u0632 \u0645\u0646 \u0628\u0648\u062f\u0646\u062f\u060c \u0646\u06af\u0627\u0634\u062a \u0645\u06cc \u0634\u0648\u0646\u062f <code>Home<\/code> \u062c\u0632\u0621\u060c \u06a9\u0647 \u0645\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 v-for \u0628\u0647 HTML \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0645.<\/p>\n<p>\u06cc\u06a9 \u0628\u0627\u0631 \u062f\u06cc\u06af\u0631 \u0628\u0647 \u0632\u06cc\u0631\u0628\u062e\u0634 \u0632\u06cc\u0631 \u06a9\u062f \u0642\u0627\u0644\u0628 \u0627\u0635\u0644\u06cc \u06a9\u0647 \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f\u0647 \u06cc\u06a9 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0627\u0633\u062a \u0646\u06af\u0627\u0647\u06cc \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u062f.  \u06a9\u0644 \u0627\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0648 \u0641\u0631\u0632\u0646\u062f\u0627\u0646 \u0622\u0646 \u06cc\u06a9 \u0628\u0627\u0631 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u062f\u0631 \u0633\u0627\u06cc\u062a \u062a\u06a9\u0631\u0627\u0631 \u0645\u06cc \u0634\u0648\u0646\u062f <code>surveys<\/code> \u0622\u0631\u0627\u06cc\u0647.  \u0627\u0633\u0627\u0633\u0627\u060c \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0627\u0639\u062b \u062a\u0648\u0644\u06cc\u062f HTML \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<p>\u0642\u0633\u0645\u062a v-bind:key \u062f\u0631 \u062d\u0627\u0644 \u0627\u0641\u0632\u0648\u062f\u0646 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u0633\u062a <code>key<\/code> \u0628\u0631\u0627\u0628\u0631 \u0628\u0627 \u0634\u0646\u0627\u0633\u0647 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0628\u0631\u0627\u06cc \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0627\u0633\u062a <code>div<\/code> \u0628\u0627 \u06a9\u0644\u0627\u0633 &#8220;\u06a9\u0627\u0631\u062a&#8221;.  Vue \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u0644\u06cc\u062f\u0647\u0627 \u0628\u0631\u0627\u06cc \u067e\u06cc\u06af\u06cc\u0631\u06cc \u0635\u0631\u06cc\u062d \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f node \u062f\u0631 DOM \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u062d\u0633\u0627\u0628\u062f\u0627\u0631\u06cc \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f.  \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u0634\u0648\u062f \u0647\u0645\u06cc\u0634\u0647 \u06cc\u06a9 \u06a9\u0644\u06cc\u062f \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0628\u0631\u0627\u06cc \u0628\u06cc\u0631\u0648\u0646\u06cc \u062a\u0631\u06cc\u0646 \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u062f\u0633\u062a\u0648\u0631 v-for \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f\u060c \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"survey in surveys\"<\/span> <span class=\"hljs-attr\">v-bind:key<\/span>=<span class=\"hljs-string\">\"survey.id\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-content\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"title\"<\/span>&gt;<\/span>{{ survey.name}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">'subtitle'<\/span>&gt;<\/span>{{survey.created_at.toDateString()}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u062f\u0633\u062a\u0648\u0631 v-for \u0627\u0632 \u06cc\u06a9 \u062f\u0633\u062a\u0648\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>item in items<\/code> \u062c\u0627\u06cc\u06cc \u06a9\u0647 <code>items<\/code> \u0642\u0627\u0628\u0644 \u062a\u06a9\u0631\u0627\u0631 \u0627\u0633\u062a \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u06cc\u0627 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06cc\u06a9 \u0634\u06cc \u0648 <code>item<\/code> \u06cc\u06a9 \u0646\u0627\u0645 \u0645\u0633\u062a\u0639\u0627\u0631 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0639\u0646\u0635\u0631 \u062f\u0631 \u062a\u06a9\u0631\u0627\u0631\u067e\u0630\u06cc\u0631 \u0627\u0633\u062a.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0646\u062d\u0648 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0647 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u06cc \u0648 \u06a9\u0646\u062a\u0631\u0644 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0645\u062b\u0644\u0627\u064b \u0628\u06af\u0648\u06cc\u06cc\u062f \u0645\u0646 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0627\u0632 \u062d\u0631\u0648\u0641 \u062f\u0627\u0634\u062a\u0645 <code>var letters = ('a', 'd', 'a', 'm')<\/code> \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0633\u062a\u0645 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u0646\u0627\u0645\u0631\u062a\u0628 HTML \u0642\u062f\u06cc\u0645\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645 \u06a9\u0647 \u0647\u0631 \u062d\u0631\u0641 \u0648 \u0634\u0627\u062e\u0635 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0622\u0646 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.  \u062e\u0648\u0628 \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u0627\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631 v-for \u0627\u0646\u062c\u0627\u0645 \u0634\u0648\u062f:<\/p>\n<pre><code class=\"hljs\">  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"(letter, i) in letters\"<\/span> <span class=\"hljs-attr\">v-bind:key<\/span>=<span class=\"hljs-string\">\"i\"<\/span>&gt;<\/span>\n      Index position {{ i }} has letter {{ letter }}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u062d\u0627\u0635\u0644 \u062e\u0631\u0648\u062c\u06cc \u0632\u06cc\u0631:<\/p>\n<pre><code class=\"hljs\">\u2022 Index position 0 has letter a\n\u2022 Index position 1 has letter d\n\u2022 Index position 2 has letter a\n\u2022 Index position 3 has letter m\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631 \u0628\u0631 \u0631\u0648\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06cc\u06a9 \u0634\u06cc\u0621\u060c \u0646\u062d\u0648 \u06a9\u0627\u0645\u0644\u0627\u064b \u0645\u0634\u0627\u0628\u0647 \u0627\u0633\u062a.  \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u06cc\u06a9 \u0634\u06cc \u0645\u0627\u0646\u0646\u062f <code>var person = { name: 'adam', occupation: 'software developer', residence: 'lincoln, nebraska' }<\/code>\u060c \u062a\u06a9\u0631\u0627\u0631 \u0628\u0627 \u062f\u0633\u062a\u0648\u0631 v-for \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"hljs\">  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"(value, key) in person\"<\/span> <span class=\"hljs-attr\">v-bind:key<\/span>=<span class=\"hljs-string\">\u201dkey\u201d<\/span>&gt;<\/span>\n      key -&gt; {{ key }}, value -&gt; {{ value }}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n<\/code><\/pre>\n<pre><code class=\"hljs\">\u2022 key -&gt; name, value -&gt; adam\n\u2022 key -&gt; occupation, value -&gt; software developer\n\u2022 key -&gt; residence, value -&gt; lincoln, nebraska\n<\/code><\/pre>\n<h3 id=\"mockinganajaxrequestforsurveys\"><span class=\"ez-toc-section\" id=\"%d8%aa%d9%85%d8%b3%d8%ae%d8%b1_%d8%af%d8%b1%d8%ae%d9%88%d8%a7%d8%b3%d8%aa_ajax_%d8%a8%d8%b1%d8%a7%db%8c_%d9%86%d8%b8%d8%b1%d8%b3%d9%86%d8%ac%db%8c\"><\/span>\u062a\u0645\u0633\u062e\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a AJAX \u0628\u0631\u0627\u06cc \u0646\u0638\u0631\u0633\u0646\u062c\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0646 \u0627\u0648\u0644\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u0645 \u06a9\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0647\u0627 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f\u060c \u0627\u0645\u0627 \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0627\u0642\u0639\u06cc \u0628\u0627\u06cc\u062f \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0631\u0627 \u0627\u0632 REST API \u0645\u0627 \u0648\u0627\u06a9\u0634\u06cc \u06a9\u0646\u062f.  \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u06a9\u0645\u06cc \u0648\u0627\u0642\u0639\u06cc\u200c\u062a\u0631 \u0634\u0648\u062f\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u0645 \u062a\u0648\u0627\u0628\u0639 \u062f\u0631\u062e\u0648\u0627\u0633\u062a AJAX \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u063a\u0630\u06cc\u0647 <code>Home<\/code> \u0628\u0631\u0631\u0633\u06cc \u0645\u0648\u0644\u0641\u0647 \u0647\u0627<\/p>\n<p>\u062f\u0631 \u067e\u0648\u0634\u0647 src \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 &#8220;api&#8221; \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0646\u0627\u0645 index.js \u062f\u0631 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646\u062c\u0627\u0633\u062a \u06a9\u0647 \u0645\u0646 \u062a\u0648\u0627\u0628\u0639 AJAX \u062e\u0648\u062f \u0631\u0627 \u0645\u0633\u062e\u0631\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0631\u0634 \u0648 \u067e\u06cc\u0633\u062a \u06a9\u0646\u06cc\u062f <code>surveys<\/code> \u0622\u0631\u0627\u06cc\u0647 \u0627\u0632 \u0645\u0648\u0644\u0641\u0647 Home.vue \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u062b\u0627\u0628\u062a \u062c\u0647\u0627\u0646\u06cc.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">\/\/ api\/index.js<\/span>\n\n<span class=\"hljs-keyword\">const<\/span> surveys = ({\n  <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">1<\/span>,\n  <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Dogs'<\/span>,\n  <span class=\"hljs-attr\">created_at<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>(<span class=\"hljs-number\">2018<\/span>, <span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">1<\/span>),\n  <span class=\"hljs-attr\">questions<\/span>: ({\n    <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">1<\/span>,\n    <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'What is your favorite dog?'<\/span>,\n    <span class=\"hljs-attr\">choices<\/span>: (\n      { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">1<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Beagle'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n      { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Labrador'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n      { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">3<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Rottweiler'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> })\n  }, {\n    <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">2<\/span>,\n    <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'What is your second favorite dog?'<\/span>,\n    <span class=\"hljs-attr\">choices<\/span>: (\n      { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">5<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Beagle'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n      { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">6<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Labrador'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n      { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">7<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Rottweiler'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> })\n  })\n}, {\n  <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">2<\/span>,\n  <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Cars'<\/span>,\n  <span class=\"hljs-attr\">created_at<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>(<span class=\"hljs-number\">2018<\/span>, <span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">3<\/span>),\n  <span class=\"hljs-attr\">questions<\/span>: ({\n    <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">5<\/span>,\n    <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'What is your favorite car?'<\/span>,\n    <span class=\"hljs-attr\">choices<\/span>: (\n      { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">17<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Corvette'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n      { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">18<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Mustang'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n      { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">19<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Camaro'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> })\n  }, {\n    <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">6<\/span>,\n    <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'What is your second favorite car?'<\/span>,\n    <span class=\"hljs-attr\">choices<\/span>: (\n      { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">21<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Corvette'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n      { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">22<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Mustang'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> },\n      { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">23<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Camaro'<\/span>, <span class=\"hljs-attr\">selected<\/span>: <span class=\"hljs-number\">0<\/span> })\n  })\n})\n<\/code><\/pre>\n<p>\u062f\u0631 \u0632\u06cc\u0631 \u0627\u06cc\u0646 \u0622\u0631\u0627\u06cc\u0647 \u0627\u0632 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0647\u0627 \u062a\u0627\u0628\u0639\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>fetchSurveys<\/code> \u06a9\u0647 \u067e\u0633 \u0627\u0632 300 \u0645\u06cc\u0644\u06cc \u062b\u0627\u0646\u06cc\u0647 \u0627\u0646\u062a\u0638\u0627\u0631 (\u0628\u0631\u0627\u06cc \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u062a\u0627\u062e\u06cc\u0631 API) \u06cc\u06a9 \u0648\u0639\u062f\u0647 \u0631\u0627 \u0628\u0627 \u0622\u0631\u0627\u06cc\u0647 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0647\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.  \u062a\u0627\u0628\u0639 \u0628\u0627\u06cc\u062f \u0635\u0627\u062f\u0631 \u0634\u0648\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0622\u0646 \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a <code>Home<\/code> \u062c\u0632\u0621.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">fetchSurveys<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Promise<\/span>(<span class=\"hljs-function\">(<span class=\"hljs-params\">resolve, reject<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-built_in\">setTimeout<\/span>(<span class=\"hljs-function\">() =&gt;<\/span> {\n      resolve(surveys)\n    }, <span class=\"hljs-number\">300<\/span>)\n  })\n}\n<\/code><\/pre>\n<p>\u0628\u0627\u0632\u06af\u0634\u062a \u0628\u0647 \u062a\u0627\u0628\u0639 \u062f\u0627\u062f\u0647 \u0627\u0632 <code>Home<\/code> \u062c\u0632\u0621 \u0627\u0648\u0644\u06cc\u0647 <code>surveys<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u062e\u0627\u0644\u06cc \u0648 import \u0631\u0627 <code>fetchSurveys<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0631 \u0628\u062e\u0634 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">import<\/span> { fetchSurvey } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@\/api'<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n <span class=\"hljs-function\"><span class=\"hljs-title\">data<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> {\n      <span class=\"hljs-attr\">surveys<\/span>: ()\n    }\n  }\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0627\u062c\u0632\u0627\u06cc Vue \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u0633\u0631\u06cc \u0645\u0631\u0627\u062d\u0644 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0647\u0646\u06af\u0627\u0645 \u0627\u0646\u062c\u0627\u0645 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u0627\u0646\u0646\u062f \u06a9\u0634\u06cc\u062f\u0646 \u062f\u0627\u062f\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0631\u062e\u0648\u0627\u0633\u062a AJAX \u0645\u0639\u0646\u0627\u062f\u0627\u0631 \u0627\u0633\u062a.  \u0628\u0647 \u0645\u0646\u0638\u0648\u0631 \u062a\u063a\u0630\u06cc\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0628\u0647 <code>Home<\/code> \u062c\u0632\u0621 \u0645\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 hook \u0648\u0627\u0631\u062f \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0631\u0627\u062d\u0644 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a Vue\u060c \u0628\u0647 \u0648\u06cc\u0698\u0647 \u062f\u0631 <code>beforeMount<\/code> \u0635\u062d\u0646\u0647.  \u0686\u0646\u062f\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u062f\u06cc\u06af\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u0648\u0627\u0631\u062f \u0628\u0633\u06cc\u0627\u0631 \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc AJAX \u0645\u0641\u06cc\u062f \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0645\u0646 \u0628\u0647 \u0631\u0633\u0645\u06cc \u0645\u0648\u06a9\u0648\u0644 \u0645\u06cc \u06a9\u0646\u0645 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vuejs.org\/v2\/guide\/instance.html#Lifecycle-Diagram\">\u0627\u0633\u0646\u0627\u062f Vue.js<\/a> \u0628\u0631\u0627\u06cc \u062a\u0648\u0636\u06cc\u062d \u062c\u0632\u0626\u06cc\u0627\u062a<\/p>\n<p>\u0627\u06cc\u0646 <code>beforeMount<\/code> \u0645\u0631\u062d\u0644\u0647 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u0628\u0631\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc API \u0628\u0647 \u062e\u0648\u0628\u06cc \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f \u0632\u06cc\u0631\u0627 \u062f\u0631\u0633\u062a \u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u0646\u0635\u0628 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0627 \u0648 \u062f\u0631\u0633\u062a \u0642\u0628\u0644 \u0627\u0632 \u0622\u0646 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f. <code>render<\/code> \u0646\u0627\u0645\u06cc\u062f\u0647 \u0645\u06cc\u0634\u0648\u062f \u0631\u0648\u06cc \u062c\u0632\u0621 \u0645\u0627  \u0627\u06cc\u0646 \u0628\u0647 \u0622\u0646 \u0632\u0645\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0646\u0645\u0627\u06cc\u0634 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u06a9\u0634\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>beforeMount<\/code> \u0645\u0631\u062d\u0644\u0647 \u0627\u0632 <code>Home<\/code> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062a\u0646\u0647\u0627 \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0631\u0648\u0634 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0634\u06cc Vue \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0645.  \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0645\u0646 \u0628\u0627 \u0645\u0646 \u062a\u0645\u0627\u0633 \u062e\u0648\u0627\u0647\u0645 \u06af\u0631\u0641\u062a <code>fetchSurveys<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0628\u0631\u0631\u0633\u06cc \u0647\u0627\u06cc \u0628\u0631\u06af\u0634\u062a\u06cc \u0631\u0627 \u0628\u0647 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0647\u0627 \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0647\u06cc\u062f <code>data<\/code> \u0648\u06cc\u0698\u06af\u06cc.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">import<\/span> { fetchSurveys } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@\/api'<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  <span class=\"hljs-function\"><span class=\"hljs-title\">data<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> {\n      <span class=\"hljs-attr\">surveys<\/span>: ()\n    }\n  },\n  <span class=\"hljs-function\"><span class=\"hljs-title\">beforeMount<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n    fetchSurveys().then(<span class=\"hljs-function\"><span class=\"hljs-params\">response<\/span> =&gt;<\/span> {\n      <span class=\"hljs-built_in\">this<\/span>.surveys = response\n    })\n  }\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0630\u062e\u06cc\u0631\u0647 \u0647\u0645\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0648 \u0631\u0641\u0631\u0634 \u06a9\u0631\u062f\u0646 \u0645\u0631\u0648\u0631\u06af\u0631 \u0647\u0645\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0631\u0627 \u0628\u0647 \u0645\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f page \u0642\u0628\u0644\u0627\u064b \u062f\u06cc\u062f\u06cc\u0645\u060c \u0627\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627 \u06cc\u06a9 \u062a\u0645\u0627\u0633 \u0645\u0633\u062e\u0631\u0647 \u0634\u062f\u0647 AJAX.<\/p>\n<h3 id=\"resources\"><span class=\"ez-toc-section\" id=\"%d9%85%d9%86%d8%a7%d8%a8%d8%b9\"><\/span>\u0645\u0646\u0627\u0628\u0639<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0622\u06cc\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0631\u0628\u0627\u0631\u0647 Vue.js \u0648 \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0648\u0628 \u062c\u0644\u0648\u06cc\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0628\u062f\u0627\u0646\u06cc\u062f\u061f  \u0633\u0639\u06cc \u06a9\u0646\u06cc\u062f \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0646\u0627\u0628\u0639 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u0639\u0645\u06cc\u0642\u200c\u062a\u0631 \u062f\u0631 \u0627\u06cc\u0646 \u0686\u0627\u0631\u0686\u0648\u0628 \u0638\u0627\u0647\u0631\u06cc \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<ul>\n<li><a class=\"udemy-link\" rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/stackabu.se\/vue-js-2-complete-guide\">Vue.js 2 &#8211; \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644<\/a><\/li>\n<li><a class=\"udemy-link\" rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/stackabu.se\/ultimate-vue-js-2-developers-course\">\u062f\u0648\u0631\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 Ultimate Vue JS 2<\/a><\/li>\n<\/ul>\n<h3 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"%d9%86%d8%aa%db%8c%d8%ac%d9%87\"><\/span>\u0646\u062a\u06cc\u062c\u0647<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u067e\u0633\u062a \u0628\u0647 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Vue.js SPA \u0628\u0627 vue-cli \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0627\u0644\u0628 \u0648\u0628 \u067e\u06a9 \u067e\u0631\u062f\u0627\u062e\u062a\u0647 \u0627\u0633\u062a.  \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647\u060c \u0631\u0648\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u06cc\u06a9 \u062a\u06a9\u0631\u0627\u0631 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u067e\u0648\u06cc\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc UI \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0642\u062f\u0631\u062a\u0645\u0646\u062f v-for Vue.js \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0645.  \u0628\u0631\u0627\u06cc \u0622\u062e\u0631\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0627\u0635\u0644\u06cc \u06a9\u0647 \u0632\u062f\u0645 \u0631\u0648\u06cc \u0645\u0631\u0627\u062d\u0644 \u0686\u0631\u062e\u0647 \u0639\u0645\u0631 \u0627\u062c\u0632\u0627 \u0648 \u0686\u06af\u0648\u0646\u06af\u06cc <code>beforeMount<\/code> \u0645\u0631\u062d\u0644\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0628\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0633\u0627\u062e\u062a\u06af\u06cc AJAX \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f.<\/p>\n<p>\u062f\u0631 \u067e\u0633\u062a \u0628\u0639\u062f\u06cc \u0631\u0648\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u0633\u0648\u0646\u062f vue-router \u0628\u0631\u0627\u06cc \u062c\u0631\u06cc\u0627\u0646 \u0627\u0632 \u06cc\u06a9\u06cc \u0631\u0627 \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f page \u0628\u0647 \u062f\u06cc\u06af\u0631\u06cc \u06a9\u0647 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u06cc\u06a9 \u0645\u0641\u0647\u0648\u0645 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f.  \u06a9\u062f \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0622\u062f\u0631\u0633 \u0632\u06cc\u0631 \u0628\u06cc\u0627\u0628\u06cc\u062f <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/amcquistan\/flask-vuejs-survey\/tree\/FirstPost\">\u062d\u0633\u0627\u0628 GitHub \u0645\u0646<\/a> \u06a9\u0647 \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u0634\u0627\u062e\u0647 \u0628\u0631\u0627\u06cc \u0647\u0631 \u067e\u0633\u062a \u0645\u06cc \u0628\u0627\u0634\u062f.  \u0645\u0645\u0646\u0648\u0646 \u06a9\u0647 \u062e\u0648\u0627\u0646\u062f\u06cc\u062f \u0648 \u0644\u0637\u0641\u0627\u064b \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0638\u0631 \u06cc\u0627 \u0646\u0642\u062f \u062e\u0648\u062f \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f.<\/p>\n<\/div>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><br \/>\n<br \/><br \/>\n<br \/>\u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u062f\u0631 1403-01-27 08:03:04<br \/>\n<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:&quot;16577&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628&quot;,&quot;legend&quot;:&quot;0\\\/5 (0 \u0631\u0627\u06cc)&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;\u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062a\u06a9 \u0635\u0641\u062d\u0647 \u0627\u06cc \u0628\u0627 Vue.js \u0648 Flask: \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Vue.js \u0645\u0642\u062f\u0645\u0647 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc \u06cc\u06a9 \u0633\u0631\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u0627\u0633\u062a \u0631\u0648\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Flask \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u067e\u0634\u062a\u0647 \u06a9\u0627\u0645\u0644.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u0645\u0646 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0631\u0648\u0634 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u0645 \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0632 \u06cc\u06a9 \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc\u06cc \u0645\u062a\u0634\u06a9\u0644 \u0627\u0632 \u06cc\u06a9 Vue.js Single \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a.&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ({count} \u0631\u0627\u06cc)&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            <span class=\"kksr-muted\">\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628<\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 12<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 Vue.js \u0645\u0639\u0631\u0641\u06cc \u0627\u06cc\u0646 \u067e\u0633\u062a \u0622\u063a\u0627\u0632\u06cc\u0646 \u06cc\u06a9 \u0633\u0631\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u0627\u0633\u062a \u0631\u0648\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0646 Vue.js \u0648 \u0641\u0644\u0627\u0633\u06a9 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u067e\u0634\u062a\u0647 \u06a9\u0627\u0645\u0644. \u062f\u0631 \u0627\u06cc\u0646 \u0633\u0631\u06cc \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0631\u0648\u0634 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062c\u0644\u0648\u06cc\u06cc \u0645\u062a\u0634\u06a9\u0644 \u0627\u0632 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Vue.js Single Page Application (SPA) [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1772,620],"tags":[3292,2054,1843,1842,4623,3294,1840,1844,4617,1904,2374,1776,1811,1786,1890,2051,1789,1779,1814,1909,2917,1766,4624,3561,1881,1103,3481,4618,2750,4620,1803,1889,2123,2667,2134,4616,2097,2376,2514,2392,2441,1795,4622,2104,4621,2492,2321,3466,4619,2323,2408,1785,2829,1813],"class_list":["post-16577","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming","tag-vue","tag-flask","tag-nodejs-hosting","tag-nodejs-vps","tag-single","tag-vue-js","tag-1840","tag-1844","tag-4617","tag-1904","tag-2374","tag-1776","tag-1811","tag-1786","tag-1890","tag-2051","tag-1789","tag-1779","tag-1814","tag-1909","tag-2917","tag-1766","tag-4624","tag-3561","tag-1881","tag-1103","tag-3481","tag-4618","tag-2750","tag-4620","tag-1803","tag-1889","tag-2123","tag-2667","tag-2134","tag-4616","tag-2097","tag-2376","tag-2514","tag-2392","tag-2441","tag-1795","tag-4622","tag-2104","tag-4621","tag-2492","tag-2321","tag-3466","tag-4619","tag--node","tag-2408","tag-1785","tag-2829","tag-1813"],"acf":[],"_links":{"self":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/16577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/comments?post=16577"}],"version-history":[{"count":0,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/16577\/revisions"}],"wp:attachment":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media?parent=16577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/categories?post=16577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/tags?post=16577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}