Создание приложений с помощью Vue CLI
Создание приложений с Vue CLI позволяет быстро и эффективно разрабатывать современные веб-приложения. В статье рассматривается процесс настройки и использования Vue CLI для старта проектов, что ускоряет разработку и улучшает организацию кода.
Вы узнаете, как легко интегрировать различные плагины, а также настроить структуру проекта для удобного масштабирования и работы в команде. Подробно объясняется, как создавать проекты с нуля и оптимизировать их для дальнейшего использования.
Ресурсы
- Базовый уровень понимания JavaScript и Vue.JS;
- Должен быть установлен NodeJS.
Установка
Установите Vue CLI 3.
npm i -g @vue/cliНабрав vue в терминале, вы получите результат, приведенный ниже.
vue
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
create [options] <app-name> create a new project powered by vue-cli-service
add <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project
invoke <plugin> [pluginOptions] invoke the generator of a plugin in an already created project
inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service
serve [options] [entry] serve a .js or .vue file in development mode with zero config
build [options] [entry] build a .js or .vue file in production mode with zero config
ui [options] start and open the vue-cli ui
init [options] <template> <app-name> generate a project from a remote template (legacy API, requires @vue/cli-init)
config [options] [value] inspect and modify the config
Run vue <command> --help for detailed usage of given command.Скаффолдинг приложения на Vue
Создайте каталог для размещения Vue-приложения. В моем случае он называется vue-ui. mkdir vue-ui Затем запустите Vue UI с помощью приведенной ниже команды. vue ui Данная команда открывает Vue GUI по адресу http://localhost:8001 в браузере, который используется в системе по умолчанию.
Эти три раздела интуитивно понятны, но мы все же уточним их назначение:
- Projects – список проектов.
- Create – позволяет создать новый проект на основе Vue.
- Import – позволяет импортировать проект из каталога или из удаленного репозитория, расположенного на github.
В нижней части экрана, в строке статуса показывается расположение текущего каталога.
Создадим проект. Кликните по вкладке «Create» и нажмите кнопку «Create a new project here».
Появится всплывающее окно. Назовем проект scotch-vue.
Выберите npm в качестве менеджера пакетов, используемого по умолчанию, и инициализируйте git-репозиторий.
Нажмите «Next», чтобы перейти к шаблонам. Здесь задайте базовые конфигурации Vue-приложения. Выберите пункт «Manual» и нажмите «Next».
Если у вас есть сохраненные пресеты, они появятся на этой странице и их можно будет выбрать. Ниже показан пресет scotch-vue и пресет all-settings, которые я создал ранее.
Далее перейдите на страницу «Features», чтобы активировать нужные плагины. Я использовал следующие конфигурации: Babel, Router, CSS Preprocessor, Linter/Formatter, Unit Testing, Use Config Files.
У всех параметров есть ссылка «More Info», которая ведет в справочный раздел.
Нажмите «Next, чтобы настроить конфигурации функций, добавленных в предыдущем разделе.
Выберите SCSS/SASS в качестве препроцессоров.
Я использовал инструменты ESLint + Prettier, а также выбрал опцию «lint on save».
Затем выберите инструмент для модульного тестирования: Mocha и Chai.
Кликните по кнопке «Create Project». После этого задайте имя пресету: scotch-vue-preset. В следующий раз можно будет создать проект прямо из этого пресета.
Затем появится загрузчик, который сообщит о ходе создания проекта. После чего вы попадете в панель управления проектами.
Нажав на название приложения, расположенное в левом верхнем углу, можно открыть его в редакторе.
Панель управления проектом
Панель управления разделена на четыре части:
1. Plugins
Список установленных плагинов и доступных для установки.
Для поиска новых плагинов нажмите кнопку «Install Plugins», расположенную в правом верхнем углу.
2. Dependencies
Здесь отображается список npm-зависимостей и позволяет добавлять или удалять их.
Чтобы активировать поиск и установку зависимостей, нажмите кнопку «Install Dependencies», расположенную в правом верхнем углу.
3. Configurations
Позволяет настраивать конфигурацию приложений.
Конфигурации Vue CLI
Конфигурации Eslint
4. Tasks
Операции с приложением, которые выполняются в процессе его создания:
- Serve – компилирование и перезагрузка.
- Build – компилирование и минификация для продакшена.
- Lint – проверяет и исправляет ошибки в файлах;
- Test – выполняет тесты, используя Mocha;
- Inspect – инспектирует webpack и конфигурацию.
Данные задачи перечислены в соответствии с нашей конфигурацией. Например, задача E2E не была упомянута.
Serve
Этот раздел компилирует и поддерживает горячую перезагрузку для разработки. Первая часть раздела Serve позволяет настроить задачу.
Кнопка «More info» открывает документацию по vue-cli-service. После нажатия на кнопку «Run Task» приложение откроется в новой вкладке.
Вкладка «Dashboard Tab»
На этой вкладке выводится статистика по пакету приложений. Изучите ее, чтобы увидеть размеры и скорость загрузки файлов.
Вкладка «Output»
В этой вкладке отображаются логи с данными о процессе выполнения задачи.
Analyzer
Анализирует код и создает график, демонстрирующий различные зависимости кода.
Build
Раздел Build почти аналогичен разделу Serve. Разница только в том, что в Build создается пакет, который можно использовать для развертывания приложения.
При нажатии на иконку шестеренки откроется окно, позволяющее указать среды, вывести каталоги и выбрать тип приложения.
Обратите внимание на то, как изменился анализатор.
Lint
Анализирует код.
test:unit
Позволяет запускать модульные тесты для приложения.
Inspect
Создает конфигурацию пакета в файле формата json.
Заключение
Мы узнали, как создается новое приложение на основе VueJS с помощью инструмента Vue UI. Надеемся, что этот инструмент вам пригодится.
Также можете изучить исходный код пользовательского интерфейса Vue CLI.
Комментарии