Vue Academy · Урок

Установка Vue CLI

Установите и используйте Vue CLI для создания новых проектов

«Установка Vue CLI» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Что такое Vue CLI

Vue CLI — это классический инструмент командной строки для создания и управления проектами Vue.

Создаёт проекты с разумными настройками по умолчанию
Управляет конфигурацией сборки с помощью плагинов
Построен на основе webpack

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

Глобальная установка Vue CLI

Установите CLI глобально, чтобы команда vue была доступна везде.

# Install globally with npm
npm install -g @vue/cli

# Verify the installation
vue --version
# @vue/cli 5.0.8

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

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

# Create a new project
vue create my-project

# The CLI launches an interactive prompt

Выбор предустановок

CLI предложит выбрать предустановку:

По умолчанию устанавливает Babel и ESLint — это самый быстрый путь
Выбрать функции вручную позволяет добавить Router, Vuex, TypeScript, тестирование и другие возможности

Предустановки можно сохранять и повторно использовать в будущих проектах.

Выбор функций вручную

Если вы выбираете функции вручную, включите нужные вам возможности.

# Example feature checklist
? Check the features needed for your project:
  (*) Babel
  ( ) TypeScript
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

Запуск проекта

После создания проекта CLI выведет команды для запуска приложения.

# Move into the project
cd my-project

# Start the dev server
npm run serve

# App runs at http://localhost:8080

Появление Vite

Vite — это современный инструмент сборки, созданный командой Vue.

Использует нативные модули ES для мгновенного запуска
Обеспечивает молниеносную горячую замену модулей
Работает значительно быстрее Vue CLI на основе webpack

Теперь Vite — рекомендуемый инструмент для новых проектов Vue.

Vite и Vue CLI

Сравним эти два инструмента:

Vue CLI использует webpack, медленнее запускается с нуля, но является зрелым и хорошо настраиваемым
Vite использует esbuild и нативный ESM, запускается почти мгновенно и становится стандартным инструментом

Vue CLI теперь находится в режиме поддержки. Предпочитайте Vite, если только вы не сопровождаете устаревший проект.

npm create vue@latest

Официальный способ начать новый проект Vue на основе Vite — использовать инструмент create-vue.

# Scaffold a Vite + Vue project
npm create vue@latest

# Prompts for name and features:
#   TypeScript, JSX, Vue Router, Pinia,
#   Vitest, ESLint, Prettier

Запуск проекта create-vue

create-vue использует стандартные скрипты Vite.

# After scaffolding
cd my-vue-app
npm install
npm run dev

# Dev server: http://localhost:5173

Что выбрать

Рекомендации по выбору:

Начинаете новый проект в 2024 году или позже? Используйте npm create vue@latest (Vite)
Сопровождаете старый проект, созданный с помощью Vue CLI? Продолжайте использовать Vue CLI
Нужен максимально быстрый процесс разработки? Выбирайте Vite

Быстрая проверка

Проверьте, насколько хорошо вы понимаете выбор инструментов Vue.

Итоги: установка Vue CLI

Вы познакомились с инструментами создания проектов Vue:

Vue CLI устанавливается командой npm install -g @vue/cli
vue create создаёт проект с помощью предустановок
Vite — современная и быстрая альтернатива
npm create vue@latest — рекомендуемый современный способ начать проект

Далее вы изучите структуру созданного проекта.

Часто задаваемые вопросы

Урок «Установка Vue CLI» бесплатный?

Да — полный текст урока «Установка Vue CLI» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Установка Vue CLI»?

Установите и используйте Vue CLI для создания новых проектов Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.

Сколько времени занимает урок «Установка Vue CLI»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy