Налаштування вашого першого проекту Vue.js

Vue.js — це прогресивний фреймворк JavaScript для створення інтерфейсів користувача та односторінкових програм. Він дуже гнучкий і його легко інтегрувати з іншими бібліотеками або існуючими проектами. У цьому посібнику ви зможете налаштувати свій перший проект Vue.js за допомогою Vue CLI, потужного інструменту для розробки програм Vue та керування ними.

передумови

Перш ніж налаштовувати проект Vue.js, переконайтеся, що у вашій системі встановлено наступне:

• Node.js і npm: Vue.js вимагає встановлення Node.js і npm (Node Package Manager). Ви можете завантажити їх з офіційного веб-сайту Node.js.

Крок 1: Встановіть Vue CLI

Vue CLI (Інтерфейс командного рядка) — це інструмент, який допомагає легко створювати та керувати проектами Vue.js. Щоб глобально встановити Vue CLI у вашій системі, відкрийте термінал або командний рядок і виконайте таку команду:

npm install -g @vue/cli

Ця команда встановлює Vue CLI глобально, дозволяючи отримати доступ до команди vue з будь-якої точки вашого терміналу.

Крок 2: Створіть новий проект Vue

Після встановлення Vue CLI ви можете створити новий проект Vue.js, виконавши таку команду:

vue create my-vue-app

Вам буде запропоновано вибрати стиль для вашого проекту. Ви можете вибрати стандартний набір, який включає Babel і ESLint, або вручну вибрати такі функції, як Vue Router, Vuex, TypeScript тощо. Початківцям рекомендується вибрати пресет за замовчуванням, натиснувши Enter.

Потім Vue CLI створить нову папку з назвою my-vue-app і налаштує структуру проекту з усіма необхідними файлами та конфігураціями.

Крок 3. Перейдіть до папки проекту

Після створення проекту перейдіть до папки проекту за допомогою такої команди:

cd my-vue-app

Це змінить робочий каталог вашого терміналу на новостворену папку проекту Vue.js.

Крок 4. Запустіть сервер розробки

Щоб побачити свою нову програму Vue.js у дії, запустіть локальний сервер розробки, виконавши:

npm run serve

Ця команда запустить сервер розробки за адресою http://localhost:8080 (або інший доступний порт). Відкрийте веб-переглядач і перейдіть за цією URL-адресою, щоб переглянути нову програму Vue.js.

Розуміння структури проекту

Після створення нового проекту Vue.js ви побачите добре організовану структуру проекту. Ось основні файли та папки:

• src: Ця папка містить вихідний код вашої програми Vue.js. Усі компоненти, види та стилі розташовані тут.
• public: Ця папка містить статичні ресурси, такі як зображення, шрифти та файл index.html, який служить точкою входу для вашої програми.
• src/main.js: Основна точка входу для вашої програми Vue.js. Цей файл ініціалізує екземпляр Vue і монтує його до DOM.
• src/App.vue: Кореневий компонент вашої програми. Ви можете змінити цей файл, щоб змінити основний макет програми.
• src/components: Ця папка містить приклади компонентів Vue, наприклад HelloWorld.vue. Тут можна додавати нові компоненти та імпортувати їх у свою програму.

Крок 5: Налаштуйте свою програму

Ви можете почати налаштовувати свою програму Vue.js, відредагувавши файл App.vue і створивши нові компоненти. Ось приклад простого компонента Vue:

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'WelcomeComponent'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Збережіть зміни та миттєво перегляньте результати у своєму браузері завдяки функції гарячого перезавантаження Vue.

Висновок

Щиро вітаю! Ви успішно налаштували свій перший проект Vue.js і вивчили основи створення та запуску програми Vue. Завдяки Vue CLI у вас є потужний інструмент, який допоможе вам створювати, розробляти та керувати своїми проектами Vue.js. Звідси ви можете досліджувати такі розширені функції, як Vue Router для маршрутизації, Vuex для керування станом і Composition API для більш потужної та гнучкої розробки.