Изучите новую позицию vue3 (использование vite и анализ исходного кода)

Vue.js

Прошло много времени с тех пор, как You Da выпустила vite, и, видя стремительное развитие vite, я задумался и решил воспользоваться этим. В предыдущем раннем внедрении vue3 процесс отладки проекта был немного громоздким.Далее давайте посмотрим, как использовать vite для изучения vue3, и проанализируем, что vite сделал для нас. Все знают вите🐂🍺, так что это такое🐂🍺, где оно🐂🍺?

Посмотрим, что скажет Юда.

  • Быстрый холодный старт
  • Мгновенное горячее обновление
  • Действительно компилируется по запросу

Hello world

Создайте проект и запустите

$ yarn create vite-app myViteApp && cd myViteApp && yarn && yarn dev

Структура каталогов

|-- public
|-- src
| |-- assets
| |-- components
| |-- App.vue
| |-- index.css
| |-- main.js
|-- .gitgnore
|-- index.html
|-- package.json

viteСгенерированная для нас структура каталогов очень проста, основные файлы иvue-cliфайлы одинаковые

viteПростой, эффективный, мощный, обучающийvue3Когда вам не нужны все виды окружающей среды

Что сделал для нас тихонечко Вите?

Давайте сначала откроем файл

  • index.html
  • src/main.js

index.htmlвведен вsrc/main.js,main.jsВнедрить App.vue и навесить его в html, процесс не простой, и браузерный компонент действительно рендерится.

Реализация этого шага неотделима от модулей Эс, и браузер проходит<script module>, генерировать HTTP-запрос для каждого импорта, служба vite dev перехватывает http-запрос, преобразует код и возвращает его в браузер для рендеринга.

Проще говоря, Vite компилирует статические ресурсы через узел и возвращает их в браузер для рендеринга.

принцип жизни

Исходная версия:v0.20.8

Обычно, когда мы вводим URL-адрес в браузере для посещения веб-сайта, браузер обращается к серверу, чтобы запросить соответствующий файл ресурсов, как всем известно. Итак, когда мы бежимyarn devПозже,viteначалdev serverЧтобы перехватить запрошенный нами ресурсный файл, чтобы страница, которую мы видим в браузере, на самом деле была html-файлом, обработанным vite.

  • Исходный код:

Vite вставляет следующий код в наш html, объявляя среду выполнения и вводя код для горячей замены модуля.

<script type="module">
import "/vite/hmr" # 模块热更换
window.__DEV__ = true
window.process = { env: {"NODE_ENV":"development","BASE_URL":"/"}}
</script>

здесьimport "/vite/hmr", браузер перейдет кdev serverЗапрос hmr... фактически возвращает файл client.ts в исходном коде.

clientадрес файла/src/client/client.ts

этоclientЗапустите службу сокетов в браузере, примите серию инструкций в режиме реального времени, а затем обработайте логику ответа в соответствии с инструкциями.

  • подключено: подключение к сокету выполнено успешно

  • vue-reload: перезагрузка компонента

  • vue-rerender: повторный рендеринг компонента

  • обновление стиля: обновление стиля

  • style-remove: удаление стиля

  • js-update: обновление файла js

  • полная перезагрузка: перезагрузка страницы

  • Исходный код:

Серверная часть отвечает за отправку инструкций клиенту на различных этапах выполнения.

братьvue-reloadИсходный код примера выглядит следующим образом

когдаviteСистема мониторинга файлов компонента .vue проанализирует и скомпилирует компонент vue после наблюдения за изменением компонента .vue и отправит сообщение клиенту.vue-reloadинструкции и отправить скомпилированный код клиенту.

Thank you

Когда друзья изучают фреймворк, недостаточно просто научиться использовать API, если у вас есть более глубокое понимание внутренней реализации фреймворка, будут разные выгоды. Относительно легко прочитать исходный код vite, и друзья могут найти его вgithubЗагрузите исходный код и попробуйте изучить его

дляviteЭто в основном конец объяснения.Спасибо за терпение.Если есть какие-то ошибки в тексте,поправьте меня.

在这里插入图片描述

яColin, вы можете отсканировать QR-код ниже, чтобы добавить меня в WeChat, комментарии и обмены.

Категории