Переводчик пресса:Инструменты разработки Vue становятся все лучше и лучше!
- оригинал:Vue UI: A First Look
- Переводчик:Fundebug
В этой статье используется свободный перевод, и авторские права принадлежат оригинальному автору.
С последней стабильной версиейVue CLI 3Скоро, пора посмотреть, что нового и интересного. Этот выпуск, значительно улучшенный на основе отзывов всего сообщества разработчиков Vue.js, предлагает множество инструментов, ориентированных на рабочие процессы.
Я думаю, что функция, которая повысит производительность каждого разработчика Vue.js, — это пользовательский интерфейс Vue. Визуальный графический интерфейс позволяет создавать, обновлять и управлять всеми аспектами ваших проектов.
Сегодня я расскажу вам о функциях, доступных в бета-версии Vue UI.
Начинать
Во-первых, мы убеждаемся, что установлена последняя версия Vue CLI. Откройте Терминал и введите:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
вы можете использовать-VДавайте посмотрим на только что установленную версию:
vue -V
# 应该会输出下面的结果
3.0.0-rc.3
Чтобы инициализировать ваш пользовательский интерфейс Vue, в чистом каталоге введите:
vue ui
Эта команда автоматически откроет ваш браузер. Вам необходимо убедиться, что в текущем каталоге нет других элементов. Страница, отображаемая браузером, выглядит следующим образом:
Пользовательский интерфейс Vue по умолчанию отображает первую вкладку «Управление проектами», и вы можете легко просмотреть текущий созданный проект.
Создайте свой первый проект
Чтобы создать новый проект, щелкните средний"Create"кнопка:
Инструмент создания проекта позволит вам выбрать, в каком каталоге создавать (на всякий случай, вы хотите создать в другом каталоге); когда папка выбрана, нажмите"Create a new project here"кнопку, и вы войдете в пошаговое руководство:
Выберите каталог для своего проекта, выберите предпочтительный менеджер проектов/пакетов (npm или yarn) и нажмите"Next":
Далее вам будет предложено настроить предустановленные параметры; в большинстве случаев достаточно конфигурации по умолчанию. Эта статья служит справочной статьей, мы выбираем ручную настройку. выберите"Maual", затем нажмите"Next":
Есть много вариантов для настройки, используйте Babel, TypeScript, включите компоненты Vue Vuex, Vue Router и, наконец, в зависимости от вашего выбора будет соответствующая дополнительная конфигурация библиотеки:
Я решил использовать ESLint и включил модульное тестирование, я решил добавить Prettier и Jest в свой стек и выполнять Lint автоматически при сохранении/фиксации кода.
Наконец, нажмите"Create Project", вам будет предложено сохранить текущую конфигурацию, а затем создать проект.
Когда проект будет успешно создан, Vue UI отобразит все плагины, настроенные для проекта:
Отсюда вы можете обновлять плагины, устанавливать новые плагины, открывать Vue DevTools и многое другое.
Добавить плагин
Как только ваш проект создан, установить новые плагины очень просто. нажмите"Add Plugin", затем найдите нужный плагин:
Вы найдете некоторые плагины, отмеченные"Official", то они официально разработаны Vue.js.
Выберите нужный плагин и нажмите"install"кнопка:
Обратите внимание, что в текущей версии вы можете установить только один плагин за раз. В зависимости от того, какой плагин вы установили, вам может быть предложено сделать некоторые дополнительные настройки, связанные с этим плагином. Когда установка будет завершена, вы можете переключиться на"Files changed"страницу, выберите отправку этих изменений кода.
Наконец, наш только что установленный плагин уже есть в списке установленных плагинов:
Настройте свой проект
Пользовательский интерфейс Vue позволяет изменять конфигурацию после создания проекта. Щелкните второй значок конфигурации слева, после чего вы увидите текущую конфигурацию:
Мы можем легко изменить все опции. я предлагаю тебеЧитать документациюУзнайте, что можно изменить.
Выполнять задачи проекта
Еще одна полезная функция заключается в том, что пользовательский интерфейс Vue позволяет вам напрямую выполнять задачи, определенные в вашем проекте (скрипты npm). Например, мы хотим запустить разрабатываемую версию сервера:
Интерфейс предоставляет множество интересных технических деталей, таких как размер пакета, подсказки по времени загрузки и подробное время, затраченное на создание каждого ресурса. Если вы хотите узнать более подробную информацию, нажмите"Analyzer"Опции:
Если вы хотите оптимизировать размер приложения, вы можете использовать этот инструмент для анализа того, какие статические ресурсы слишком велики и могут быть соответствующим образом уменьшены.
локализация
Ранее мы установили плагин Vuei18n. Когда мы установили плагин, дополнительное подменю дает нам возможность настроить локализацию.
Когда мы посетим страницу конфигурации локализации, мы обнаружим, что «английский» уже является конфигурацией по умолчанию, и есть пример по умолчанию «hello i18n!». Мы локализуем весь текст, и нам нужно добавить языки, которые мы хотим поддерживать. Сначала нажмите"Add locale"кнопка:
В этом примере мы решили добавить французскую «fr», а затем мы можем перевести для этого весь английский язык на французский.
Если мы перейдем к коду, то увидим соответствующий файл кода:
Как видите, пока Vue UI находится в стадии бета-тестирования, он будет очень полезным инструментом.
О Фундебаге
FundebugСосредоточьтесь на JavaScript, апплете WeChat, мини-игре WeChat, апплете Alipay, React Native, Node.js и мониторинге ошибок онлайн-приложений Java в режиме реального времени. С момента официального запуска Double Eleven в 2016 году Fundebug обработал в общей сложности более 1 миллиарда ошибок, а платными клиентами являются Google, 360, Kingsoft, People.com и многие другие бренды. приветствую всехБесплатная пробная версия!
Уведомление об авторских правах
Пожалуйста, указывайте автора при перепечаткеFundebugИ адрес этой статьи:
ошибка blog.fun.com/2018/07/10/…