Для настройки простого проекта Vue с использованием Vue CLI (Command Line Interface) необходимо пройти несколько шагов: установить CLI, создать проект, настроить его конфигурацию, установить зависимости и запустить проект. Vue CLI — это мощный инструмент, который автоматизирует создание структуры приложения, настраивает сборку и предоставляет удобные команды для разработки и сборки.

1. Установка Node.js

Перед установкой Vue CLI необходимо установить Node.js, так как CLI работает через npm (или yarn/pnpm).

Скачать Node.js можно с официального сайта: https://nodejs.org

После установки можно проверить наличие Node и npm:

node -v
npm -v

2. Установка Vue CLI глобально

npm install -g @vue/cli

Альтернативно через yarn:

yarn global add @vue/cli

Проверка установки:

vue --version

Обычно будет вывод вида: @vue/cli 5.x.x

3. Создание нового проекта

Создаём проект с помощью команды:

vue create my-vue-app

После этого CLI предложит выбрать способ настройки:

• Default (Vue 3 + Babel + ESLint) — рекомендуемый вариант.

• Manually select features — ручной выбор (Babel, TypeScript, Router, Vuex, CSS Pre-processors, Linter, Unit Testing и др.)

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

• Выбрать версию Vue (2 или 3)

• Нужен ли Vue Router

• Использовать ли Vuex

• Какие препроцессоры CSS (Sass/SCSS, Less и т.д.)

• Форматирование кода (ESLint, Prettier)

• Сохранять ли эту конфигурацию как пресет

4. Переход в каталог проекта

cd my-vue-app

5. Запуск проекта в режиме разработки

npm run serve

или

yarn serve

После запуска ты увидишь адрес, по которому доступен локальный сервер, например:

App running at:
\- Local: http://localhost:8080/

Открыв этот адрес в браузере, ты увидишь стартовую страницу Vue.

6. Структура созданного проекта

Пример структуры проекта:

my-vue-app/
├── node_modules/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── App.vue
│ └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

Основные файлы:

• main.js — точка входа приложения, где Vue инициализируется.

• App.vue — корневой компонент.

• components/ — папка для компонентов.

• public/index.html — HTML-шаблон.

7. Настройка компонентов

Например, чтобы создать компонент MyButton.vue:

<!-- src/components/MyButton.vue -->
<template>
<button @click="onClick">Нажми меня</button>
</template>
<script>
export default {
name: 'MyButton',
methods: {
onClick() {
alert('Кнопка нажата!')
}
}
}
</script>
<style scoped>
button {
padding: 10px;
background-color: #42b983;
color: white;
border: none;
border-radius: 5px;
}
</style>

Подключение в App.vue:

<template>
<div>
<MyButton />
</div>
</template>
<script>
import MyButton from './components/MyButton.vue'
export default {
components: {
MyButton
}
}
</script>

8. Сборка проекта

Когда разработка закончена, можно собрать проект:

npm run build

После этого будет создана папка dist/ со скомпилированными и оптимизированными файлами, готовыми к деплою.

9. Дополнительные команды

• npm run lint — запустить линтер для проверки кода.

• npm run test:unit — запустить юнит-тесты (если добавлены).

• vue ui — графический интерфейс для управления проектом через браузер. Очень удобный способ конфигурации и запуска.

10. Изменение конфигурации

По умолчанию конфигурация Vue CLI скрыта, но можно её раскрыть, создав файл vue.config.js в корне проекта. Пример:

module.exports = {
publicPath: '/',
outputDir: 'dist',
lintOnSave: true,
}

11. Удаление/добавление плагинов CLI

Vue CLI поддерживает плагины:

vue add router
vue add vuex
vue add typescript

Для удаления используется vue invoke, или можно вручную удалить из package.json и пересобрать проект.

Vue CLI позволяет быстро и удобно создать современное Vue-приложение с поддержкой сборки, линтинга, роутинга, Vuex и других возможностей. Оно подходит для новичков и опытных разработчиков, желающих быстро настроить стабильную структуру проекта.