Установка и настройка проекта Vue.js осуществляется через терминал. Откройте терминал — в Visual Studio Code или как отдельную программу. Очистите терминал командой clear.
Переход в рабочую директорию
Перейдите в нужную директорию, используя команду cd. Например, для перехода в папку «Downloads»: cd Downloads. Полный путь к папке указывайте в кавычках.
Инициализация проекта
Инициализируйте проект Vue.js с помощью npm:
npm init vue@latestЭта команда создаёт новый проект Vue.js, используя последнюю доступную версию. Система запросит информацию о проекте: название (например, itproger), необходимость дополнительных библиотек (TypeScript, JSX и т.д.). Для простоты, нажимайте Enter, отклоняя дополнительные опции.
После инициализации выполните следующие команды:
- Переход в созданную директорию: cd itproger
- Установка зависимостей: npm install (или npm i)
- Запуск локального сервера: npm run dev
Команда npm run dev запустит локальный сервер, отобразив ссылку на него в терминале. Откройте эту ссылку в браузере. Для остановки сервера, нажмите Ctrl + C. Вы увидите пустой шаблон проекта Vue.js.
Структура проекта
Рассмотрим структуру проекта:
- .vscode: Папка для Visual Studio Code (может отсутствовать в других редакторах).
- node_modules: Папка с установленными модулями и библиотеками. Не требует непосредственного вмешательства.
- public: Папка со скомпилированным проектом (для публикации). На начальном этапе содержит только favicon.ico, который можно удалить.
- src: Папка с исходными файлами проекта. Здесь будет основная работа.
- assets: Папка для статических ресурсов (изображения, стили и т.д.). Содержимое можно удалить на начальном этапе.
- components: Папка для компонентов (необходима в больших проектах). Содержимое можно удалить на начальном этапе.
- App.vue: Основной компонент приложения.
- main.js: Основной файл JavaScript, инициализирующий приложение Vue.js.
- App.vue: Содержит три части: <script>, <template> и <style>. На начальном этапе содержимое всех трёх частей можно удалить.
- main.js: Импортирует createApp из Vue.js, устанавливает основной компонент (App.vue), импортирует стили и монтирует приложение в элемент с ID app в index.html.
- index.html: Стандартный HTML файл, подключающий main.js. Содержит <div id="app">, куда будет рендериться содержимое App.vue.
- .gitignore: Файл для игнорирования файлов и папок при использовании Git. Можно удалить на начальном этапе.
- package.json и package-lock.json: Файлы, описывающие зависимости и конфигурацию проекта. package.json содержит информацию о скриптах, например, dev (запуск локального сервера).
- vite.config.js: Файл конфигурации Vite (обычно не требует изменений).
В этом уроке мы установили и настроили проект Vue.js, изучили его базовую структуру и подготовили рабочую среду для дальнейшей разработки. В следующих уроках мы начнём разработку приложения и изучение концепций фреймворка.