Во-первых, я ЛЮБЛЮ Vue и все, что с ним связано. Поэтому, естественно, я использую Vue CLI для создания проектов, обычно используя скаффолдинг Vue-Webpack. В нем действительно есть все, что вам нужно, по крайней мере, если вы не интересуетесь фреймворками CSS.

Точно так же Foundation CSS — это то, чем я пользуюсь изо дня в день. Либо в работе, либо в личных проектах. Это действительно упрощает CSS и ускоряет создание прототипов приложений, сайтов и всего остального. Недостатком является интеграция в мир JS. Это НА САМОМ ДЕЛЕ недостаточно задокументировано. Вместе с этим возникают проблемы.

Я хотел Foundation (более того, NPM для базовых сайтов), но в документации было мало информации о том, как интегрировать его в Webpack или Vue, если уж на то пошло. Следовательно, я создал его.

Сложнее всего было понять, что Webpack исходит из мышления Gulp. Это сбивало с толку, и я уверен, что ходить по Lego было бы гораздо приятнее. Документация — это самое большое препятствие, или то, что я ее не читал. Итак, совет 1) Прочтите документы!

Я смог найти устаревшие проекты React с помощью Foundation и случайным образом взломал код в структуре Webpack в надежде, что это сработает. Вспышка новостей, это не так. Это были старые! Я потратил время на то, чтобы копаться и выяснять, что они сделали, но заставить его работать с Webpack 2. В конце концов мне понадобился extract-text-webpack-plugin и немного магии загрузчика, а также перемещение файла foundation.scss в каталог ресурсов, куда мы импортируем частичные файлы из пакета Foundation Node. Это означает, что я мог легко импортировать и генерировать стили для внедрения в голову.

Затем нам снова пришлось иметь дело с jQuery, снова искать и выяснять. В конце концов, наткнувшись на ответ StackOverflow и сделав jQuery глобально доступным, снова решив еще одну проблему с помощью простого исследования и некоторой надежды. Мне пришлось использовать другой плагин для привязки jQuery к окну. Я не слишком доволен тем, что мне приходится использовать jQuery в связке с Vue, но если я хочу получить преимущества Foundation, это небольшая цена за увеличение скорости разработки в другом месте.

Проверьте PR: https://github.com/vuejs-templates/webpack/pull/606
Мой GitHub: https://github.com/BillyPurvis