Этот урок посвящен профессиональной разработке на Vue.js с использованием Vue CLI и .vue файлов. Ранее код писался непосредственно в HTML файле, что неэффективно для больших проектов. Vue CLI и .vue файлы обеспечивают эффективную и масштабируемую организацию кода. Готовый код и домашнее задание доступны на сайте [ссылка на сайт].
Недостатки прямого написания кода в HTML
Для небольших проектов достаточно писать код непосредственно в index.html или main.js. Однако, для средних и крупных проектов такой подход непрактичен. Работа с препроцессорами, библиотеками и множеством файлов требует организованной структуры.
Vue CLI
Vue CLI — инструмент командной строки для организации пространства Vue.js проектов. Он создаёт структуру проекта с необходимыми файлами и настройками, упрощая разработку. Для установки необходим Node.js.
Установка Node.js и Vue CLI
- Установите Node.js: Скачайте и установите Node.js с сайта [ссылка на сайт Node.js]. Node.js включает npm (Node Package Manager), необходимый для установки Vue CLI.
- Установите Vue CLI: В терминале выполните команду: npm install -g @vue/cli. На macOS и Linux может потребоваться добавить sudo перед командой.
Создание проекта
После установки Vue CLI создайте проект командой vue create <имя_проекта>. Рекомендуется использовать шаблон vue create <имя_проекта> —preset webpack —default.
Выбор шаблона
Vue CLI предоставляет шаблоны, например, default, babel, eslint. Для простоты можно использовать webpack или default. В этом уроке используется default.
Установка и запуск проекта
После выбора шаблона и имени проекта, Vue CLI установит зависимости (это может занять время). После установки, выполните cd <имя_проекта> и npm run serve. Локальный сервер запустится, и результат будет доступен по адресу http://localhost:8080.
Структура .vue файлов
Vue CLI создаёт проект со структурой, где .vue файлы содержат:
- <template>: HTML шаблон компонента.
- <script>: JavaScript логика компонента (data, methods, computed и т.д.).
- <style>: CSS стили компонента. Для локальных стилей используйте <style scoped>.
<template> должен содержать один родительский элемент.
main.js
main.js — точка входа в приложение. Он создаёт экземпляр Vue и монтирует его в DOM. В main.js импортируются и используются .vue компоненты. Компоненты передаются функции render, которая заменяет элемент на новый, созданный на основе шаблона компонента.
Vue CLI и .vue файлы упрощают разработку Vue.js приложений, особенно больших. Организованная структура, разделение кода на компоненты и локальные стили делают разработку эффективнее и понятнее. Эта структура упростит дальнейшую работу и масштабирование проекта.