1. Введение

Vue — это популярный фреймворк для фронтенд-разработки, который можно встроить прямо в веб-страницу для реализации некоторых функций нашего сайта или использовать вместе с инструментами для сборки и создания одностраничных приложений. Прежде всего, стоит отметить, что я считаю, что наилучшей практикой для Vue SPA является использование инструментов для сборки. Этот проект не ставит целью оспорить эту практику, а скорее пытается исследовать возможности создания чисто фронтенд SPA с использованием Requirejs, Vue, Vuex, Vue-router, axios и ant.design.

Идея проекта возникла благодаря библиотеке http-vue-loader, которая позволяет фронтенду напрямую загружать файлы .vue. Это показалось мне очень интересным, и я решил изучить исходный код этой библиотеки. Принцип работы оказался не слишком сложным, но он вдохновил меня на создание чисто фронтенд SPA с помощью http-vue-loader. Конечно, в процессе реализации я столкнулся со множеством проблем, и без понимания принципа работы http-vue-loader этот проект был бы невозможен. Поэтому я оптимизировал http-vue-loader для этого проекта, включая оптимизацию стилей, модулей и шаблонов, а также улучшил управление кэшированием сетевых загрузчиков.

Этот проект основан на vue-antd-admin и имеет сходство более 80%, но несовместим с ним, поскольку это чисто фронтендная версия, и она не поддерживает шаблоны, загружаемые через CMD.

2. Предварительный просмотр

require-vue-admin

3. Особенности проекта

• Файлы Vue практически идентичны тем, которые используются в режиме командной строки.
• Поддержка асинхронных и неасинхронных компонентов (последние не используются в этом проекте).
• Возможность загрузки зависимостей и компонентов по псевдонимам (@ для корневого пути, @CMP для пути к компонентам, @IMG для пути к изображениям и т. д.).
• Поддержка локальных стилей.
• Использование синтаксиса ES6 в файлах Vue.
• Поддержка сред разработки и производства.
• Кэширование с возможностью обновления в рабочей среде путём изменения глобальной версии.
• Горячая перезагрузка.
• Система разрешений.

4. Замечания

Проект зависит от множества ресурсов из CDN, поэтому при локальном построении убедитесь, что у вас есть доступ к сети.

5. Заключение

В коде важный модуль http-vue-loader снабжён комментариями. Перед чтением и пониманием исходного кода рекомендуется ознакомиться со следующими темами:

• Программирование на среднем уровне в HTML/JAVASCRIPT/CSS3.
• Знакомство с Vue.js и понимание принципов асинхронной загрузки компонентов.
• Знание особенностей использования HTML-шаблонов в шаблонах Vue (см. документацию Vue).
• Опыт работы с Promise.
• Понимание AMD и CMD модульности.

Проект не совместим с IE. Если у вас возникнут проблемы, вы можете оставить комментарий.