Серия учебных пособий по Vue является продолжением предыдущей главы, посвященной ограблению, из сводки фактического боевого проекта, идей дизайна и сводки опыта интегрированного реального боевого процесса. Древние говорили:工欲善其事必先利其器Таким образом, первая часть этого руководства закладывает основу для того, чтобы учащиеся сначала разрабатывали инструменты, а затем продолжали улучшать результаты бизнеса и опыта.
Написано в прошлом годуVue.js渡劫系列, Если читатели заинтересованы, они также могут сначала иметь общее представление и прикрепить портал:
«Vuejs Tribulation Series 1: Детали, которые необходимо освоить в ежедневной разработке (кенг)»
«Vuejs Tribulation Series II: краткий анализ конфигурации в рамках наиболее полного проекта vue-cli»
Редактор (плагин)
VSCode
Не сравнивая различные преимущества и недостатки между IDE, от оригинального блокнота до возвышенного текста, до последующих Webstorm и Atom, VSCode является самым простым в использовании.Если вам нужно назвать несколько причин, я думаю, что их три:
- Произведено Майкрософт
- Богатая система плагинов и инструменты отладки
- выглядит старым
Vue 2 Snippets & Vue VSCode Snippets
Вышеупомянутые два являются инструментами Snippets, основанными на прогрессивной среде разработки Vue (2.x), всегда неизбежно повторение ввода в процессе разработки, поэтому эти два плагина могут в значительной степени освободить вас от повторяющейся работы.VSCode-扩展：商店- 搜索“Vue”, ты можешь найти:
Автор предпочитаетVue 2 SnippetsКлючевые слова, которые пробуждают Snippets, состоят из строчных букв, что уменьшает количество переключений Caps Lock. Эффект следующий:
Vetur
VeturЭто официально рекомендуемый инструмент, разработанный Vue в VSCode, с语法高亮,自动完成,格式校验и другие мощные функции, среди которых функция автоматического завершения и связывания атрибутов - это две функции, которые я использую больше всего:
自动补全,До введения машинописного текста имя свойства объекта было вообще головной болью.Старый проект автора разрабатывался с использованием стека Vue+ES6.С помощью функции завершения плагина вводthis.В будущем он автоматически предложит текущему владельцу этогоnameАтрибуты;
属性跳转, аналогично способу автоматического поиска переменных класса в Java IDE, вы можете быстро найти переменные свойств и функциональные переменные под этим, просто передайтеctrl+左键Вы можете легко прыгать, что сильно снижает эффективность.
Отладчик
Vue Devtools
Vue DevtoolsЭто программа-расширение на основе браузера Chrome. Пользователи могут установить расширение сразу после переворачивания стены или установить его в автономном режиме. В Интернете есть множество руководств по установке, поэтому оно больше не является громоздким.
После установки откройте страницу локально разработанного проекта (служба разработки npm run dev), пока в правом верхнем углу есть значок Vue, а в инструменте разработчика есть вкладка Vue, это означает, что установка прошла успешно:
vue-devtools — это инструмент для отладки системы, основанный на vue, vuex и vue-router.Откройте панель vue, и вы увидитеComponents, Vuex, Eventsа такжеRefreshчетыре функции;
Components
ComponentsПанель с компонентами слеваComponents Treeкомпонентный состав всей страницы легко просматривается через дерево компонентов;
Справа вы можете увидеть свойства в компонентеProps, dataа такжеComputedсвойства, вы можете увидеть, привязан ли компонент к глобальному состояниюstateДанные,ComponentsЧаще всего панели используются для наблюдения за состоянием сложных компонентов.
Vuex
VuexПанель с компонентами слеваmutations flow, в приведенном выше примере показана мутация, задающая время страницы, которая срабатывает раз в секунду, и каждый коммит можно отслеживать на панели; справа — некийmutationилиactionПолезная нагрузка данных и соответствующий тип;
Кроме того,VuexПанель также обеспечивает时间旅行функция, наведя курсор на определеннуюmutation, вы можете легко вернуться в определенное состояние.В сочетании с этим случаем просто случается, что временная точка setPageTime может быть легко возвращена в историческое состояние.
Events
EventsПанель с компонентами слеваevents flow, в приведенном выше примере показаны события текущего компонента страницы, выберите соответствующее событие, загрузка данных события будет отображаться с правой стороны, вы можете легко отслеживать последовательность запуска события, и вы можете легко наблюдать, когда отладка сложного потока событий компонента Изменения в потоке данных.
Refresh
Буквально, это цель обновления.
Эффективно используйте ключевое слово отладчик
В прошлом многие дети спрашивали, что при разработке Vue было сложно отлаживать, и они не могли добавлять точки останова.debugger, вы можете легко отладить точку останова:
при бегеnpm run devПозже, в кодеdebuggerРучная установка точек останова После того, как веб-сокет обновит страницу, он автоматически перейдет к строке точки останова и легко проверит свойства кода контекста.
Vue-cli3
vue-cliВероятно, самый удобный шаблон изvue-cli3По сравнению с предыдущими строительными лесами можно найти множество мер по оптимизации опыта, среди которых следует отметить способ визуальной конфигурации.
Установить
npm install -g @vue/cli# ORyarn global add @vue/cli
визуализация
vue ui
Выбор плагина
пройти черезswitchПереключить режим, настроить, использовать лиBabel,typescriptи другие компоненты;
Установить зависимости
Подождите минутку, может пора выпить чашечку кофе.
Управление конфигурацией графического интерфейса
управление зависимостями
Легко устанавливайте и удаляйте зависимости через графический интерфейс.
PWA
Это просто для того, чтобы показать часто используемые элементы конфигурации, дополнительные настройки можно найти на официальном GitHub:
Общая оценка,cli3принести лучший опыт и эффективность разработки, основываясь наvue-cli3Он может легко реализовать наиболее подходящие леса для команды.
Суммировать
Развитие бизнеса основано на инструментах, но может быть отделено от инструментов.Инструменты предназначены для того, чтобы мы могли больше сосредоточиться на развитии бизнеса и сократить избыточную и излишнюю рабочую силу. Я считаю, что эта статья может помочь вам более или менее, напримерVueКак инструмент, помогающий нам больше сосредоточиться на развитии бизнеса и повышении эффективности. Сократите сверхурочные часы и увеличьте время, проводимое с семьей и друзьями.
PS: Если есть лучший инструмент для повышения эффективности разработки Vue, вы можете написать об этом в комментариях.