1. Введение
Привет всем, яВакагава. добро пожаловать, чтобы добавить меня wechat
ruochuan12, Подписывайтесь на меняПубличный аккаунт Wakagawa Vision, долгосрочный обмен и обучение. недавно организованныйЧитайте исходный код вместеДеятельность. Читать около 200 строк исходного кода в неделю. Многие друзья, которые впервые читают исходный код, чувствуют себя очень полезными.Если вам интересно, вы можете добавить меня в WeChat.ruochuan12, втянуть вас в групповое исследование.
Первая неделя гласила:Говорят, что 99% людей не знают, что vue-devtools может напрямую открыть соответствующий файл компонента? Принцип этой статьи раскрывается. Хотя я написал статью, я все же считаю, что некоторые друзья до сих пор не знают эту функцию.
В тексте используется проектvue3, поэтому вам нужно установитьvue3версия, соответствующаяvue-devtools.
Но есть много мелких партнеров, которые не могут открыть Google App Market. Некоторые люди говорят, что его нельзя загрузить из магазина Google Play. Но часто именно этот шаг останавливает многих пользователей и открывает большие возможности для бизнеса. Например, появились различные веб-сайты с подключаемыми модулями. Поэтому я написал статью, как мне упаковать и установитьdevtoolsплагин.
Дружеское напоминание: статья относительно проста. Подсчитано, что некоторые люди скажут, что это также должно написать статью. На самом деле людей, которые не умеют упаковывать вещи, очень много. Написание статьи также напоминает всем о необходимости читать больше официальных документов и
github README.
2. Упаковка плагинов и способы установки
Открытьgithub vue-devtoolsЯ обнаружил, что имя также было обновлено, прежде чем оно было названоvue-devtools,сейчасdevtoolsДа, даже вышлоофициальный сайт разработчика.
2.1 Пакет vue-devtools, соответствующий версии vue3
Посмотреть официальныйREADME:vue-devtools contributing
git clone https://github.com/vuejs/devtools.git
cd devtools
# 如果没安装 yarn，可以 npm i yarn -g
# 安装依赖
yarn install
# 构建
yarn build
Неудивительно, что после успешной сборки можно получитьdevtools/packages/shell-chrome/содержание.
2.2 Пакет vue-devtools, соответствующий версии vue2
Посмотреть официальныйREADME:vue2 devtools REAMDE.md
# 可以复制上文克隆的项目
# 终端下复制 或者手动复制
cp -rf devtools devtools-v2
cd devtools-v2
# 复制成功后，切换分支 tag 到 v5.3.4 ，这是 vue2 对应的 devtools。
git checkout v5.3.4
# 删除 node_modules
rm -rf node_modules
# 安装依赖
yarn install
# 构建
yarn build
Аналогично, что неудивительно, после успешной сборки можно получитьdevtools-v2/packages/shell-chrome/содержание.
2.3 Установка
Как показано выше, Google Chrome открываетсяchrome://extensions/, щелкните в правом верхнем углу, чтобы включить开发者模式, нажмите加载已解压的扩展程序, выберите созданный пакетdevtools-v2/packages/shell-chrome/Папка может быть установлена или напрямую перетащена в нее, также может быть установлена,vue2а такжеvue3плагины могут сосуществовать.
После установки вы можете успешно отлаживать и, кстати, можете проверить детали плагина. В настоящее времяvue3Соответствующая версия есть6.0.0-beta-15.vue2Соответствующая версия есть5.3.4. Среди деталей,允许访问文件网址, он включен по умолчанию, рекомендуется включить его.
3. Резюме
Статья относительно короткая, если вокруг вас новые коллеги, вы все еще пытаетесь установитьdevtoolsЕсли плагин обеспокоен, вы можете поделиться этим с TA.
Вдохновение: нам нужно расширить доступ к официальным документам илиgithub READMEпривычка. хороший проект с открытым исходным кодом,READMEВообще очень хорошо написано. В дополнение к любым новым функциям, как правило, в официальной документации илиREADMEОно будет воплощено. Хотя общийREADMEНекоторых людей может заблокировать английский язык, но если вы действительно не понимаете, вы можете использовать инструменты перевода, такие как Google Translate.
Еще раз дружеское напоминание: я упаковал плагин и поместил его на сетевой диск Baidu.В моем публичном аккаунте: Ruochuan Vision ответьте на ключевое слово [плагин], чтобы получить две версии плагина.
devtoolsУстановите, и обе версии могут сосуществовать.
о
Автор: Чанг ИВакагаваНазвание смешано в реках и озерах. По дороге на фронт | Энтузиасты РРТ | Знаю очень мало, только хорошо учусь.
Публичный аккаунт Wakagawa Vision
Блог Вакагавы
segmentfaultКолонна Вакагава Видение, открылВидение ВакагаваКолонка, добро пожаловать на внимание ~
Колонка самородков, добро пожаловать, обратите внимание~
Колонна видений Чжиху Руочуань, открылВидение ВакагаваКолонка, добро пожаловать на внимание ~
github blog, спроситьstar^_^~