Отладка исходного кода

Бывают случаи, когда вы хотите запустить и протестировать фактический исходный код Vue.js.
В рамках подхода этой книги мы настоятельно рекомендуем читать и понимать исходный код, а также проводить чтение исходного кода и тестовые запуски.

Поэтому мы представим несколько методов отладки исходного кода, которые не рассматриваются в основном тексте.

(Мы представим их в порядке, который легко понять.)

Использование SFC Playground

Это самый простой метод. Он широко известен и даже есть ссылка в официальной документации.

https://play.vuejs.org

В этой песочнице вы можете не только писать Vue компоненты и проверять их поведение, но и проверять результаты компиляции SFC.
Это удобно, потому что вы можете быстро проверить это в браузере. (Конечно, вы также можете поделиться этим.)

Использование тестов vuejs/core

Далее, давайте попробуем запустить тесты vuejs/core. Естественно, вам нужно клонировать исходный код vuejs/core.

git clone https://github.com/vuejs/core.git vuejs-core
# ПРИМЕЧАНИЕ: Рекомендуется сделать его понятным, так как имя репозитория `core`

Затем,

cd vuejs-core
ni
nr test

Вы можете запустить тесты, поэтому не стесняйтесь модифицировать интересующий вас исходный код и запускать тесты.

Есть несколько тестовых команд помимо test, поэтому если вам интересно, проверьте package.json.

Вы можете читать и понимать тестовый код, модифицировать код и запускать тесты или добавлять тестовые случаи. Есть различные способы использования.

Запуск исходного кода vuejs/core

Далее, это самый удобный, но все же метод фактической модификации и запуска исходного кода vuejs/core.

Что касается этого, мы подготовили проекты, которые могут использовать HMR с vite как для SFC, так и для standalone, поэтому попробуйте использовать их. Этот проект находится в репозитории chibivue, поэтому, пожалуйста, клонируйте его.

git clone https://github.com/chibivue-land/chibivue.git

После клонирования запустите скрипт для создания проекта.

В это время у вас должны спросить абсолютный путь к локальному исходному коду vuejs/core, поэтому, пожалуйста, введите его.

cd chibi-vue
ni
nr setup:vue

# 💁 введите абсолютный путь к вашему локальному vuejs/core:
#   например, /Users/ubugeeei/oss/vuejs-core
#   >

Это создаст проект Vue в репозитории chibivue, который указывает на локальный исходный код vuejs/core.

Затем, когда вы захотите начать, вы можете запустить его следующей командой и проверить работу, модифицируя исходный код vuejs/core.

nr dev:vue

Конечно, HMR на стороне песочницы,

Даже если вы модифицируете код vuejs/core, HMR будет работать.

---

Также, если вы хотите проверить это в standalone, вы также можете использовать HMR, изменив index.html для загрузки standalone-vue.js.