Как установить vue cli на windows

Обновлено: 04.07.2024

В этой статье мы познакомимся с Vue.js. По сравнению с другими популярными фреймворками, Vue.js намного проще и удобнее использовать, поэтому, если вы новичок, то начать с него вам будет проще.

Мы собираемся создать наш интерфейс как SPA (одностраничное приложение). Это тип веб-приложения, которое никогда не перезагружается, потому что оно переписывает содержимое одного файла HTML, что обеспечивает более плавный пользовательский интерфейс и ощущение, что оно похоже на настольное приложение.

Установка Vue CLI и запуск нового проекта

Во-первых, мы собираемся установить Vue CLI (интерфейс командной строки), который поможет нам инициализировать новое приложение Vue. Чтобы установить Vue CLI, мы собираемся ввести эту команду в терминале:

После установки мы собираемся создать новый проект, используя официальный шаблон Vue.js Webpack. Webpack - это сборщик модулей, который будет генерировать статические ресурсы из наших модулей и зависимостей.

Чтобы создать наш первый проект Vue.js, давайте перейдем к папке, в которой мы хотим создать проект, и введите терминал:

Через некоторое время мастер установки задаст нам несколько вопросов.

Подробности проекта

Первый вопрос: Project name (имя проекта). Назовем его, account-owner-client , вы можете назвать его как захотите, главное чтобы имя пакета узла не содержало заглавных букв, и лучше всего вводить имя в Kebab Case.

Второй вопрос: Project description (Описание проекта). А для этого мы напишем Account Owner Client Если хотите, можете написать что то свое.

Третий вопрос: Author (Автор). Сюда нужно ввести свое имя и адрес электронной почты в указанном формате Имя <email@domain.tld> .

Настройка Vue.js и ESLint

Четвертый вопрос: необходимо выбрать сборку Vue: Runtime + Compiler или просто Runtime . Мы выберем, Runtime + Compiler потому что мы собираемся писать компоненты Vue.js, а для этого нам нужен компилятор.

Пятый вопрос: нужен ли нам vue-router , чтобы создать несколько страниц для навигации. Мы ответим утвердительно, напечатав Y .

Шестой вопрос - хотим ли включить ESLint в наш проект. ESLint - отличный пакет, который заботится о нашем стиле кода и заставляет нас писать код по строгим правилам, таким как отступ в коде, запись пробелов перед скобками в определениях функций, запись точки с запятой и многое другое. Ответим утвердительно, напечатав Y .

Седьмой вопрос: хотим ли мы использовать ESLint preset . ESLint preset - это набор правил, и существует множество предустановок, потому что у людей разные предпочтения, и, например, некоторым нравится ставить точку с запятой в конце строки, а другим нет. Мастер попросит нас выбрать между Standard preset , Airbnb preset или написать свои собственные правила. Вы можете выбрать то, что подходит вашему стилю, и изменить это позже в .eslintrc.js файле.

Настройка тестов и прочего.

Восьмой вопрос касается модульных тестов, и мы напечатаем, n потому что мы не будем рассматривать какие-либо типы тестов в данной статье.

Девятый вопрос касается тестов e2e, и мы снова напечатаем n .

Десятый и последний вопрос: нужно ли запускать мастер npm install для установки всех необходимых нам зависимостей. Мы выберем Yes, use NPM чтобы установить все необходимые зависимости.

Если вы внимательно за всем проследили, в результате вы увидите приверно следующее:

Подождем, пока он npm все установит, а затем откроем проект любым редактором кода и проанализируем структуру проекта. Могу посоветовать - использовать Visual Studio Code, потому что у него есть отличные расширения, которые могут нам очень помочь при создании приложений Vue.js, например Vue.js Extension Pack.

Обзор структуры проекта

После того, как вы откроете проект с помощью редактора кода, вы заметите следующую структуру папок:

Пояснение к наиболее важным файлам и папкам:

src - Исходный код нашего проекта:
- assets - Ресурсы модуля, которые будут обрабатываться с помощью Webpack
- components - здесь мы храним наши компоненты пользовательского интерфейса
- router - здесь мы пишем маршруты и подключаем их к нашим компонентам пользовательского интерфейса
- App.vue - это компонент точки входа, это основной компонент пользовательского интерфейса, в котором будут отображаться все остальные компоненты.
- main.js - файл точки входа, который будет монтироваться App.vue - наш основной компонент пользовательского интерфейса
Взглянем на файл index.html :

Единственная важная вещь в этом файле - это тег div с id app , который будет заменен нашим компонентом App.vue . В следующей строке мы можем заметить комментарий, в котором говорится: «созданные файлы будут автоматически встроены». Итак, наш js-файл, который идет в комплекте с Webpack , будет вставлен под div с id

Должно быть вы помните, что main.js это наша точка входа, верно? Давайте посмотрим на файл main.js , который является первым файлом, который запускается при запуске приложения:

Мы создаем экземпляр нового компонента Vue, который будет монтировать наш App.vue компонент внутри div с app атрибутом id - вы помните div с id app в index.html? Наконец, мы уведомляем наш компонент Vue об использовании маршрутизатора.

Структура компонента

Обратите внимание на следующий компонент:

Каждый компонент Vue может содержать шаблон, скрипт и раздел стилей.
- Шаблон - это видимое содержимое компонента
- Скрипт - это логика компонента
- Стили, как вы уже догадались, - это стили шаблона.
Шаблон

В шаблоне мы можем использовать собственные HTML-теги, а также наши пользовательские компоненты Vue. Здесь мы видим <router-view/> элемент, и это место, где наш маршрутизатор будет отображать соответствующий компонент для этого маршрута.

Сценарий

В теге скрипта мы пишем логику для этого компонента. В этом компоненте у нас есть только свойство name , потому что этот компонент не является динамическим, это не что иное, как оболочка вокруг нашего представления маршрутизатора.

Стили

Здесь мы можем написать стили для шаблона. Стиль может быть ограниченным или глобальным. Область видимости стиль пишется так: <style scoped> . Этот тип стиля влияет только на шаблон этого компонента и корневой элемент дочерних компонентов, поэтому стиль не может попасть в другой компонент. В противоположность этому стили без области видимости будут совместно использоваться компонентами.

Маршрутизатор

Обратим внимание на файл router/index.js :

В этом файле мы снова импортируем Vue,

Затем обратите внимание создание экземпляра маршрутизатора и списка маршрутов. Мы можем указать путь, / который означает, что когда мы открываем наше приложение и переходим к root (главной странице) ( / ), то нам будет показан компонент HelloWorld . Помните, что содержимое этого компонента будет включено в компонент App.vue внутри тега <router-view/>

Мы не собираемся анализировать файл HelloWorld.vue , потому что он почти такой же, как и файл App.vue . Это просто еще один компонент с некоторым содержанием в шаблоне, и мы посмотрим, как он выглядит, но на этот раз в браузере.

Запуск приложения

Теперь, когда мы разобрались с кодом, пора запустить приложение и посмотреть все на живом примере.

Введите эту команду в терминал:

Это руководство поможет вам настроить среду разработки Vue.js в Windows 10. Дополнительные сведения см. в статье Общие сведения о Vue.js.

Vue можно установить непосредственно в Windows или подсистеме Windows для Linux (WSL). Обычно мы рекомендуем установку Vue в WSL, если вы планируете взаимодействовать с серверной частью Node.js, хотите обеспечить согласованность с рабочим сервером Linux или будете выполнять команды Bash. Дополнительные сведения см. в статье Выбор между установкой в Windows и подсистеме Windows для Linux.

Предварительные требования
Установка Vue.js

Чтобы установить Vue.js, сделайте следующее:

Откройте командную строку (например, командную строку Windows или PowerShell).

Создайте новую папку проекта mkdir VueProjects и войдите в этот каталог: cd VueProjects .

Установите Vue.js с помощью npm:

Проверьте номер установленной версии с помощью команды vue --version .

Чтобы установить Vue.js с помощью CDN, а не npm, см. документацию по установке Vue.js. Также см. описание разных сборок Vue в документации по Vue.

Установка Vue CLI

Vue CLI — это набор средств для работы с Vue в окне терминала или командной строке. Они позволяют быстро сформировать шаблон нового проекта (vue create), создать прототип новых идей (vue serve) или управлять проектами с помощью графического пользовательского интерфейса (vue ui). Vue CLI — это глобально установленный пакет npm, который устраняет некоторые сложности при сборке (например, при использовании Babel или webpack). Если вы не создаете одностраничное приложение, вы можете не использовать Vue CLI.

Чтобы установить Vue CLI, используйте npm. Используйте флаг -g для глобальной установки и обновления ( vue upgrade --next ):

Дополнительные сведения о надстройках, которые можно добавить (например, для анализа кода или Apollo для интеграции GraphQL), см. в описании надстроек Vue CLI в документации по Vue CLI.

Перед вами — вторая часть серии материалов, которая посвящена созданию веб-приложения Budget Manager с использованием Node.js, Vue.js и MongoDB. В первой части мы занимались сервером, а именно — подготовили основные методы RESTful API и наладили JWT-аутентификацию. Сегодня приступим к работе над клиентской частью приложения, создадим каркас фронтенда, средства для регистрации в системе и входа в неё, поговорим о маршрутах и об их защите.

Установка Vue.js и использование vue-cli

Установить Vue.js довольно просто. Мы планируем использовать vue-cli с шаблоном webpack . Обратившись к руководству по Vue, можно выяснить, что для установки vue-cli и подготовки рабочей среды используются такие команды:

Продолжим работу над проектом, создав папку application в его корневой директории. Этот шаг можно и пропустить, создав папку в процессе работы с vue-cli . Если вы решите не создавать папку, тогда вам нужно дать проекту имя, выполнив команду такого вида:

Вот как выглядит проект после создания папки application :

Теперь перейдём в только что созданную папку с помощью интерпретатора командной строки, и, если vue-cli ещё не установлен, выполним следующую команду:

Эта команда позволяет установить vue-cli глобально, поэтому неважно, в какой именно папке мы будем находиться, выполнив её.

Теперь вызовем следующую команду:

Обратите внимание на то, что тут не указано имя проекта, так как подразумевается, что команда выполняется в папке application , уже созданной для размещения в ней приложения.

После выполнения вышеприведённой команды и загрузки шаблона вам будет задан ряд вопросов:

Если хотите, на данном этапе может поменять название проекта, описание, сведения об авторе. Для того, чтобы не отклоняться от этого материала, оставьте всё остальное таким, как показано на рисунке.

Далее, всё ещё оставаясь в папке application , устанавливаем зависимости и запускаем проект.

Теперь можно полюбоваться на стандартную страницу Vue.

Очистка приложения Vue

Уберём из приложения некоторые ненужные нам стандартные элементы. Для этого надо перейти в папку application/src/assets и удалить logo.jpg , так как этим файлом мы пользоваться не будем. Далее, откроем файл корневого компонента App.vue из папки application/src и приведём его к виду, представленному следующим фрагментом кода:

Теперь надо очистить маршруты. Для этого откроем файл index.js в папке router и приведём его к такому виду:

Обратите внимание на то, что существует множество способов структурирования маршрутов, но, для того, чтобы не усложнять проект, мы просто импортируем компоненты и зададим маршруты в этом файле.

Теперь, на последнем этапе очистки стандартного приложения, удалим файл HelloWorld.vue из папки components .

Установка зависимостей

Прежде чем заняться разработкой фронтенда приложения, нужно установить ещё несколько зависимостей. Перед выполнением следующей команды проверьте, находитесь ли вы в папке application :

Теперь установим зависимости разработки:

Начало работы над фронтендом приложения

Теперь, когда все подготовительные мероприятия завершены, займёмся разработкой. Перейдём к папке components и создадим в ней папку pages , в которой создадим папку Authentication . В этой папке надо создать файл Authentication.vue , представляющий компонент, которым будем пользоваться для аутентификации. Вот что должно в итоге получиться:

В файле Authentication.vue разместим следующий код:

Расширением этого компонента займёмся позже, а пока перейдём в папку router и поработаем с маршрутами.

Для начала импортируем компонент Authentication и настроим маршрут для его использования:

Перейдём к компоненту App.vue из папки src и займёмся стилями. Сначала нужно подготовить тег style . Разместим его сразу после закрытия тега script :

Теперь переходим в папку src/assets и создаём в ней файл styles.scss и папку partials . В этой папке создадим два частичных шаблона, представленных файлами _variables.scss и _animations.scss . В результате должна получиться такая структура:

В файле _variables.scss зададим такие параметры:

В файл _animations.css добавим описания анимаций bounceIn и slideInFromLeft :

Импортируем частичные шаблоны в styles.scss :

Теперь, в папке assets , создадим папку images . Сюда можно поместить любое изображение, которое будет использоваться в качестве фона. Здесь, в репозитории, можно найти изображение, которое применяется в этом материале.

Настроим внешний вид приложения, приведя к следующему виду блок стилизации в файле App.vue :

Тут мы импортируем ранее подготовленные стили scss и задаём использование фиксированного фонового изображения для приложения. Мы стремимся к тому, чтобы на любом устройстве экран приложения выглядел примерно одинаково.

В псевдоэлементе body :after мы задаём параметр background-color , записывая в него значение переменной $background-tint . Это позволит применить к фоновому изображению пурпурный цветной фильтр. Вот как выглядят разные варианты фонового изображения.

Обратите внимание на то, что всё, что касается стилизации и работы с фоном, на функционал приложения не влияет, поэтому вы вполне можете пропустить эти шаги или украсить приложение так, как вам захочется.

Масштабирование области просмотра и загрузка иконок

Благодаря этому шагу мы обеспечим правильное отображение приложения на мобильных устройствах. Кроме того, на данном этапе работы мы загрузим иконки в стиле Material Design. Для того, чтобы всё это сделать, перейдём к файлу index.html , который расположен в папке application и добавим следующее в тег head :

Разработка компонента Authentication

Теперь, когда мы немного украсили приложение, избавившись, по крайней мере, от скучных белых страниц, продолжим работу над компонентом Authentication . Создадим в папке Authentication файл index.js .

Импортируем в него то, что нам понадобится и объявим константу, в которую запишем путь к API:

Теперь создадим объект Authentication , который будет содержать нужные нам методы:

Мы начинаем работу над этим компонентом, объявляя объект с именем user , который хранит сведения о том, аутентифицирован ли пользователь.

Теперь напишем методы:

В первом методе используются три аргумента:

Второй метод очень похож на первый, его мы используем для создания новой учётной записи. Разница между ним и первым методом заключается в конечной точке, с которой мы работаем.
Третий метод используется для проверки того, аутентифицирован пользователь или нет.
Последний метод позволяет возвратить заголовок Authorization .

Теперь продолжим работу над компонентом, открыв файл Authentication.vue . Тут мы будем пользоваться средствами Vuetify:

Здесь имеется элемент div с классом l-auth-container , который выполняет роль контейнера. Следом идёт ещё один div с классом l-auth , который содержит структуру элементов для организации формы ввода, в частности, это элемент v-form , привязанный к данным переменной validLogin .

Второе поле ввода предназначено для пароля, оно снабжено иконкой, которая указывает на то, может ли пользователь видеть вводимый пароль. У этой иконки есть коллбэк, являющийся стрелочной функцией, который позволяет переключать значение переменной loginPasswordVisible с true на false и наоборот. Если эта переменная установлена в true , то параметр type поля ввода устанавливается в text , иначе это password .

И, наконец, тут присутствуют описания кнопок, которые мы используем для создания новой учётной записи или для отправки формы с целью входа в систему.

Следующий фрагмент кода описывает структуру формы регистрации в системе, которая видна лишь в том случае, если переменная signUpVisible установлена в true . Устройство этой формы похоже на устройство формы входа в систему, тут изменены лишь несколько строк. В частности, здесь используется переменная signUpPasswordVisible вместо loginPasswordVisible и другой метод обработки щелчка по кнопке.

Теперь, в том же файле Authentication.vue , опишем скрипт компонента:

Тут всё начинается с импорта файла index.js из папки Authentication , так как нам нужен метод authenticate , определённый внутри этого файла.

Взглянем теперь на переменные, хранящие данные компонента:

И, наконец, вот код стилизации компонента, который надо разместить в том же файле Authentication.vue (тут вы можете дать волю фантазии и сделать всё таким, как вам хочется):

Вот как выглядят компоненты для входа в систему и регистрации нового пользователя.

Разработка компонента Home

Перейдём в папку pages и создадим файл компонента Home.vue :

Защита системы навигации

Откроем файл index.js из папки router . Вот к какому виду его нужно привести:

Рассмотрим этот код.

В этой строке мы импортируем файл Authentication , называя его Auth , так как компонент Authentication также был импортирован.

Тут мы даём имя объекту Router для того, чтобы позже создать защиту системы навигации. Также мы добавляем путь к компоненту Home . В параметре meta.requiredAuth будет записано true . Это означает, что если к этому компоненту попытается получить доступ неаутентифицированный пользователь, он будет перенаправлен на страницу входа в систему.

Здесь мы защищаем систему навигации. А именно, регистрируем глобальный сторожевой хук, пользуясь которым перед переходом по каждому маршруту проверяем, установлен ли его параметр meta.requiredAuth в true . Если это так, мы проверяем объект пользователя из Authentication . Если пользователь не аутентифицирован, мы перенаправляем его на страницу входа в систему.

Этой командой экспортируем маршрутизатор.

Теперь откройте файл main.js в папке application . Тут мы собираемся импортировать файл Authentication и вызвать метод checkAuthentication :

Без этого, если пользователь перезагрузит страницу или закроет её, а потом снова откроет, он будет перенаправлен на страницу входа в систему.

Для нового приложения Vue лучше использовать Vue CLI .

Что такое CLI? Это утилита командной строки предоставляет доступ к множеству инструментов для сборки проекта.

Vue CLI – это система для быстрой разработки и создания прототипов Vue.js. Она состоит из различных компонентов: служба CLI , плагины CLI . В последней версии утилиты в ней появился графический интерфейс для управления проектом.

Установка и системные требования Vue CLI 3

Системные требования

Для работы с Vue CLI v3 потребуется Node.js 8.9+. Но рекомендуется использовать версию платформы v8.11.0+.

Ее можно установить:
- Загрузив двоичные файлы для вашей операционной системы с официального сайта проекта.
- Используя официальный менеджер пакетов.
- С помощью менеджера версий.
Перед началом установки Vue CLI нужно удалить все предыдущие версии CLI. Для этого выполните следующую команду:

Установка CLI Vue 3

Чтобы установить Vue CLI v3, запустите следующую команду:

Примечание: чтобы использовать командную строку от имени администратора в Windows для глобальной установки пакетов, нужно изменить разрешения. На сайте npm есть руководство о том, как это сделать .

После установки CLI Vue 3 вы сможете вывести список всех доступных команд, выполнив команду vue:

А также проверить установленную версию, выполнив:

Создание проекта Vue

С помощью Vue CLI вы можете создать новое приложение, выполнив следующую команду:

example-vue-project – это название проекта. Вы можете изменить его.

Затем нужно выбрать вариант установки проекта. Вариант по умолчанию установит два плагина: Babel и ESLint. Также вы можете вручную выбрать расширения, необходимые для вашего проекта из набора плагинов:
- Babel .
- TypeScript .
- Progressive Web App support .
- Vue Router .
- Vuex (библиотека для управления состоянием Vue);
- Препроцессоры CSS ( PostCSS , CSS modules , Sass , Less , Stylus ).
- Модуль юнит-тестов Mocha или Jest .
- Модуль E2E-тестов Cypress или Nightwatch .
Теперь рассмотрим другие варианты обслуживания проекта, доступные в Vue CLI. Для этого перейдите в папку проекта:

Затем выполните следующую команду:

Сервер разработки поддерживает оперативную перезагрузку кода. Поэтому не нужно останавливать и запускать сервер каждый раз, когда вы вносите изменения в код проекта. При этом сохранится даже состояние приложения!

И когда вы закончите разработку своего проекта, то можете использовать следующую команду для создания сборки:

Эта команда сохранит собранный код в папку dist проекта. Об этой процедуре вы можете прочитать здесь .

Что такое служба CLI Vue?

Служба Vue CLI – это зависимость (@vue/cli-service), которая предоставляет конфигурации по умолчанию. Служба может быть обновлена, настроена и расширена с помощью плагинов. Она предоставляет несколько скриптов для работы с Vue-проектами. Например, serve, build и inspect.

Мы уже видели сценарии serve и build в действии. Скрипт inspect позволяет проверить конфигурацию веб-пакета в проекте с помощью vue-cli-service. Попробуйте выполнить его:

Анатомия проекта

Проект Vue, созданный с помощью CLI, имеет предопределенную структуру. Если вы решите установить дополнительные плагины (например, маршрутизатор Vue), CLI также создаст файлы, необходимые для использования и настройки этих библиотек.

Файлы и папки в проекте Vue:
- public – папка содержит общедоступные файлы, такие как html и favicon.ico. Размещенные здесь статические ресурсы будут скопированы и не упакованы в веб-пакет.
- src – папка содержит исходные файлы проекта.
- src/assets – папка содержит ресурсы проекта, такие как png.
- src/components – папка содержит компоненты Vue.
- src/App.vue – основной компонент Vue-проекта.
- src/main.js – основной файл проекта, который загружает Vue-приложение.
- config.js – файл конфигурации для Babel.
- json – файл содержит список зависимостей проекта, а также параметры конфигурации для ESLint, PostCSS и поддерживаемых браузеров.
- node_modules– папка содержит установленные пакеты npm.
Следующий скриншот отображает структуру проекта:

Плагины CLI Vue

Плагины CLI – это пакеты npm, которые реализуют дополнительные функции для Vue-проекта. Бинарный файл vue-cli-service автоматически распознает и загружает плагины, перечисленные в файле package.json.

