vue element ui scaffold webpack4

vue-element-ui-scaffold-webpack4

Примечание:

• Он был обновлен до webpack5 . Если вам нужно использовать webpack4, вы можете переключать ветки: git checkout webpack4 .

• **vue3 + element-ui + версия webpack5: переключаемая ветка: git checkout vue3 **

Этот проект представляет собой многостраничный проект с поддержкой нескольких сред, который использует element-plus под Vue и построен на основе webpack5.

Предварительный просмотр эффекта проекта 1 Предварительный просмотр эффекта проекта 2

1. Установка

 git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git
# git checkout vue3
cd vue-element-ui-scaffold-webpack4
npm install

2. Особенности

Построен на основе webpack5 + Babel@7.

Более высокая скорость сборки и меньший размер файла пакета.

Многостраничная реализация

Два способа автоматического вывода файлов html-страниц (реализованных html-webpack-plugin):

• Добавьте любой js-файл в каталог src/pages. Файл js служит записью веб-пакета; шаблон страницы html — public/index.html, а имя файла страницы — имя файла js.
• Создайте любую папку в каталоге src/pages, содержащую два файла: enter.js и template.html. enter.js служит записью веб-пакета; шаблон HTML-страницы — template.html, а имя файла страницы — имя созданной папки.

Автоматически генерировать значки шрифтов iconfont с использованием svg, поддерживая горячую перезагрузку веб-пакета.

Во время разработки измените, добавьте или удалите файлы SVG в каталоге src/iconfont/svgs для автоматического создания значков шрифтов (с поддержкой ttf, woff2, woff, eot, svg) и одновременной поддержки стилей CSS и предварительного просмотра HTML, горячей перезагрузки; происходит немедленно. Вы можете увидеть эффект. Вы также можете использовать npm run build-font для создания этих файлов вручную. Нет необходимости вручную заходить на icomoon.io или iconfont.cn для создания и изменения значков шрифтов, CSS и предварительного просмотра значков. Реализовано на основе webpack-iconfont-plugin-nodejs.

реализация макета данных

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

Метод включения: 1. npm run dev по умолчанию одновременно запустит фиктивную службу. 2. Запуск в одиночку: npm run макет.

Файл конфигурации: 1. Адрес службы интерфейса в config/serverMap.js: base: '"//localhost:8085"' 2. Файл макета/mock-config.js настраивает различные параметры макета.

element-plus загружается по требованию, а цвет темы переключается глобально.

Источник загрузки CSS по требованию указывает непосредственно на scss-файл element-plus, а не на предварительно скомпилированный CSS-файл. Добавьте файл src/assets/css/element-theme/theme-changed.scss в файл переменных темы element-plus theme-chalk/src/common/var.scss во время компиляции с помощью плагина join-file-content-plugin. Эффект можно просмотреть сразу после изменения переменной scss без предварительной компиляции scss-файла element-plus в файл css. В то же время на переменные scss element-plus можно ссылаться в любом месте проекта.

Динамическая настройка цветов темы во время выполнения (включая самостоятельно написанные стили темы).

Используйте плагин webpack-theme-color-replacer для извлечения правил стиля, содержащих цвета темы в CSS, при создании веб-пакета и создания файла css/theme-colors.css. Затем, когда веб-страница будет запущена, загрузите этот CSS-файл и динамически замените цвета в нем пользовательским цветом темы. Поскольку извлекается только CSS, связанный с цветом, скорость намного выше, чем загрузка всего CSS элемента-плюс. Причем заменять можно не только стили element-plus, но и цвета темы самостоятельно написанных стилей в проекте.

Сопоставление исходного кода

При публикации кода файлы сопоставления исходного кода создаются в единой папке сопоставления исходного кода и автоматически сопоставляются в тестовой среде. В целях безопасности кода рабочая среда не выполняет автоматическое сопоставление. Если требуется отладка, Chrome поддерживает сопоставление исходного кода вручную через URL-адрес. В соответствии с требованиями безопасности, это имя папки сопоставления исходного кода является именем папки, которое известно только разработчикам. Или используйте алгоритм динамического шифрования для создания имени этой папки. Или поместите эти файлы сопоставления исходного кода в каталог веб-сайта, требующий проверки входа. При необходимости измените имя каталога в функции getSourceMapPath файла config/index.js . Таким образом, когда возникает ошибка и требуется онлайн-отладка, можно быстро и вручную добавить сопоставление исходного кода, чтобы облегчить отладку и избежать утечки исходного кода.

Адаптивный макет

Используйте простое решение vw+rem для реализации адаптивного макета. Используйте плагин postcss-pxtorem для автоматического преобразования единиц измерения CSS из px в rem. Во время разработки px по-прежнему используется в качестве единицы длины CSS. 1rem = 100 пикселей, легко конвертируется во время отладки. Общее для ПК и мобильных терминалов (лучше всего заменить element-plus другими UI-фреймворками для мобильных терминалов).

Совместимость с браузером

Совместимость с IE10 и выше, Chrome, Firefox, Safari, QQ, 360, 2345 и другими браузерами. Если вам нужно перейти на мобильную версию, измените .browsersrc на мобильную версию.

3. Описание команды

местное развитие

 npm run dev

Локальная разработка и отладка. Используйте адрес службы внутреннего интерфейса, настроенный разработчиком в config/serverMap.js.

Выпуск тестовой среды

 npm run build-test

Используется для развертывания тестовой среды. js имеет сопоставление исходного кода, css не имеет сопоставления исходного кода. Используйте адрес службы интерфейса, настроенный тестом в config/serverMap.js.

Выпуск в производственную среду

 npm run build

Для развертывания в производственной среде. Используйте адрес службы интерфейса, настроенный prod в config/serverMap.js.

Опубликовать демонстрационную среду

 npm run build-demo

Конфигурация такая же, как и в производственной среде, отличается только адрес службы интерфейса. Используйте адрес службы интерфейса, настроенный в демонстрационной версии в config/serverMap.js.

Выпуск среды разработки

 npm run build-dev

Используется для публикации и развертывания на сервере среды разработки, подходит для ситуаций, когда публикация на сервере необходима для отладки. Используйте адрес службы интерфейса, настроенный разработчиком в config/serverMap.js.

Включить публикацию фиктивных данных

 npm run build-preview

Статические фиктивные данные будут включены, серверная служба не требуется, а фиктивные данные будут использоваться для имитации вызовов ajax (при условии, что соответствующий интерфейс API записал фиктивные данные). Эквивалентно npm run build --preview && npm run play-dist .

Просмотр результатов запуска каталога dist

 npm run play-dist

Используя каталог dist в качестве корневого каталога, запустите локальную статическую службу http, чтобы просмотреть результаты работы каталога dist после публикации.

Запустить пробный сервис

 npm run mock

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

Прокси для порта 80 или порта 443

 npm run proxy80

Проксируя существующий порт (порт 80xx) на порт 80 или порт 443, порт можно скрыть во время доступа, а также можно получить доступ по протоколу https. В сочетании с системными хостами и настройкой 127.0.0.1 в качестве указанного имени домена вы можете напрямую использовать имя домена для доступа к локальной странице отладки, которая используется для отладки некоторых сценариев, в которых необходимо использовать доступ по доменному имени (например, отладка WeChat, подробности см. на странице https://www.cnblogs.com/hz-blog/p/wechat-local-debug-domain.html).