Разрабатывайте быстрее и структурированнее в Vue CLI.
В последние годы я много работал с Vue и понял, что трачу много времени на рефакторинг и переупорядочение структуры проекта, потому что проект постоянно расширялся или не работал нормально.
Мне нравится работать с Vue CLI 3, но конфигурация по умолчанию для запуска нового проекта Vue очень минимальна и проста. Для каждого нового проекта, который претендовал на масштабирование или не было ясно, как он будет масштабироваться, мне стоило много времени, чтобы подумать, как его структурировать и как создать все эти новые файлы и папки, чтобы создать хорошую основу для проект.
Из-за этого разочарования я запустил Vue Structure, плагин vue cli, чтобы создать хорошую базу для запуска проекта Vue, который может расширяться * и дает вам границы, чтобы иметь хороший обзор вашего кода.
*Я имею в виду расширение проекта; Создание большого количества компонентов: компонентов, компонентов представления, хранилищ Vuex, стилей и т. д.
«Хорошее начало — половина дела».
Если вы начнете новый проект, вы выиграете время, если потратите время на создание хорошей базы проекта. Каждый раз, когда я начинал новый проект Vue, я узнавал, как структурировать свой следующий новый проект, и с помощью этих знаний я создавал Vue Structure.
Что такое «Структура плагина Vue CLI»?
Vue Structure — это плагин Vue CLI, который создает базовую структуру проекта/папки перед запуском проекта Vue. Сгенерированная структура проекта соответствует Руководству и соглашениям по стилю Vue и обеспечивает: удобство кода, модульность и подходит для небольших и крупных проектов. По умолчанию включено в Vuex и Vue Router.
Как работает структура плагина Vue CLI
Если вы не знакомы с Vue CLI 3, по умолчанию это полноценная система и инструмент для разработки проектов Vue, с помощью интерфейса командной строки (глобальный пакет NPM) вы можете создавать новые проекты. Некоторые расширенные функции Vue CLI включают добавление плагинов в базу проектов. Проверьте документы.
Особенности структуры Vue
- Маршрутизатор
- Магазин (Vuex, с модулями)
- Папка Directives (с файлом globals)
- Папка Filters (с файлом globals)
- Папка Mixins (с файлом globals)
- Папка Views (с представлением «404 Not Found»)
- Папка активов, включая папки для: шрифтов, значков, изображений и файлов SCSS.
- Стиль кода Airbnb
Уникальные черты:
- 🦈 Короткий импорт компонентов, представлений, фильтров, директив и миксинов.
- 🔱 Отдельные файлы стилей, скриптов и HMTL для компонентов Vue
- 🔄 Компонент значка для встроенной загрузки SVG.
- ☄️Необязательно: Генератор для генерации: компонентов, представлений, маршрутов
Начиная
Создайте новую папку проекта Vue.
vue create {my-awesome-project}
Выберите конфигурацию по умолчанию.
Vue CLI v3.3.0 ? Please pick a preset: (Use arrow keys) ❯ default (babel, eslint) Manually select features
Зайдите в папку.
cd {my-awesome-project}
Добавьте плагин Vue Structure vue cli:
vue add structure
Дождитесь завершения работы генератора и приступайте к разработке!
yarn serve # or npm run serve
Начать разработку!
