Автор:Игорь Тельменко
vue-cli
vue-cli — это консольная утилита для создания каркаса приложения vue.js на основе одного из имеющихся шаблонов.
Она автоматизирует для нас
- процессы настройки системы сборки
- подключение библиотек
У vue-cli имеется ряд готовых шаблонов, на основе которых можно создать приложение:
- webpack — Полный набор на базе Webpack (с vue-loader, горячей перезагрузкой страницы, линтингом и тестами)
- webpack-simple — Упрощенный набор на базе Webpack и vue-loader
- browserify — Полный набор на базе Browserify
- browserify-simple — Упрощенный на базе Browserify и vueify
- pwa — Шаблон для PWA на базе шаблона webpack
- simple — На базе обычного html-файла с подключенными в него собранными js-файлами (без системы сборки)
Также можно создать собсвенный шаблон со своими файлами и библиотеками.
Что нужно чтобы создать и запустить приложение с помощью vue-cli?
Порядок действий примерно такой:
|
1 2 3 4 5 6 7 8 9 10 |
# Устанавливаем глобально npm пакет npm install -g vue-cli # Создание проект в директории folder-name на базе шаблона webpack vue init webpack folder-name # После этого в консоли будет задан ряд вопросов (имя приложения и т.п.) # Переходим в папку с проектом и запускаем установку всех модулей cd folder-name npm install # Запускаем сборку npm run dev |
После запуска npm run dev в консоли отобразится URL для открытия в браузере. Так как шаблон webpack поддерживает горячую перезагрузку, то при изменении какого-либо файла страница в браузере будет перезагружаться чтобы отобразить изменения.
Полезные ссылки: