Понадобилось отвлечься от текущего проекта и помочь настроить CI/CD проекта на Vue.js + Vite. Следовательно надо собрать приложение, проверить и доставить в прод и стэйдж окружение. Но самое сложное, это вспомнить как это все собирать. Я уже и забыл как Node.JS готовить, но вспомнить никогда не поздно.

1. Подготовка окружения для запуска Vue.js + Vite

Требования:

• Node.js (версия 16+) — проверьте командой node -v;
• npm (или yarn/pnpm) — идёт в комплекте с Node.js.

Установка NodeJS, NVM, NPM:

Для работы с несколькими версиями NodeJS очень удобно использовать Node Version Manager и давайте его установим.

# apt install curl
$ curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
$ source ~/.bashrc

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

Запрашиваем список доступных версий NodeJS.

$ nvm list-remote

Устанавливаем необходимые версии.

$ nvm install v25.8.2
$ nvm install v24.14.1

Запрашиваем список установленных версий.

$ nvm list

Переключаем на нужную нам версию.

$ nvm use v25.8.2

Проверяем.

$ node -v

Подготовим шаблон базового приложения Vue.js + Vite:

1. Откройте терминал.
2. Создайте новый проект Vite с шаблоном Vue:

   $ npm create vite@latest my-vue-app -- --template vue

• my-vue-app — имя вашего проекта (можно заменить);
• --template vue — указывает использовать шаблон Vue.js.

1. Перейдите в папку проекта:

   cd my-vue-app

4. Установите зависимости:

   npm install

Тестовый запуск:

$ npm run  dev

В результате получем сообщение, что приложение запущено.

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

2. Написание простейшего приложения «Hello World»

1. Откройте проект в редакторе кода (например, VS Code).
2. Найдите файл src/App.vue — это основной компонент приложения.
3. Замените его содержимое следующим кодом:

   <template>
     <div class="hello">
       <h1>{{ message }}</h1>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         message: 'Hello World!'
       }
     }
   }
   </script>

   <style>
   .hello {
     text-align: center;
     margin-top: 50px;
     font-family: Arial, sans-serif;
   }
   </style>

Пояснение:

• <template> — HTML-разметка компонента;
• <script> — логика компонента (в данном случае — определение данных);
• <style> — стили для компонента.

3. Тестовый запуск

1. В терминале (в папке проекта) запустите сервер разработки:

   # npm run dev

2. Vite запустит локальный сервер и выведет URL (обычно http://localhost:5173).
3. Откройте этот URL в браузере — вы увидите «Hello World!».

4. Сборка проекта (подготовка к деплою)

1. Чтобы собрать проект для продакшена, выполните:

   # npm run build

2. Vite создаст папку dist/ с оптимизированными файлами (HTML, CSS, JS).
3. Эти файлы можно загрузить на хостинг.

5. Полезные плагины для VS Code

Для комфортной работы с Vue.js + Vite установите следующие плагины:

• Vue (Official)

• Подсветка синтаксиса, автодополнение, проверка типов для Vue-компонентов.
• Важно: отключите «TypeScript and JavaScript Language Features» для .vue-файлов (Volar берёт на себя эту функцию).

• ESLint

• Статический анализ кода, соблюдение стандартов.
• Установите: npm install eslint --save-dev и настройте .eslintrc.json.

• Prettier

• Автоматическое форматирование кода.
• Установите: npm install prettier --save-dev и настройте .prettierrc.

• Vite

• Поддержка конфигурации Vite (vite.config.js).
• Подсветка синтаксиса и автодополнение для настроек Vite.

• Auto Close Tag

• Автоматическое закрытие HTML/Vue-тегов.

• Auto Rename Tag

• Синхронное переименование парных тегов.

• Path Intellisense

• Автодополнение путей к файлам (полезно для импортов).

• Vue Peek

• Быстрый переход к определениям компонентов и шаблонов.

• Bracket Pair Colorizer 2

• Визуальное выделение пар скобок (улучшает читаемость кода).

• GitLens
  • Расширенные возможности работы с Git (история изменений, авторы кода).