Базовая конфигурация для проекта Vue CLI 3 – это webpack и Babel. Все остальные расширения могут быть добавлены через плагины.

Есть официальные плагины, созданные командой разработчиков Vue. А также плагины, написанные сторонними программистами. Имена официальных плагинов начинаются с @vue/cli-plugin-, а названия плагинов, разработанных сообществом, начинаются с vue-cli-plugin-.

Официальные плагины Vue CLI 3:
- Typescript;
- PWA;
- Vuex;
- Vue Router;
- ESLint;
- Unit testing etc.
Как добавить плагин Vue

Плагины автоматически устанавливаются при создании проекта или инсталлируются разработчиком. Для этого используется команда vue add my-plugin.

Полезные плагины Vue

Существует много плагинов Vue CLI, которые могут оказаться полезными для ваших проектов. Например, библиотека Vuetify UI и Storybook . Вы также можете использовать плагин Electron Builder для быстрого создания Vue-проекта на основе Electron.

Я также создал несколько расширений:
- vue-cli-plugin-nuxt : плагин Vue CLI для быстрого создания универсального приложения Vue с Nuxt.js.
- vue-cli-plugin-bootstrap : плагин Vue CLI для добавления Bootstrap 4 в проект.
А что насчёт webpack?

Большая часть конфигурации проекта Vue CLI абстрагируется в плагины и объединяется с базовой конфигурацией во время выполнения. Но также можно вручную настроить конфигурацию webpack для своего проекта:
- Создать файл config.js в корневом каталоге проекта, а затем выполнить настройку в параметре configureWebpack:
Больше о работе с Vue CLI и webpack .

Пользовательский интерфейс CLI Vue 3

Теперь рассмотрим пользовательский интерфейс Vue CLI . Третья версия утилиты предоставляет современный веб-интерфейс, который позволяет создавать проекты и управлять ими без использования командной строки. Чтобы запустить графический интерфейс, выполните следующую команду:

Создайте новый проект на вкладке «Create». Выберите место для его хранения, затем нажмите кнопку «+ Create a new project here».

После этого вы попадёте в интерфейс, в котором нужно указать информацию о вашем проекте.

Введите данные и нажмите кнопку «Next». Затем вы попадете на вкладку «Presets», где нужно задать варианты настройки проекта:

Продолжим с установкой по умолчанию.

Далее нажмите на кнопку «Create Project». После этого вы попадете в новый интерфейс, который показывает прогресс создания проекта. Затем в панель управления проектом, где можно будет разместить виджеты, которые можно добавить с помощью кнопки «Customize».

Слева от панели настройки расположены ссылки на различные разделы:

Перейдите на страницу «Tasks».

Остановить проект можно с помощью кнопки « Stop task ».

Заключение

В этой статье мы рассмотрели новую версию Vue CLI, которая предоставляет целый ряд удобных функций: интерактивная разработка проектов, обширная коллекция официальных плагинов и полноценный графический интерфейс для создания и управления проектами на основе Vue.js.

Пожалуйста, оставьте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, подписки, отклики, дизлайки, лайки!

Дайте знать, что вы думаете по данной теме в комментариях. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!

Доброго времени суток. В этой статье разберёмся с таким инструментом как Vue cli, рассмотрим как установить Vue cli и какие задачи решает этот инструмент.

Для чего нужен Vue cli?

Vue cli установка

Установить Vue cli можно следующими командами:

Если команда выполнилась без ошибок, то в терминале должен появиться доступ к команде vue. Проверку можно произвести командой

Команда выведет в консоль версию установленного пакета Vue cli. На момент написания статьи актуальная версию пакета 4.5.13.

Создаем проект с помощью Vue cli

Для того чтобы создать проект воспользуемся командой vue create project-name .

Vue cli создание проекта

Вы можете выбрать дефолтные настройки с Vue 2/3 или настроить все индивидуально выбрав Manually select features.

При настройке вручную вам можно будет выбрать следующие опции:
- выбор версии Vue 2/3
- использовать Babel
- использовать TypeScript
- включить в сборку Vue Router и Vuex
- выбор CSS-препроцессора
- настройка линтера и форматтера кода (ESlint, Prettier)
- выбор библиотеки для unit-тестов
Теперь мы находимся в корневой директории нашего только что созданного проекта и можем запустить локальный сервер для разработки и кодить:

Структура проекта

На скриншоте ниже можно ознакомиться со структурой проекта, которую предлагает Vue cli.

Читайте также: