Как узнать версию vue
Гайд по миграции с Vue 2 на Vue 3. Часть 1
Эта статья — перевод оригинальной статьи Andy Li из Vue Mastery «Vue 3 Migration Build: safely upgrade your app to Vue 3 (Pt. 1)».
Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.
Вступление
Команда Vue недавно выпустила долгожданный билд миграции для Vue 3. Если вы думали об обновлении своего приложения с Vue 2 до Vue 3, это то, что вам нужно.
Процесс обновления приложения до последней версии фреймворка может оказаться непростой задачей. Эта серия статей создана, чтобы упростить этот процесс.
Серия миграции на Vue 3 состоит из двух частей:
Билд для миграции на Vue 3 (эта статья)
Наряду с этой статьей мы также создали наглядный альбом для наиболее распространенных изменений.
Что такое билд миграции?
Основное отличие состоит в том, что он будет выдавать вам предупреждения всякий раз, когда ваш код использует устаревшие функции (вещи, которые не поддерживаются в Vue 3).
Процесс миграции
Вот общий рабочий процесс обновления вашего приложения с Vue 2 до Vue 3 с помощью билда миграции:
Установите Vue 3 и билд миграции (называемую @vue/compat) в существующее приложение Vue 2.
Исправьте ошибки, вызванные использованием функций, несовместимых с билдом миграции. Я объясню это немного позже.
После исправления ошибок ваше приложение Vue 2 должно работать нормально. Теперь нам просто нужно исправить код, следующий за предупреждениями, которые выдает нам билд миграции.
И, наконец, полностью переключитесь на Vue 3, удалив билд миграции.
Чтобы получить некоторый практический опыт работы с этим билдом миграции, мы собираемся использовать простое приложение Vue 2 в качестве примера и обновим его до Vue 3. Этот образец приложения содержит вещи, которые больше не поддерживаются в Vue 3, поэтому запуск его вместе с билдом миграции определенно даст нам ошибки и предупреждения. Но это хорошо, потому что это означает, что билд миграции работает, и нам просто нужно исправлять эти ошибки и предупреждения, одно за другим.
Пример приложения
Вы можете скачать пример приложения с github следующим образом:
Чтобы запустить приложение:
Теперь вы можете проверить приложение на localhost: 8080
Приложение очень простое. Он просто отображает заголовок и список чисел. Кнопка Pop будет удалять число из списка при каждом нажатии.
Если вы посмотрите код на main.js, App.vue и Heading.vue, то увидите, что в нем используются некоторые функции, которые не рекомендуются в Vue 3.
Способ рендеринга корневого компонента:
/src/main.js
Использование watch для массива без параметра deep:
/src/App.vue
Watch здесь наблюдает за массивом items, и всякий раз, когда он изменяется, срабатывает обработчик. Мы используем его для вывода сообщения в консоль браузера.
Использование такого функционального компонента:
/src/components/Heading.vue
Функциональный компонент по-прежнему разрешен в Vue 3, но он использует другой синтаксис.
Есть много других функций Vue 2, которые не рекомендуются в Vue 3. Вышеупомянутые функции используются только для демонстрации в этом руководстве.
Затем давайте установим билд миграции.
Установка билда миграции
Поскольку Vue-CLI является наиболее распространенным инструментом, который люди используют для создания приложений Vue 2, это руководство будет посвящено обновлению приложения Vue-CLI. Если вы используете Vite или другие системы сборки, вы можете ознакомиться с файлом readme на GitHub, посвященном миграции, для получения дополнительной информации.
Во-первых, мы собираемся убедиться, что @vue/cli-service находится в новейшей версии:
(запустите указанную выше команду в каталоге примера приложения)
Затем измените package.json, чтобы установить Vue 3, билд миграции (@vue/compat) и компилятор для компонентов (@vue/compiler-sfc).
(Нам пришлось удалить Vue 2 и vue-template-compiler из package.json, потому что они больше не нужны.)
Установите добавленные зависимости:
Остался только один шаг, чтобы заставить билд миграции работать.
Нам нужно создать файл vue.config.js, чтобы настроить некоторые параметры компилятора:
/vue.config.js
(создайте этот файл в корневом каталоге)
Теперь мы можем перезапустить дев сервер:
И вы должны увидеть такую ошибку:
Не волнуйся. Это просто означает, что билд миграции работает!
Затем давайте исправим эту ошибку.
Исправление ошибок
Как я уже сказал ранее, есть функции, несовместимые с билдом миграции, и они просто выдадут вам ошибки вместо дружественных предупреждений.
Источником именно этой ошибки является функциональный компонент Heading.vue:
/src/components/Heading.vue
Все, что нам нужно сделать, это удалить атрибут functional и использовать msg вместо props.msg:
/src/components/Heading.vue
Теперь ошибка должна исчезнуть.
Но если вы проверите браузер, вы должны увидеть список предупреждений в консоли браузера.
Исправление предупреждений
Поскольку наше приложение использует некоторые функции, устаревшие в Vue 3, мы получаем три предупреждения:
Один жалуется, что мы не можем использовать метод mount в main.js
Один жалуется, что мы не можем использовать render в том же файле
И один говорит нам, что нам нужно добавить параметр deep для watch, который мы использовали в App.vue.
Мы можем исправить первые два, инициализировав приложение с помощью createApp:
/src/main.js
Обновите приложение, и вы должны увидеть только одно предупреждение.
Все, что нам нужно сделать, это добавить параметр deep, как указано в предупреждении:
/src/App.vue
Конфигурации
Если по какой-то причине вы не можете изменить код в данный момент, но все же хотите избавиться от предупреждений, вы можете сделать это, установив конфигурации предупреждений.
Например, если мы не добавили deep в наш watch, мы можем перейти на main.js и отключить предупреждение для этой функции:
/src/main.js
Удаление билда миграции
На данный момент наше приложение полностью совместимо с Vue 3. Таким образом, билд миграции нам больше не нужен; он сделал свое дело.
Чтобы приложение работало в режиме Vue 3 вместо режима Vue 2 билда миграции, мы должны удалить @vue/compat.
Удалите его из package.json:
/package.json
После изменения package.json нам нужно снова запустить npm install:
Затем удалите импорт Vue и configuration из main.js:
И, наконец, удалите файл vue.config.js, который мы создали ранее.
Прочие соображения
На практике вы, вероятно, столкнетесь с гораздо большим количеством ошибок и предупреждений, чем то, что мы видели здесь, в этой простой демонстрации. Но рабочий процесс тот же: 1) установите Vue 3 с билдом миграции, 2) исправьте ошибки, 3) исправьте предупреждения и 4) удалите билд миграции.
Если вы используете Vue Router или Vuex, вам придется обновить их до версии 4. (подробнее в следующей части)
Кроме того, Vue 3 отказывается от поддержки IE 11. Так что, если вам нужно поддерживать IE 11, лучше всего подождать, пока различные функции Vue 3 будут перенесены в Vue 2. Функции обратного переноса будут доступны в Vue 2.7. около 2021Q3.
В следующей части этой мини-серии мы подробно рассмотрим все предупреждения об устаревании, с которыми вы, скорее всего, столкнетесь. Приложение теперь работает в актуальной версии Vue 3.
Всё, что нужно для начала работы с Vue.js
Скорее всего, вы, читая эти строки, уже слышали о JavaScript-фреймворке, который называется Vue. Если вы собирались его опробовать, но не очень хорошо представляли себе то, с чего вам стоит начать, значит — этот материал написан специально для вас. Его автор говорит, что хочет рассказать о том, почему ему очень нравится Vue. Кроме того, он собирается представить всем желающим 4 способа написания первого приложения на Vue.
В конце этого материала, вы найдете ссылки на целый курс по Vue.js.
Обзор материала
Обычно я стараюсь не рассказывать о слишком многих способах решения одних и тех же задач тем, кто только начинает осваивать некий фреймворк. Но в данном случае я полагаю, что показать несколько способов разработки первого приложения на Vue — это очень важно. Возможно, вам нравится работать с командной строкой, а возможно — с инструментами, оснащёнными графическим интерфейсом. Для Vue-разработки подходит и то и другое. Кроме того, Vue-приложения можно писать и не прибегая к командной строке. Для этого достаточно добавить на HTML-страницу тег для загрузки соответствующего скрипта. И, наконец, возможно, вам не хочется заботиться о настройке окружения разработки. Вместо этого вы стремитесь к тому, чтобы как можно скорее, без лишних движений, попробовать Vue. На самом деле, какой бы стратегии вы ни придерживались бы, здесь вы найдёте то, что поможет вам приступить к освоению Vue.
В процессе чтения этого материала вы будете встречать ссылки на полезные ресурсы. А когда вы прочтёте всю эту статью — я расскажу вам о том, на что вам стоит обратить внимание для дальнейшего изучения Vue. Надо отметить, что здесь мы не будем погружаться в тонкости Vue, не будем рассматривать все возможные механизмы этого фреймворка. Мы собираемся разобраться с основами и выйти на первое работающее приложение.
Для начала поговорим о некоторых интересных особенностях Vue.
Сильные стороны Vue
Сила Vue, на мой взгляд, заключается в том, насколько дружелюбно этот фреймворк относится к новичкам. Команда разработчиков Vue проделала замечательную работу, стремясь к тому, чтобы разработчики различной квалификации могли бы быстро приступить к продуктивной работе с фреймворком. Если вы знаете HTML, CSS и JavaScript — это означает, что вы буквально в шаге от того, чтобы разрабатывать довольно мощные приложения на Vue.
Я так же полагаю, что Vue, среди трёх ведущих инструментов для фронтенд-разработки (это — Angular, React и Vue), обладает самыми низкими входными барьерами. Это так по нескольким причинам, но для меня всё сводится к трём основным особенностям Vue:
▍Документация
Если поговорить с разработчиками, которым нравится Vue, то я думаю, что многие из них в первую очередь скажут о качестве документации этого фреймворка. Если посетить сайт Vue.js, то можно обнаружить, что документация разбита на несколько разделов:
▍Сообщество
Я, работая программистом, чувствую себя причастным к нескольким замечательным сообществам. Одно из них — это сообщество Vue. Его члены доброжелательны, дружелюбны, они более чем готовы оказать помощь тому, кто в ней нуждается. Рекомендую подписаться на Twitter-аккаунты следующих членов сообщества Vue. Так вам легче всего будет понять то, чем они занимаются, и узнать о том, чем они живут. Вот ссылки:
▍Vue — это прогрессивный фреймворк
Если посетить домашнюю страницу сайта Vue.js, то можно увидеть, что там его называют так: «Прогрессивный JavaScript-фреймворк». На первый взгляд это может показаться обычным маркетинговым ходом, но, немного вникнув в суть Vue, можно понять, что это не так. Для начала давайте определимся со значением слова «прогрессивное». Это — нечто, происходящее или развивающееся постепенно или поэтапно; это что-то такое, что выполняется пошагово.
Совсем скоро вы увидите, что при разработке Vue-приложений можно работать, поэтапно внедряя в них возможности этого фреймворка. Например, если у вас уже есть некий проект, то вы без проблем можете оснастить его поддержкой Vue. Начать можно с загрузки скрипта Vue и с написания нескольких строк кода.
Если вы хотите воспользоваться Vue CLI, средством командной строки Vue, для того, чтобы развернуть новый проект, обладающий необходимыми вам возможностями, то это — тоже не проблема. По мере того, как ваше приложение будет расти, и вам понадобятся достаточно продвинутые возможности вроде маршрутизации или управления состоянием, приложение несложно будет этими возможностями оснастить.
Как уже было сказано, Vue — это доступный фреймворк. Если вы уже знаете HTML, CSS и JavaScript, это значит, что вы готовы к тому, чтобы начать работу с Vue. Собственно говоря, если вы и правда стремитесь приступить к написанию Vue-приложений, тогда предлагаю этим и заняться.
Вариант №1: скрипт Vue, подключённый к странице
Обратите внимание на комментарий. Он указывает на одну важную вещь. А именно, сейчас мы подключили к странице версию Vue, предназначенную для разработки. Если некая страница предназначена для реального использования, то к ней нужно подключать продакшн-версию скрипта. Подробности об этом можно почитать здесь.
Теперь, после подключения скрипта, нам, в первую очередь, нужно добавить на страницу корневой элемент, к которому будет подключён экземпляр Vue:
После этого создадим новый экземпляр Vue и сообщим ему о том, к какому корневому элементу ему нужно подключиться:
Теперь создадим пару переменных. Они будут хранить значения, которые мы используем для вывода информации на страницу. Делается это путём объявления свойств объекта data :
Сейчас, когда данные готовы, мы готовы прибегнуть к возможностям Vue по выводу их на страницу. Делается это с использованием простых, удобных для восприятия конструкций:
Сейчас вы можете поздравить себя с тем, что вы только что создали своё первое Vue.js-приложение. Если открыть index.html в браузере, то в нём должна вывестись страница, на которой крупными буквами написано «Hello, Vue!». Ниже этой надписи должна находиться строка, выводящая текущие дату и время. В ходе разработки и исследования моего варианта примера я пользовался Visual Studio Code и расширением Live Server.
Если открыть эту страницу в браузере, то её внешний вид не изменится, но выводимое на ней время будет каждую секунду обновляться. При этом нам нет нужды в том, чтобы обновлять DOM вручную. Vue связал данные с DOM. При изменении данных меняется и то, что показано на странице.
Вариант №2: Vue CLI
Хотя мы и создали приложение, просто подключив скрипт Vue к странице, такой подход не отличается хорошей масштабируемостью. Если нужно разработать полноценное одностраничное приложение (Single Page Application, SPA) и при этом хочется воспользоваться вспомогательными инструментами Vue, тогда лучше всего будет прибегнуть к Vue CLI.
Если вы из тех, кто не очень любит работать в командной строке, тогда вы вполне можете воспользоваться инструментом с аналогичными возможностями, имеющим графический интерфейс (Vue UI).
▍Установка Vue CLI
Для начала нам нужно установить Vue CLI. Прежде чем это сделать — нужно обзавестись Node.js и npm. Если вы раньше не работали с Node.js и npm — уделите некоторое время на то, чтобы с ними познакомиться и немного в них разобраться. Вот команда, с помощью которой можно установить Vue CLI:
Список команд, поддерживаемых утилитой vue
Команда create принимает имя приложения. Создадим новое Vue-приложение, выполнив следующую команду:
Сейчас же нам достаточно согласиться с предлагаемыми по умолчанию параметрами. Это приведёт к созданию нового приложения.
Создание нового приложения с помощью Vue CLI
Теперь, в командной строке или во встроенном в ваш редактор терминале, выполните следующую команду:
Она запустит сервер, после чего выдаст сведения о том, как открыть начальную страницу приложения. А именно, это http://localhost:8080/.
Vue-приложение в браузере
Тут мы рассмотрели использование Vue CLI лишь весьма поверхностно. Однако я надеюсь, что этот пример показал вам то, как легко с помощью Vue CLI создавать новые приложения, которые обеспечены надёжной инфраструктурой и могут масштабироваться сообразно росту нужд развивающегося проекта.
Вариант №3: Vue UI
Вместе с Vue CLI, с инструментом командной строки, устанавливается и инструмент Vue UI. Для того чтобы его запустить — воспользуйтесь следующей командой:
В ходе её выполнения будет открыта страница нового приложения, находящаяся по адресу http://localhost:8000/dashboard.
С помощью Vue UI можно создать новый проект, который будет обладать теми же возможностями, что и проект, созданный средствами командной строки.
Создание нового проекта в Vue UI
После того как настройка проекта будет завершена, запустить его можно прямо из Vue UI, перейдя в раздел Project tasks и нажав на соответствующую кнопку.
Запуск приложения в Vue UI
Вариант №4: CodeSandbox
Хотя вышерассмотренные варианты создания первого Vue-приложения и позволили нам достичь поставленной цели, они требуют некоторой настройки окружения разработки. Возможно, вам это не подходит и вы до сих пор не создали своё первое Vue-приложение. Если так — тогда сейчас мы рассмотрим ещё один способ работы с Vue. Он заключается в использовании онлайновых сред разработки, одной из которых является CodeSandbox.
Прежде чем создавать проекты на CodeSandbox, вам понадобится зарегистрироваться на сайте или войти в систему с использованием GitHub-аккаунта. После этого нужно создать новую «песочницу» (в рамках проекта это называется «sandbox») и найти Vue среди доступных шаблонов (на закладке Popular templates или Client templates ).
Создание нового проекта, основанного на Vue, в CodeSandbox
После этого в вашем распоряжении окажется новое Vue-приложение. На следующем рисунке можно видеть, что в левой панели можно работать с файлами проекта, в центре находится окно редактора, а справа — область предварительного просмотра, в которой выводится работающее приложение.
Работа над приложением в CodeSandbox
Откройте в редакторе файл src/components/HelloWorld.vue и замените его содержимое на следующий код:
После этого вы увидите то же приложение, которым мы уже занимались. В ходе работы над проектом может возникнуть необходимость в том, чтобы кому-то его показать. Например — для того, чтобы о чём-то посоветоваться. CodeSandbox позволяет сделать это с помощью специальной ссылки.
Работа над приложением в CodeSandbox
Полезные ресурсы
Вот ссылки на некоторые из моих любимых ресурсов по Vue. Они помогут вам продвигаться в деле освоения этого фреймворка. Например — вот страница Awesome Vue, посетив которую можно получить представление о масштабах экосистемы Vue. Здесь можно найти репозитории Vue. Вот официальный блог проекта. Вот сайт сообщества Vue-разработчиков. Вот и вот — подкасты по Vue. Вот — страницы нескольких проектов, основанных на Vue: VuePress, Nuxt, Gridsome.
Что дальше?
Независимо от того, каким фреймворком вы пользуетесь для разработки фронтенда — вам нужно поддерживать в хорошем состоянии свои знания по JavaScript. Чем больше времени вы сможете уделить совершенствованию своих знаний по JS — тем лучше. Если вы хорошо знаете JavaScript — это значит, что вы сможете справиться с любым фреймворком или с любой библиотекой, с которыми вам может понадобиться работать.
Я уже говорил о руководстве по Vue из официальной документации. Но о нём стоит упомянуть снова. Я бы, если был бы начинающим разработчиком, постарался бы как можно тщательнее разобраться с этим руководством, читал бы его и перечитывал. Но при этом я не забывал бы испытывать на практике те примеры кода, которые там встречаются. Не зря говорят, что повторенье — мать ученья. Повторение играет важную роль в процессе изучения новых технологий, и без него вам не обойтись.
В процессе работы с документацией стоит обратить особое внимание на следующие базовые концепции Vue:
Итоги
Если вы следите за моими публикациями в Twitter, то вы знаете, что я — большой фанат Vue. Мне нравится создавать приложения, основанные на компонентах. Я полагаю, что использование Vue не только упрощает работу, но и делает процесс написания кода приятным и увлекательным занятием.
Уважаемые читатели! Если вам приходилось недавно изучать свой первый клиентский фреймворк — просим рассказать о том, как это было.
Vue-UI — первый взгляд
Краткий и наглядный обзор возможностей новейшей утилиты Vue UI для развертывания новых проектов
Благодаря недавнему выпуску стабильного релиза утилиты Vue CLI сейчас самое время взглянуть на некоторые из её новых возможностей. В результате полной переработки утилиты на основе отзывов, полученных от растущего сообщества Vue.js, эта версия предоставляет новый набор инструментов, ориентированных на улучшение процесса разработки.
Одной из особенностей, которая без сомнения позволит улучшить рабочий процесс для каждого разработчика — это Vue UI, графический пользовательский интерфейс, позволяющий создавать, обновлять и управлять всеми аспектами рабочих проектов.
Примечание переводчика: не стоит путать Vue UI c фреймворком Vue UI Framework, который является разработкой компании Telerik и предоставляет собой готовый набор UI-элементов под Vue.js наподобие другого популярного фреймворка — Vuetify.js. Также стоит заметить, что Vue UI не является каким-либо отдельным продуктом. На самом деле это просто часть консольной утилиты vue-cli версии 3.
В данной статье я познакомлю читателей с некоторыми из основных возможностей, которые может предложить бета-версия Vue UI.
Подготовка
Примечание переводчика: если версия утилиты vue-cli является устаревшей (например — 3.0.0-beta.15 ), её можно обновить до последней версии точно такими же командами, фактически переустановив эту утилиту в системе.
Важное замечание переводчика:
Чтобы инициализировать графический интерфейс Vue UI в текущем каталоге, введите следующую команду:
Данная команда автоматически запустит браузер по умолчанию. Если предположить, что в текущем каталоге пока нет Vue-проектов, то в окне браузера отобразится вид, подобный показанному ниже — «Нет проектов» («No existing projects»):
При запуске графический интерфейс Vue UI откроет окно «Диспетчер проектов» («Project Manager») для быстрого доступа к существующим проектам, как только вы их создадите.
Создание первого проекта
Как показано на изображении выше, на основной панели навигации Vue UI располагаются три кнопки: «Проекты» («Projects»), «Создать» («Create») и «Импорт» («Import»). Чтобы создать новый Vue-проект, нажмите кнопку «Создать» («Create»):
Инструмент создания проекта позволяет выбрать, в какой директории вы бы хотели создать свой новый проект.
После выбора папки нажмите кнопку «Создать новый проект» («Create a new project here»), чтобы запустить пошаговое руководство:
На вкладке «Детали» («Details») введите имя директории, в которой будет размещен новый проект и предпочитаемый менеджер пакетов (npm или yarn), а затем продолжите, нажав кнопку «Далее» («Next»):
На шаге «Наборы настроек» («Presets») необходимо выбрать готовые настройки ( preset ) для будущего проекта. В большинстве случаев для начала работы будет более чем достаточно настроек по умолчанию («Default preset»).
Но в данном уроке мы усложним задачу и вручную создадим свой собственный набор настроек для нашего проекта.
Для этого выберите пункт «Ручной» («Manual») и нажмите кнопку «Далее» («Next»):
На вкладке «Дополнения» («Features») можно настроить различные параметры будущего проекта — от использования Babel и TypeScript до включения дополнительных компонентов Vue, таких как Vuex или Vue Router.
Наконец, в зависимости от созданного набора параметров на предыдущем шаге будет отображен финальный экран «Конфигурация» («Configuration») для выбора дополнительных библиотек, которые можно добавить в будущий проект:
В моём случае я решил использовать проверку синтаксиса исходного кода и включить поддержку модульных тестов. Для этого я добавил такой популярный линтер как Prettier и не менее популярную библиотеку для тестирования Jest.
Наконец, нажмите кнопку «Создать проект» («Create Project»), чтобы сохранить свои настройки в качестве пресета ( preset ), которые вы сможете повторно использовать позже. И запустите созданный проект:
После создания проекта Vue UI сделает перенаправление в окно «Плагины проекта» («Project plugins»), в котором отобразится список установленных в проекте плагинов на основе вашего предыдущего выбора:
В этом окне вы можете обновить установленные плагины, добавить новые плагины, включить инструмент отладки Vue Devtools и многое другое.
Добавление плагинов
Если необходимо установить дополнительные Vue-плагины после создания проекта, то это легко сделать в данном окне. Для этого нажмите кнопку «Добавить плагин» («Add Plugin»), чтобы начать поиск («Search») того плагина, который вам необходим:
Обратите внимание, что некоторые плагины обозначены как «Официальный» («Official»). Это означает, что данные плагины или непосредственно разрабатываются основной командой Vue.js или официально одобрены этой командой.
Выберите интересующий вас плагин и нажмите кнопку «Установить» («Install»):
Обратите внимание, что в текущей версии Vue UI возможно установить только один плагин за один шаг.
В зависимости от выбранного плагина вам может потребоваться сделать различные дополнительные настройки, связанные с этим плагином.
После завершении установки выбранных плагинов будет показано окно «Изменения файлов» («Files changed»), в котором можно выполнить сохранение внесенных в проект изменений при помощи системы контроля версий Git:
В обновленном окне «Плагины проекта» («Project plugins») в списке замечаем добавленный плагин vue-i18n наряду с плагинами, установленными во время первоначального создания проекта:
Настройка проекта
Графический интерфейс Vue UI позволяет изменять конфигурацию проекта после его создания. Для этого выберите значок конфигурации ( шестеренка) в левом боковом меню. В результате отобразится текущая конфигурация нашего Vue-проекта:
В этом окне можно легко отредактировать все доступные настройки проекта. Я рекомендую вам ознакомиться с документацией, чтобы узнать больше о возможных вариантах конфигурации проекта.
Обратите внимание, что поскольку мы решили использовать ESLint для конкретного проекта, нам доступен дополнительный элемент меню «Конфигурация ESLint» («ESLint configuration») для настройки правил плагина ESLint.
Запуск скриптов проекта
Например, мы можем запустить процесс сборки проекта в режиме разработки ( development ):
Интерфейс предоставляет нам дополнительные сведения о нашем приложении, такие как размер сборки, индикаторы времени загрузки и подробное описание созданных наборов файлов.
Если вы хотите получить более подробную информацию о различных модулях вашего приложения и о том, как они влияют на общий размер сборки, вы можете перейти на вкладку «Анализатор» («Analyzer»):
Локализация приложения
Ранее в этом уроке мы установили плагин vue-i18n через интерфейс управления Vue UI.
Если выбрать этот значок, то откроется окно «Локализации проекта» («Project localizations») с графическим интерфейсом для настройки данного плагина. Здесь можно задать статический текстовый контент и соответствующую ему локализацию ( перевод этого контента) на любых выбранных вами языках:
В данном случае мы видим, что «Английский» («English») уже определен как язык по умолчанию. Также присутствует тестовое сообщение «Привет i18n!» («hello i18n!»).
Чтобы приступить к локализации статического текстового контента приложения, сначала необходимо добавить дополнительные языки. Для этого нажмите кнопку «Добавить язык» («Add locale»):
В данном примере я добавил поддержку французского языка «fr». Теперь я могу приступить к переводу оригинального английского текста на его французский эквивалент:
Если посмотреть на исходный код приложения в редакторе Visual Studio Code, то увидим, что интерфейс локализации автоматически сгенерировал соответствующий исходный код:
Заключение
Как вы могли заметить, что хотя Vue UI находится все еще в бета-версии, это очень полезный и перспективный инструмент. Несомненно со временем он станет еще более полезным, как только разработчики начнут создавать свои собственные плагины для удовлетворения необходимых потребностей.
В следующей статье мы узнаем, как создавать собственные плагины, чтобы улучшить и оптимизировать процесс разработки приложений.