Автор оригинала: Anthony Gore.
Вы собираетесь начать важный проект Vue? Чтобы убедиться, что вы начнете с прочной основы, вы можете использовать шаблон (AKA Boeterplate, скелет, стартер или леса), а не начиная с NPM init или Vue init Отказ
Многие опытные разработчики захватили свою мудрость о строительстве высококачественных Vue приложений в виде шаблонов открытых исходных кодов. Эти шаблоны включают оптимальную конструкцию конфигурации и проекта, лучшие сторонние инструменты и другие лучшие практики развития.
В отличие от Vue CLI 3, который оптимизирован для гибкости, шаблоны являются самыми собой. Поэтому важно выбрать тот, который соответствует вашей философии вашего развития и имеет примерно одинаковые функции, которые вам понадобится из коробки.
Некоторые соображения для выбора шаблона Vue включают в себя:
- WebPack
- PWA
- Полный стек с аутентификацией
- Хорошая документация
- График
- Тестирование
И т.п.
Там есть много отличных шаблонов Vue.js, но в этой статье мы посмотрим на 5, которые включают ключевые функции, которые часто требуют новых проектов.
Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js В 2018/04/23.
Если вам нужен надежный настроек WebPack, то смотрите не дальше, чем WebPack Шаблон включен в Vue CLI 2. С почти 7000 звезд на GitHub и разработке и обслуживании членами The Teams Vue, этот шаблон является вашим лучшим ставкам для создания высоко оптимизированного SUPPack-Powered SPA.
Этот шаблон использует множество передовых особенностей WebPack и его экосистем, включая горячую перезагрузку, экстракцию CSS, протягивание и, конечно, загрузка компонентов с одним файлом. Он также включает в себя отдельные конфиги, оптимизированные для разработки, производства и даже тестирования.
Будучи частью Vue CLI 2, это одна из наименьших достоверных шаблонов, которые мы будем функционировать, и поэтому не включает много желаемых дополнений, таких как рендеринг сервера.
Если вы найдете шаблон WebPack немного избита, вы можете попробовать своего младшего брата, WebPack простой шаблон.
Ссылка : https://github.com/vuejs-templates/webpack.
Примечание: Vue CLI версии 3, которая скоро покинет бета-бета, бросила архитектуру шаблона в пользу плагинов, поэтому этот шаблон будет технически устареть, но все еще будет доступен из настроек Vue CLI 3. Узнать больше в наших Статья Vue cli 3: Игра Changer для разработки Frontend Отказ
Вам нужен Улучшенный UX прогрессивного приложения? Vue Starter это SPA-шаблон для сервера PWA. Он включает в себя маршрутизатор Vuex и Vue, сконфигурированный для работы с помощью сервера рендеринга (SSR) из коробки.
Этот проект привел много мысли в обеспечение того, чтобы ваш развернутый проект удивил UX прямо с самого начала, подобно интернационализации для нескольких языковой поддержки и балла маяка 90+ благодаря SSR и кэшированию с обслуживающим работником.
Дополнительно, управление тегом головки документов с Vue-Meta Используется для SEO, в то время как SSR гарантирует, что ваша страница будет проиндексирована поисковыми системами, которые поддерживают содержимое JavaScript.
Ссылка : https://github.com/devcrossnet/vue-starter.
Демо : https://vue-starter.herokuapp.com.
Еще один приятный вариант, если вы строите PWA, это Vuepack И, конечно же, есть Vue CLI 2 PWA шаблон Отказ
Если вам нужна аутентификация пользователя, затем проверьте Vue Express Mongo Boeterplate Отказ Этот проект предоставляет Full-Stack «MEVN» Boeterplate веб-приложения с аутентификацией, включая регистрацию пользователя, включая регистрацию пользователя и социальный логин с Google, Facebook, Twitter и Github.
Этот шаблон следит за лучшими практиками безопасности, используя OAUTT 2, шлем (который добавляет безопасные заголовки HTTP) и экспресс-валидатор для входной санитации. Это также обеспечивает поддержку нескольких услуг удаленного ведения журнала.
Для базы данных MongoDB с Mongoose предоставляется. REPO также включает в себя Docker Config, чтобы вы могли легко раскрутить экземпляр.
Ссылка : https://github.com/icebob/vue-express-mongo-boilerplate
Демо : http://vemapp.moleculer.services/
Совет: Если вы предпочитаете использовать Laravel в качестве бэкэнда для аутентифицированного приложения Vue, попробуйте Laravel Vue BotaReplate который включает в себя много подобных функций.
Где многие шаблоны падают, – это отсутствие документации. Не так с Vue Enterprise Boilerplate Отказ Этот проект создан и поддерживается Крисом Фритом, который написал большую часть Vuue Documentation, поэтому она хорошо организована, так и в соответствии с лучшими практиками Vue.
Великая вещь о документации для этого шаблона заключается в том, что она объясняет не только то, что включено, но часто то, что не включено, и почему. Например, Крис объясняет, почему нет Typescript, Babel Polyfills, Pug Etc, которые распространены в других шаблонах.
Не позволяйте простой странице по умолчанию этого приложения одурачить вас, оно тоже имеет много функций. Некоторые из моих фаворитов включают в себя Mock API для тестирования, а также включение Генераторы Позволяя вам установить компоненты, представления и макеты с модульными тестами, автоматически добавляемыми.
Vue Enterprise Boilerplate также поддерживает Vue CLI 3, поэтому проект может быть легко расширен с дополнительными плагинами Vue CLI 3.
Ссылка : https://github.com/chrisvfritz/vue-enterrise-boilerplate
GraphQL – это все ярость прямо сейчас, и многие разработчики хотят в их новых проектах Vue. Несколько Vue шаблонов, хотя, хотя, поэтому, если вам нужен график, обязательно проверить Vuexpresso Отказ
Этот проект использует Graphql, Apollo, а также GraphiQL UI, IDE в браузере для изучения GraphQL. В дополнение к этому вы получаете хорошо настроенную настройку WebPack, Vuex и Vue маршрутизатор. Вы также получаете STEALBOOK, что позволяет для интерактивного развития, тестирования и совместного использования компонентов пользовательских интерфейсов.
Единственный недостаток Vuexpresso состоит в том, что он все еще довольно новый, поэтому не забудьте иметь время, чтобы тщательно проверить любые приложения, которые вы строите с ним.
Ссылка : https://github.com/ethaan/vuexpresso
Другая котельная с поддержкой GraphQL – Дружелюбный Vue Starter который также включает в себя экстракцию CSS критического пути через критическую.
Стать старшим Vue Developer в 2020 году.
Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.
Учить больше