{"id":399244,"date":"2024-06-29T14:33:50","date_gmt":"2024-06-29T14:33:50","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=399244"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=399244","title":{"rendered":"<span>Ionic Capacitor Vite, Vue (\u0432 4-\u0445 \u0447\u0430\u0441\u0442\u044f\u0445)<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>1. \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Vite, Vue \u0438 Ionic Capacitor \u0437\u0430 8 \u043c\u0438\u043d\u0443\u0442, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u044f<\/h2>\n<p><a href=\"https:\/\/capacitorjs.com\/\"><u>Capacitor<\/u><\/a> \u2014 \u044d\u0442\u043e \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0440\u0430\u043d\u0442\u0430\u0439\u043c \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 Web Native. \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0435 iOS, Android \u0438 Progressive Web Apps (PWA) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript, HTML \u0438 CSS.<\/p>\n<p><a href=\"https:\/\/vitejs.dev\/\"><u>Vite<\/u><\/a> (\u0444\u0440\u0430\u043d\u0446. \u2014 \u201c\u0431\u044b\u0441\u0442\u0440\u044b\u0439\u201d) \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441\u0431\u043e\u0440\u043a\u0438, \u0446\u0435\u043b\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u0443\u044e \u0438 \u044d\u043a\u043e\u043d\u043e\u043c\u043d\u0443\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u041e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439: \u0441\u0435\u0440\u0432\u0435\u0440 dev (\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430) \u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 build (\u0441\u0431\u043e\u0440\u043a\u0430).\u00a0<\/p>\n<p>\u0417\u0430 8 \u043c\u0438\u043d\u0443\u0442 \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u044e, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 vue js \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e vite, \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0441\u0438\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0435 \u0441 live-reload (\u0436\u0438\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430) \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6422ea9461f0ac6fb27b8151\" data-style=\"\" id=\"6422ea9461f0ac6fb27b8151\" width=\"\"><\/div>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Ionic Framework Components, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d, \u043d\u043e \u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043d\u0438\u0436\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0431\u044b \u044d\u0442\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u0442\u043e\u0442 \u0436\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 ReactJS \u0438 ViteJS.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/h4>\n<p>99,99% \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Ionic VS Code Plugin, \u043d\u043e \u0432 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u0431\u044b\u043b\u0430 \u0432\u043d\u0435\u0441\u0435\u043d\u0430 \u043f\u0440\u0430\u0432\u043a\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430\u044f \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b <a href=\"https:\/\/capacitorjs.com\/docs\/guides\/live-reload\"><u>live-reload<\/u><\/a>.<\/p>\n<p>Live Reload \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043a\u0430\u043a \u0432\u0435\u0431-\u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u0430\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u0438\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0430\u0445. \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0434\u0432\u043e\u0438\u0447\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0432\u043d\u043e\u0441\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u0434, \u043e\u043d \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 (\u0438\u043b\u0438 Web View) \u043f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u2014 <em>\u0441 \u0441\u0430\u0439\u0442\u0430 capacitor<\/em><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/290\/426\/578\/2904265788421980a20d2b2353d088b3.png\" width=\"880\" height=\"781\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/290\/426\/578\/2904265788421980a20d2b2353d088b3.png\"\/><\/figure>\n<p>\u0412 \u0441\u0442\u0440\u043e\u043a\u0435 11 \u0440\u0430\u043d\u0435\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c <code>npm run dev<\/code><\/p>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>Ionic Capacitor \u2014 <a href=\"https:\/\/capacitorjs.com\/\"><u>https:\/\/capacitorjs.com\/<\/u><\/a><\/p>\n<\/li>\n<li>\n<p>Vite \u2014 <a href=\"https:\/\/vitejs.dev\/\"><u>https:\/\/vitejs.dev\/<\/u><\/a><\/p>\n<\/li>\n<li>\n<p>Ionic VS Code Plugin \u2014 <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ionic.ionic\"><u>https:\/\/marketplace.visualstudio.com\/items?itemName=ionic.ionic<\/u><\/a><\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>2. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 Ionic Capacitor \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 VueJS Vite<\/h2>\n<p>\u0420\u0430\u043d\u0435\u0435 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/vuejs.org\/\"><u>Vue<\/u><\/a>, <a href=\"https:\/\/vitejs.dev\/\"><u>Vite<\/u><\/a> \u0438 <a href=\"https:\/\/capacitorjs.com\/\"><u>Ionic Capacitor<\/u><\/a>.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0432\u0438\u0434\u0435\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b <a href=\"https:\/\/capacitorjs.com\/docs\/next\/apis\/camera\"><u>Capacitor Camera<\/u><\/a> \u0438 <a href=\"https:\/\/capacitorjs.com\/docs\/next\/apis\/action-sheet\"><u>Capacitor Action Sheet<\/u><\/a> \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430, \u043d\u0435 \u043f\u043e\u043b\u0430\u0433\u0430\u044f\u0441\u044c \u043d\u0430 Ionic Framework. \u0415\u0441\u043b\u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0435\u0440\u0441\u0438\u0435\u0439 PWA Elements \u044d\u0442\u0438\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u0442\u043e \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u044b \u0434\u043b\u044f PWA (\u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f), \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438\u043b\u0438 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6422ebc03afabae0667f3b60\" data-style=\"\" id=\"6422ebc03afabae0667f3b60\" width=\"\"><\/div>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/h4>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043d\u0441\u0442\u0430\u043b\u043b\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b<\/p>\n<pre><code>npm install @capacitor\/camera npm install @capacitor\/action-sheet<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e capacitor<\/p>\n<pre><code>npx cap sync<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c PWA Elements, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0432\u0435\u0431-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e PWA Elements \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0437\u0434\u0435\u0441\u044c, \u0432 <a href=\"https:\/\/capacitorjs.com\/docs\/web\/pwa-elements\"><u>\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e capacitor<\/u><\/a>.<\/p>\n<pre><code>npm install @ionic\/pwa-elements<\/code><\/pre>\n<h4>\u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h4>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u043c\u043d\u0435 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b <code>main.ts<\/code><\/p>\n<pre><code class=\"javascript\">import { createApp } from 'vue' import '.\/style.css' import App from '.\/App.vue'  import { defineCustomElements } from '@ionic\/pwa-elements\/loader';  createApp(App).mount('#app')  \/\/ Call the element loader after the app has been rendered the first time defineCustomElements(window);<\/code><\/pre>\n<h4>Action Sheet<\/h4>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 Action Sheet (\u0441\u043f\u0438\u0441\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439), \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u0434 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <code>script setup<\/code> \u0432 <code>App.vue<\/code>. \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Capacitor, \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0430 \u0432\u044b\u0448\u0435<\/p>\n<pre><code class=\"javascript\">&lt;script setup lang=\"ts\"> import HelloWorld from \".\/components\/HelloWorld.vue\";  \/\/ New Import for ActionSheet Plugin import { ActionSheet, ActionSheetButtonStyle } from \"@capacitor\/action-sheet\";  \/\/ New function to render the ActionSheet const showActionSheet = async () => {   const result = await ActionSheet.showActions({     title: \"Photo Options\",     message: \"Select an option to perform\",     options: [       {         title: \"Upload\",       },       {         title: \"Share\",       },       {         title: \"Remove\",         style: ActionSheetButtonStyle.Destructive,       },     ],   });    console.log(\"Action Sheet result:\", result); }; &lt;\/script><\/code><\/pre>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>showActionSheet<\/code>.<\/p>\n<pre><code class=\"javascript\">&lt;template>   &lt;div>     &lt;a href=\"https:\/\/vitejs.dev\" target=\"_blank\">       &lt;img src=\"\/vite.svg\" class=\"logo\" alt=\"Vite logo\" \/>     &lt;\/a>     &lt;a href=\"https:\/\/vuejs.org\/\" target=\"_blank\">       &lt;img src=\".\/assets\/vue.svg\" class=\"logo vue\" alt=\"Vue logo\" \/>     &lt;\/a>   &lt;\/div>   &lt;HelloWorld msg=\"Vite + Vue + Ionic Capacitor\" \/>   &lt;button @click=\"showActionSheet\">SHOW ACTION SHEET&lt;\/button> &lt;\/template><\/code><\/pre>\n<h4>Camera<\/h4>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u043a\u043e\u0434\u0443.<\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 <code>App.vue<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b<\/p>\n<pre><code class=\"javascript\">import { Camera, CameraResultType } from '@capacitor\/camera'; import { ref } from \"vue\";<\/code><\/pre>\n<p>\u0438 \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043d\u0438\u043c\u043a\u0430.<\/p>\n<pre><code class=\"javascript\">\/\/ ref for image from camera const imageUrl = ref&lt;string|undefined>()  \/\/ camera const takePicture = async () => {   const image = await Camera.getPhoto({     quality: 90,     allowEditing: true,     resultType: CameraResultType.Uri   });    imageUrl.value = image.webPath; };<\/code><\/pre>\n<p>\u0412 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 new \u0441 \u0446\u0435\u043b\u044c\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 image \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043a\u0430\u043c\u0435\u0440\u044b.<\/p>\n<pre><code class=\"javascript\">&lt;template>   &lt;div>     &lt;a href=\"https:\/\/vitejs.dev\" target=\"_blank\">       &lt;img src=\"\/vite.svg\" class=\"logo\" alt=\"Vite logo\" \/>     &lt;\/a>     &lt;a href=\"https:\/\/vuejs.org\/\" target=\"_blank\">       &lt;img src=\".\/assets\/vue.svg\" class=\"logo vue\" alt=\"Vue logo\" \/>     &lt;\/a>   &lt;\/div>   &lt;HelloWorld msg=\"Vite + Vue + Ionic Capacitor\" \/>   &lt;button @click=\"showActionSheet\" class=\"action-button\">SHOW ACTION SHEET&lt;\/button>   &lt;button @click=\"takePicture\"  class=\"action-button\">TAKE PICTURE&lt;\/button>   &lt;img :src=\"imageUrl\" style=\"width: 100%\"\/> &lt;\/template><\/code><\/pre>\n<h4>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435&#8230;<\/h4>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0435\u0441\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 Ionic Capacitor \u043c\u043e\u0436\u0435\u0442\u0435 <a href=\"https:\/\/capacitorjs.com\/docs\/plugins\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>, \u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u0445 Ionic PWA \u2014 <a href=\"https:\/\/capacitorjs.com\/docs\/plugins\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>.<\/p>\n<hr\/>\n<h2>3. \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Vite, Vue \u0438 Ionic Capacitor \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 Firebase \u0438 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0430 Firebase \u0432 \u043f\u0440\u043e\u0435\u043a\u0442<\/h2>\n<p>\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u0432 \u043d\u0430\u0448 \u0431\u043b\u043e\u0433, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 <a href=\"https:\/\/firebase.google.com\/docs\/emulator-suite\/install_and_configure\"><u>\u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0430 Firebase<\/u><\/a> \u0441 \u0432\u0430\u0448\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c Vite, Vue! \u042d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0432\u0438\u0434\u0435\u043e \u043d\u0430 \u0442\u0443 \u0436\u0435 \u0442\u0435\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u043d\u0438\u0436\u0435.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6422ed00d791666fa22f0d18\" data-style=\"\" id=\"6422ed00d791666fa22f0d18\" width=\"\"><\/div>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u044b\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0441 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 <a href=\"https:\/\/firebase.google.com\/docs\"><u>Firebase<\/u><\/a>, \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 &#171;\u0436\u0438\u0432\u0443\u044e&#187; \u0441\u0440\u0435\u0434\u0443 (\u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0430\u0446\u0438\u0438), \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0432\u043e\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0442\u043e \u0432\u0430\u043c \u043f\u043e\u0432\u0435\u0437\u043b\u043e! \u0412 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u0435 \u043c\u044b \u043f\u043e\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440 Firebase \u0432 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 Vite, Vue \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/capacitorjs.com\/\"><u>Ionic Capacitor<\/u><\/a>, \u0447\u0442\u043e \u0434\u0430\u0441\u0442 \u0432\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u0441\u0431\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0435 \u043f\u043e\u043a\u0438\u0434\u0430\u044f \u0441\u0432\u043e\u0435\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u044b.<\/p>\n<p>\u041c\u044b \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043c \u0432\u0430\u0441 \u0447\u0435\u0440\u0435\u0437 \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c, \u0441\u043d\u0430\u0431\u0434\u0438\u0432 \u0432\u0438\u0434\u0435\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u043f\u0440\u043e\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f. \u041d\u043e \u044d\u0442\u043e \u0435\u0449\u0435 \u043d\u0435 \u0432\u0441\u0435 &#8212; \u044d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441\u0435\u0440\u0438\u0438, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 Firebase \u0441 Vite, \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c Vue. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0432\u0438\u0434\u0435\u043e \u043c\u044b \u043f\u043e\u043a\u0430\u0436\u0435\u043c \u0432\u0430\u043c, \u043a\u0430\u043a \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c Firebase \u0441 <a href=\"https:\/\/vuefire.vuejs.org\/\"><u>VueFire<\/u><\/a>, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0431\u0435\u0441\u0448\u043e\u0432\u043d\u0443\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e Firebase \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 Vue.js.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u0435\u0441\u043b\u0438 \u0432\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 Firebase \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430\u0448\u0435 \u0432\u0438\u0434\u0435\u043e \u0438 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442!<\/p>\n<p><strong>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043f\u0430\u043a\u0435\u0442\u044b NPM<\/strong><\/p>\n<pre><code>npm install -g firebase-tools npm install firebase<\/code><\/pre>\n<p><strong>\u0412\u043e\u0439\u0434\u0438\u0442\u0435 \u0432 \u0441\u0432\u043e\u0439 \u0430\u043a\u043a\u0430\u0443\u043d\u0442 Firebase<\/strong><\/p>\n<pre><code>firebase login<\/code><\/pre>\n<p><strong>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440 Firebase<\/strong><\/p>\n<pre><code>firebase init<\/code><\/pre>\n<p><strong>\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0432\u044b\u0432\u043e\u0434\u0430<\/strong><\/p>\n<pre><code>aaronksaunders@Aarons1ProM1Pro vite-vue-cap % firebase init                                     ######## #### ########  ######## ########     ###     ######  ########      ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##      ######    ##  ########  ######   ########  #########  ######  ######      ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##      ##       #### ##     ## ######## ########  ##     ##  ######  ########  You're about to initialize a Firebase project in this directory:    \/Users\/aaronksaunders\/develop\/projects\/vite-vue-cap  ? Which Firebase features do you want to set up for this directory? Press Space to select  features, then Enter to confirm your choices. Emulators: Set up local emulators for Firebase  products  === Project Setup  First, let's associate this project directory with a Firebase project. You can create multiple project aliases by running firebase use --add,  but for now we'll just set up a default project.  ? Please select an option: Create a new project i  If you want to create a project in a Google Cloud organization or folder, please use \"firebase projects:create\" instead, and return to this command when you've created the project. ? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:  testem1 ? What would you like to call your project? (defaults to your project ID)  \u2714 Creating Google Cloud Platform project \u2714 Adding Firebase resources to Google Cloud Platform project  ??? Your Firebase project is ready! ???  Project information:    - Project ID: testem1    - Project Name: testem1  Firebase console is available at https:\/\/console.firebase.google.com\/project\/testem1\/overview i  Using project testem1 (testem1)  === Emulators Setup ? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to  confirm your choices. Authentication Emulator, Firestore Emulator ? Which port do you want to use for the auth emulator? 9099 ? Which port do you want to use for the firestore emulator? 8080 ? Would you like to enable the Emulator UI? Yes ? Which port do you want to use for the Emulator UI (leave empty to use any available port)?  ? Would you like to download the emulators now? Yes i  ui: downloading ui-v1.11.4.zip...  i  Writing configuration info to firebase.json... i  Writing project information to .firebaserc...  \u2714  Firebase initialization complete!<\/code><\/pre>\n<p><strong>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440<\/strong><\/p>\n<pre><code>firebase emulators:start<\/code><\/pre>\n<p><strong>\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0432\u044b\u0432\u043e\u0434\u0430<\/strong><\/p>\n<pre><code>aaronksaunders@Aarons1ProM1Pro vite-vue-cap % firebase emulators:start i  emulators: Starting emulators: auth, firestore \u26a0  firestore: Did not find a Cloud Firestore rules file specified in a firebase.json config file. \u26a0  firestore: The emulator will default to allowing all reads and writes. Learn more about this option: https:\/\/firebase.google.com\/docs\/emulator-suite\/install_and_configure#security_rules_configuration. i  firestore: Firestore Emulator logging to firestore-debug.log \u2714  firestore: Firestore Emulator UI websocket is running on 9150. i  ui: downloading ui-v1.11.4.zip... Progress: =========================================================================> (100% of 4MB) i  ui: Removing outdated emulator files: ui-v1.6.5 i  ui: Removing outdated emulator files: ui-v1.6.5.zip i  ui: Emulator UI logging to ui-debug.log  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2714  All emulators ready! It is now safe to connect your app. \u2502 \u2502 i  View Emulator UI at http:\/\/127.0.0.1:4000\/               \u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 Emulator       \u2502 Host:Port      \u2502 View in Emulator UI             \u2502 \u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524 \u2502 Authentication \u2502 127.0.0.1:9099 \u2502 http:\/\/127.0.0.1:4000\/auth      \u2502 \u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524 \u2502 Firestore      \u2502 127.0.0.1:8080 \u2502 http:\/\/127.0.0.1:4000\/firestore \u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518   Emulator Hub running at 127.0.0.1:4400   Other reserved ports: 4500, 9150  Issues? Report them at https:\/\/github.com\/firebase\/firebase-tools\/issues and attach the *-debug.log files.<\/code><\/pre>\n<p><strong>\u041a\u043e\u0434 \u0438\u0437 \u0432\u0438\u0434\u0435\u043e<\/strong><\/p>\n<pre><code class=\"javascript\">import { createApp } from \"vue\"; import \".\/style.css\"; import App from \".\/App.vue\"; import { IonicVue } from \"@ionic\/vue\";  \/* Core CSS required for Ionic components to work properly *\/ import \"@ionic\/vue\/css\/core.css\";  \/* Basic CSS for apps built with Ionic *\/ import \"@ionic\/vue\/css\/normalize.css\"; import \"@ionic\/vue\/css\/structure.css\"; import \"@ionic\/vue\/css\/typography.css\";  \/* Optional CSS utils that can be commented out *\/ import \"@ionic\/vue\/css\/padding.css\"; import \"@ionic\/vue\/css\/float-elements.css\"; import \"@ionic\/vue\/css\/text-alignment.css\"; import \"@ionic\/vue\/css\/text-transformation.css\"; import \"@ionic\/vue\/css\/flex-utils.css\"; import \"@ionic\/vue\/css\/display.css\";  \/* Theme variables *\/ \/\/ import '.\/theme\/variables.css';  import router from \".\/router\"; import { initializeApp } from \"firebase\/app\"; import {   getFirestore,   collection,   addDoc,   connectFirestoreEmulator,   serverTimestamp,   query,   getDocs,   orderBy, } from \"firebase\/firestore\";  const firebaseApp = initializeApp({   projectId: \"testem1\", });  console.log(\"firebaseApp\", firebaseApp);  \/\/ used for the firestore export const db = getFirestore(firebaseApp); console.log(\"firestore database\", db);  \/\/ connect the application to the emulator if (location.hostname === \"localhost\") {   \/\/ Point to the Storage emulator running on localhost.   connectFirestoreEmulator(db, \"localhost\", 8080); }  (async () => {   try {     \/\/ write a document to database...     const docRef = await addDoc(collection(db, \"stuff\"), {       name: \"aaron\",       created_at: serverTimestamp(),     });     console.log(\"new document\", docRef);      \/\/ get all of the documents     const queryResult = await getDocs(       query(collection(db, \"stuff\"), orderBy(\"created_at\", \"asc\"))     );      \/\/ display to console     const dataArray = queryResult.docs.map((d) => {       return { name: d.data().name, when: d.data().created_at.toDate() };     });     console.log(\"queryResult\", dataArray);   } catch (e) {     console.log(e);   } })();  const app = createApp(App).use(IonicVue).use(router);  router.isReady().then(() => {   app.mount(\"#app\"); });<\/code><\/pre>\n<hr\/>\n<h2>4. \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Vite, Vue \u0438 Ionic Capacitor \u2014 Firebase SignIn \u0438 SignOut \u0441 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u043e\u043c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 Firebase<\/h2>\n<p>\u0412 <a href=\"https:\/\/www.youtube.com\/watch?v=YUbh1zTJW3A\"><u>\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0432\u0438\u0434\u0435\u043e<\/u><\/a> \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 firebase-\u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440 \u0434\u043b\u044f <a href=\"https:\/\/firebase.google.com\/docs\/firestore\/\"><u>Firebase Firestore<\/u><\/a>. \u0412 \u044d\u0442\u043e\u043c \u0432\u0438\u0434\u0435\u043e\u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u043f\u043e\u043a\u0430\u0436\u0435\u043c \u0432\u0430\u043c, \u043a\u0430\u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/firebase.google.com\/docs\"><u>Firebase<\/u><\/a> Authentication (\u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f) \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Vite, Vue \u0438 Ionic Capacitor. \u0412\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Firebase Authentication \u0438 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440 Firebase Authentication \u0434\u043b\u044f \u0437\u0430\u0449\u0438\u0442\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0442\u043e\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043a \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u044b\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6422edafb824706ff78ca451\" data-style=\"\" id=\"6422edafb824706ff78ca451\" width=\"\"><\/div>\n<p>\u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435:<\/p>\n<ul>\n<li>\n<p>\u041a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c Firebase Authentication \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Vite, Vue \u0438 Ionic Capacitor.<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 Firebase, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0442\u043e\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0435\u0433\u043e \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u044b\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c \u0431\u0435\u0437 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u043e\u0432\u0438\u0447\u043e\u043a \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u043b\u0438 \u0443\u0436\u0435 \u0438\u043c\u0435\u0435\u0442\u0435 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Vue \u0438 <a href=\"https:\/\/capacitorjs.com\/\"><u>Ionic Capacitor<\/u><\/a>; \u0434\u0430\u043d\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0432\u0441\u0435\u0445, \u043a\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c Firebase Authentication \u0432 \u0441\u0432\u043e\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u042f \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"https:\/\/firebase.google.com\/docs\"><u>Firebase<\/u><\/a> \u0440\u0430\u043d\u0435\u0435, \u0438 \u044d\u0442\u043e \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0435! \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0430 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435.<\/p>\n<p>\u042d\u0442\u043e \u043b\u0438\u0448\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 \u043a \u043f\u043e\u043b\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 Firebase, VueFire \u0438 Pinia \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0432\u0438\u0434\u0435\u043e \u044d\u0442\u043e\u0439 \u0441\u0435\u0440\u0438\u0438.<\/p>\n<p><a href=\"https:\/\/firebase.google.com\/docs\/emulator-suite\/install_and_configure\"><u>Firebase Local Emulator Suite<\/u><\/a> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d \u0434\u043b\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043e\u0432 \u0438 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u0441\u0440\u0435\u0434, \u043e\u0442 \u0440\u0430\u0437\u043e\u0432\u044b\u0445 \u0441\u0435\u0441\u0441\u0438\u0439 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043e\u0432 \u0434\u043e \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0435.<\/p>\n<p><a href=\"https:\/\/capacitorjs.com\/\"><u>Ionic Capacitor<\/u><\/a> \u2014 \u044d\u0442\u043e \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0440\u0430\u043d\u0442\u0430\u0439\u043c \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0435 iOS, Android \u0438 Progressive Web Apps \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript, HTML \u0438 CSS.<\/p>\n<p><a href=\"https:\/\/vitejs.dev\/\"><u>Vite<\/u><\/a> \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441\u0431\u043e\u0440\u043a\u0438, \u0446\u0435\u043b\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u0443\u044e \u0438 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u0443\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u041e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439: dev \u0441\u0435\u0440\u0432\u0435\u0440 (\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 ES-\u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0432\u0435\u0440\u0445\u0431\u044b\u0441\u0442\u0440\u0443\u044e \u0433\u043e\u0440\u044f\u0447\u0443\u044e \u0437\u0430\u043c\u0435\u043d\u0443 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 (HMR), \u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 build (\u0441\u0431\u043e\u0440\u043a\u0438), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u0432\u0430\u0448 \u043a\u043e\u0434 \u0441 Rollup, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0432\u044b\u0441\u043e\u043a\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0430.<\/p>\n<p>\u041f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 \u0441\u0435\u0440\u0438\u0438: <a href=\"https:\/\/www.youtube.com\/playlist?list=PL2PY2-9rsgl1qJS3CBrbJxmbLBDBa2E1x\"><u>\u041f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 \u0432 YouTube<\/u><\/a><\/p>\n<hr\/>\n<p>Vite.js \u2014 \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0440\u0435\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. Vite \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0433\u0434\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, Vite \u043b\u0435\u0433\u043a\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 Vite:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0413\u043e\u0440\u044f\u0447\u0430\u044f \u0437\u0430\u043c\u0435\u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0441\u0442\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 ES \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u043a \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u0442\u044c \u0441 Vue CLI \u043d\u0430 Vite? \u041e\u0431\u0441\u0443\u0434\u0438\u043c \u044d\u0442\u043e \u043d\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435. \u0417\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c <a href=\"https:\/\/otus.pw\/4C32\/\">\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0443\u0440\u0441\u0430 \u00abVue.js \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u00bb.<\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/725382\/\"> https:\/\/habr.com\/ru\/articles\/725382\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>1. \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Vite, Vue \u0438 Ionic Capacitor \u0437\u0430 8 \u043c\u0438\u043d\u0443\u0442, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u044f<\/h2>\n<p><a href=\"https:\/\/capacitorjs.com\/\"><u>Capacitor<\/u><\/a> \u2014 \u044d\u0442\u043e \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0440\u0430\u043d\u0442\u0430\u0439\u043c \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 Web Native. \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0435 iOS, Android \u0438 Progressive Web Apps (PWA) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript, HTML \u0438 CSS.<\/p>\n<p><a href=\"https:\/\/vitejs.dev\/\"><u>Vite<\/u><\/a> (\u0444\u0440\u0430\u043d\u0446. \u2014 \u201c\u0431\u044b\u0441\u0442\u0440\u044b\u0439\u201d) \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441\u0431\u043e\u0440\u043a\u0438, \u0446\u0435\u043b\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u0443\u044e \u0438 \u044d\u043a\u043e\u043d\u043e\u043c\u043d\u0443\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u041e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439: \u0441\u0435\u0440\u0432\u0435\u0440 dev (\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430) \u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 build (\u0441\u0431\u043e\u0440\u043a\u0430).\u00a0<\/p>\n<p>\u0417\u0430 8 \u043c\u0438\u043d\u0443\u0442 \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u044e, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 vue js \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e vite, \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0441\u0438\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0435 \u0441 live-reload (\u0436\u0438\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430) \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6422ea9461f0ac6fb27b8151\" data-style=\"\" id=\"6422ea9461f0ac6fb27b8151\" width=\"\"><\/div>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Ionic Framework Components, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d, \u043d\u043e \u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043d\u0438\u0436\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0431\u044b \u044d\u0442\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u0442\u043e\u0442 \u0436\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 ReactJS \u0438 ViteJS.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/h4>\n<p>99,99% \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Ionic VS Code Plugin, \u043d\u043e \u0432 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u0431\u044b\u043b\u0430 \u0432\u043d\u0435\u0441\u0435\u043d\u0430 \u043f\u0440\u0430\u0432\u043a\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430\u044f \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b <a href=\"https:\/\/capacitorjs.com\/docs\/guides\/live-reload\"><u>live-reload<\/u><\/a>.<\/p>\n<p>Live Reload \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043a\u0430\u043a \u0432\u0435\u0431-\u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u0430\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u0438\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0430\u0445. \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0434\u0432\u043e\u0438\u0447\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0432\u043d\u043e\u0441\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u0434, \u043e\u043d \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 (\u0438\u043b\u0438 Web View) \u043f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u2014 <em>\u0441 \u0441\u0430\u0439\u0442\u0430 capacitor<\/em><\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412 \u0441\u0442\u0440\u043e\u043a\u0435 11 \u0440\u0430\u043d\u0435\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c <code>npm run dev<\/code><\/p>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>Ionic Capacitor \u2014 <a href=\"https:\/\/capacitorjs.com\/\"><u>https:\/\/capacitorjs.com\/<\/u><\/a><\/p>\n<\/li>\n<li>\n<p>Vite \u2014 <a href=\"https:\/\/vitejs.dev\/\"><u>https:\/\/vitejs.dev\/<\/u><\/a><\/p>\n<\/li>\n<li>\n<p>Ionic VS Code Plugin \u2014 <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ionic.ionic\"><u>https:\/\/marketplace.visualstudio.com\/items?itemName=ionic.ionic<\/u><\/a><\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>2. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 Ionic Capacitor \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 VueJS Vite<\/h2>\n<p>\u0420\u0430\u043d\u0435\u0435 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/vuejs.org\/\"><u>Vue<\/u><\/a>, <a href=\"https:\/\/vitejs.dev\/\"><u>Vite<\/u><\/a> \u0438 <a href=\"https:\/\/capacitorjs.com\/\"><u>Ionic Capacitor<\/u><\/a>.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0432\u0438\u0434\u0435\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b <a href=\"https:\/\/capacitorjs.com\/docs\/next\/apis\/camera\"><u>Capacitor Camera<\/u><\/a> \u0438 <a href=\"https:\/\/capacitorjs.com\/docs\/next\/apis\/action-sheet\"><u>Capacitor Action Sheet<\/u><\/a> \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430, \u043d\u0435 \u043f\u043e\u043b\u0430\u0433\u0430\u044f\u0441\u044c \u043d\u0430 Ionic Framework. \u0415\u0441\u043b\u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0435\u0440\u0441\u0438\u0435\u0439 PWA Elements \u044d\u0442\u0438\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u0442\u043e \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u044b \u0434\u043b\u044f PWA (\u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f), \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438\u043b\u0438 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6422ebc03afabae0667f3b60\" data-style=\"\" id=\"6422ebc03afabae0667f3b60\" width=\"\"><\/div>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/h4>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043d\u0441\u0442\u0430\u043b\u043b\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b<\/p>\n<pre><code>npm install @capacitor\/camera npm install @capacitor\/action-sheet<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e capacitor<\/p>\n<pre><code>npx cap sync<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c PWA Elements, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0432\u0435\u0431-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e PWA Elements \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0437\u0434\u0435\u0441\u044c, \u0432 <a href=\"https:\/\/capacitorjs.com\/docs\/web\/pwa-elements\"><u>\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e capacitor<\/u><\/a>.<\/p>\n<pre><code>npm install @ionic\/pwa-elements<\/code><\/pre>\n<h4>\u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h4>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u043c\u043d\u0435 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b <code>main.ts<\/code><\/p>\n<pre><code class=\"javascript\">import { createApp } from 'vue' import '.\/style.css' import App from '.\/App.vue'  import { defineCustomElements } from '@ionic\/pwa-elements\/loader';  createApp(App).mount('#app')  \/\/ Call the element loader after the app has been rendered the first time defineCustomElements(window);<\/code><\/pre>\n<h4>Action Sheet<\/h4>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 Action Sheet (\u0441\u043f\u0438\u0441\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439), \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u0434 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <code>script setup<\/code> \u0432 <code>App.vue<\/code>. \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Capacitor, \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0430 \u0432\u044b\u0448\u0435<\/p>\n<pre><code class=\"javascript\">&lt;script setup lang=\"ts\"> import HelloWorld from \".\/components\/HelloWorld.vue\";  \/\/ New Import for ActionSheet Plugin import { ActionSheet, ActionSheetButtonStyle } from \"@capacitor\/action-sheet\";  \/\/ New function to render the ActionSheet const showActionSheet = async () => {   const result = await ActionSheet.showActions({     title: \"Photo Options\",     message: \"Select an option to perform\",     options: [       {         title: \"Upload\",       },       {         title: \"Share\",       },       {         title: \"Remove\",         style: ActionSheetButtonStyle.Destructive,       },     ],   });    console.log(\"Action Sheet result:\", result); }; &lt;\/script><\/code><\/pre>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>showActionSheet<\/code>.<\/p>\n<pre><code class=\"javascript\">&lt;template>   &lt;div>     &lt;a href=\"https:\/\/vitejs.dev\" target=\"_blank\">       &lt;img src=\"\/vite.svg\" class=\"logo\" alt=\"Vite logo\" \/>     &lt;\/a>     &lt;a href=\"https:\/\/vuejs.org\/\" target=\"_blank\">       &lt;img src=\".\/assets\/vue.svg\" class=\"logo vue\" alt=\"Vue logo\" \/>     &lt;\/a>   &lt;\/div>   &lt;HelloWorld msg=\"Vite + Vue + Ionic Capacitor\" \/>   &lt;button @click=\"showActionSheet\">SHOW ACTION SHEET&lt;\/button> &lt;\/template><\/code><\/pre>\n<h4>Camera<\/h4>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u043a\u043e\u0434\u0443.<\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 <code>App.vue<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b<\/p>\n<pre><code class=\"javascript\">import { Camera, CameraResultType } from '@capacitor\/camera'; import { ref } from \"vue\";<\/code><\/pre>\n<p>\u0438 \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043d\u0438\u043c\u043a\u0430.<\/p>\n<pre><code class=\"javascript\">\/\/ ref for image from camera const imageUrl = ref&lt;string|undefined>()  \/\/ camera const takePicture = async () => {   const image = await Camera.getPhoto({     quality: 90,     allowEditing: true,     resultType: CameraResultType.Uri   });    imageUrl.value = image.webPath; };<\/code><\/pre>\n<p>\u0412 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 new \u0441 \u0446\u0435\u043b\u044c\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 image \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043a\u0430\u043c\u0435\u0440\u044b.<\/p>\n<pre><code class=\"javascript\">&lt;template>   &lt;div>     &lt;a href=\"https:\/\/vitejs.dev\" target=\"_blank\">       &lt;img src=\"\/vite.svg\" class=\"logo\" alt=\"Vite logo\" \/>     &lt;\/a>     &lt;a href=\"https:\/\/vuejs.org\/\" target=\"_blank\">       &lt;img src=\".\/assets\/vue.svg\" class=\"logo vue\" alt=\"Vue logo\" \/>     &lt;\/a>   &lt;\/div>   &lt;HelloWorld msg=\"Vite + Vue + Ionic Capacitor\" \/>   &lt;button @click=\"showActionSheet\" class=\"action-button\">SHOW ACTION SHEET&lt;\/button>   &lt;button @click=\"takePicture\"  class=\"action-button\">TAKE PICTURE&lt;\/button>   &lt;img :src=\"imageUrl\" style=\"width: 100%\"\/> &lt;\/template><\/code><\/pre>\n<h4>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435&#8230;<\/h4>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0435\u0441\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 Ionic Capacitor \u043c\u043e\u0436\u0435\u0442\u0435 <a href=\"https:\/\/capacitorjs.com\/docs\/plugins\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>, \u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u0445 Ionic PWA \u2014 <a href=\"https:\/\/capacitorjs.com\/docs\/plugins\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>.<\/p>\n<hr\/>\n<h2>3. \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Vite, Vue \u0438 Ionic Capacitor \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 Firebase \u0438 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0430 Firebase \u0432 \u043f\u0440\u043e\u0435\u043a\u0442<\/h2>\n<p>\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u0432 \u043d\u0430\u0448 \u0431\u043b\u043e\u0433, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 <a href=\"https:\/\/firebase.google.com\/docs\/emulator-suite\/install_and_configure\"><u>\u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0430 Firebase<\/u><\/a> \u0441 \u0432\u0430\u0448\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c Vite, Vue! \u042d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0432\u0438\u0434\u0435\u043e \u043d\u0430 \u0442\u0443 \u0436\u0435 \u0442\u0435\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u043d\u0438\u0436\u0435.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6422ed00d791666fa22f0d18\" data-style=\"\" id=\"6422ed00d791666fa22f0d18\" width=\"\"><\/div>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u044b\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0441 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 <a href=\"https:\/\/firebase.google.com\/docs\"><u>Firebase<\/u><\/a>, \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 &#171;\u0436\u0438\u0432\u0443\u044e&#187; \u0441\u0440\u0435\u0434\u0443 (\u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0430\u0446\u0438\u0438), \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0432\u043e\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0442\u043e \u0432\u0430\u043c \u043f\u043e\u0432\u0435\u0437\u043b\u043e! \u0412 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u0435 \u043c\u044b \u043f\u043e\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440 Firebase \u0432 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 Vite, Vue \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/capacitorjs.com\/\"><u>Ionic Capacitor<\/u><\/a>, \u0447\u0442\u043e \u0434\u0430\u0441\u0442 \u0432\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u0441\u0431\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0435 \u043f\u043e\u043a\u0438\u0434\u0430\u044f \u0441\u0432\u043e\u0435\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u044b.<\/p>\n<p>\u041c\u044b \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043c \u0432\u0430\u0441 \u0447\u0435\u0440\u0435\u0437 \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c, \u0441\u043d\u0430\u0431\u0434\u0438\u0432 \u0432\u0438\u0434\u0435\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u043f\u0440\u043e\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f. \u041d\u043e \u044d\u0442\u043e \u0435\u0449\u0435 \u043d\u0435 \u0432\u0441\u0435 &#8212; \u044d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441\u0435\u0440\u0438\u0438, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 Firebase \u0441 Vite, \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c Vue. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0432\u0438\u0434\u0435\u043e \u043c\u044b \u043f\u043e\u043a\u0430\u0436\u0435\u043c \u0432\u0430\u043c, \u043a\u0430\u043a \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c Firebase \u0441 <a href=\"https:\/\/vuefire.vuejs.org\/\"><u>VueFire<\/u><\/a>, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0431\u0435\u0441\u0448\u043e\u0432\u043d\u0443\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e Firebase \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 Vue.js.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u0435\u0441\u043b\u0438 \u0432\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 Firebase \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430\u0448\u0435 \u0432\u0438\u0434\u0435\u043e \u0438 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442!<\/p>\n<p><strong>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043f\u0430\u043a\u0435\u0442\u044b NPM<\/strong><\/p>\n<pre><code>npm install -g firebase-tools npm install firebase<\/code><\/pre>\n<p><strong>\u0412\u043e\u0439\u0434\u0438\u0442\u0435 \u0432 \u0441\u0432\u043e\u0439 \u0430\u043a\u043a\u0430\u0443\u043d\u0442 Firebase<\/strong><\/p>\n<pre><code>firebase login<\/code><\/pre>\n<p><strong>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440 Firebase<\/strong><\/p>\n<pre><code>firebase init<\/code><\/pre>\n<p><strong>\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0432\u044b\u0432\u043e\u0434\u0430<\/strong><\/p>\n<pre><code>aaronksaunders@Aarons1ProM1Pro vite-vue-cap % firebase init                                     ######## #### ########  ######## ########     ###     ######  ########      ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##      ######    ##  ########  ######   ########  #########  ######  ######      ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##      ##       #### ##     ## ######## ########  ##     ##  ######  ########  You're about to initialize a Firebase project in this directory:    \/Users\/aaronksaunders\/develop\/projects\/vite-vue-cap  ? Which Firebase features do you want to set up for this directory? Press Space to select  features, then Enter to confirm your choices. Emulators: Set up local emulators for Firebase  products  === Project Setup  First, let's associate this project directory with a Firebase project. You can create multiple project aliases by running firebase use --add,  but for now we'll just set up a default project.  ? Please select an option: Create a new project i  If you want to create a project in a Google Cloud organization or folder, please use \"firebase projects:create\" instead, and return to this command when you've created the project. ? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:  testem1 ? What would you like to call your project? (defaults to your project ID)  \u2714 Creating Google Cloud Platform project \u2714 Adding Firebase resources to Google Cloud Platform project  ??? Your Firebase project is ready! ???  Project information:    - Project ID: testem1    - Project Name: testem1  Firebase console is available at https:\/\/console.firebase.google.com\/project\/testem1\/overview i  Using project testem1 (testem1)  === Emulators Setup ? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to  confirm your choices. Authentication Emulator, Firestore Emulator ? Which port do you want to use for the auth emulator? 9099 ? Which port do you want to use for the firestore emulator? 8080 ? Would you like to enable the Emulator UI? Yes ? Which port do you want to use for the Emulator UI (leave empty to use any available port)?  ? Would you like to download the emulators now? Yes i  ui: downloading ui-v1.11.4.zip...  i  Writing configuration info to firebase.json... i  Writing project information to .firebaserc...  \u2714  Firebase initialization complete!<\/code><\/pre>\n<p><strong>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440<\/strong><\/p>\n<pre><code>firebase emulators:start<\/code><\/pre>\n<p><strong>\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0432\u044b\u0432\u043e\u0434\u0430<\/strong><\/p>\n<pre><code>aaronksaunders@Aarons1ProM1Pro vite-vue-cap % firebase emulators:start i  emulators: Starting emulators: auth, firestore \u26a0  <\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-399244","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/399244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=399244"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/399244\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=399244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=399244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=399244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}