Как развернуть приложение Vue 3 на Composition API - построение простого графика Chart.js

Простая пошаговая инструкция разворачивания/установки приложение Vue 3 на Composition API с построением на его архитектуре простого графика с использованием Chart.js.

Шаг 1: Создание нового проекта Vue

Убедитесь, что у вас установлен Node.js и npm. Затем создайте новый проект Vue с помощью Vue CLI.

npm install -g @vue/cli
vue create vue-chart-demo

Следуйте инструкциям в терминале и выберите настройки по умолчанию.

Шаг 2: Установка необходимой библиотеки

Перейдите в папку вашего проекта и установите пакет Chart.js:

cd vue-chart-demo
npm install chart.js

как развернуть мини-приложение Vue 3 + ChartJS

Шаг 3: Создание компонента для графика

Создайте новый компонент, например ChartComponent.vue в папке src/components:

<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

export default {
  name: 'ChartComponent',
  setup() {
    const chart = ref(null);

    onMounted(() => {
      const ctx = document.getElementById('myChart').getContext('2d');
      chart.value = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн'],
          datasets: [{
            label: 'Простой линейный график',
            data: [0, 10, 5, 2, 20, 30],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: false
          }]
        },
        options: {
          responsive: true,
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    });

    return { chart };
  }
};
</script>

Шаг 4: Импорт и использование компонента

Откройте файл src/App.vue и импортируйте созданный компонент:

<template>
  <div id="app">
    <ChartComponent />
  </div>
</template>

<script>
import ChartComponent from './components/ChartComponent.vue';

export default {
  name: 'App',
  components: {
    ChartComponent
  }
};
</script>

Шаг 5: Запуск проекта

Теперь вы можете запустить ваше Vue приложение:

npm run serve

Откройте браузер и перейдите по адресу http://localhost:8080 для просмотра вашего линейного графика.

Теперь остаётся только скомпилировать наше приложение на Vue 3

Шаги по сборке проекта

Перейдите в папку вашего проекта
Откройте терминал и перейдите в директорию вашего Vue проекта, если вы еще этого не сделали:
```
cd vue-chart-demo
```
Запустите сборку проекта
Используйте следующую команду, чтобы скомпилировать проект для продакшн-окружения:
```
npm run build
```
Найдите скомпилированные файлы
После завершения сборки, Vue CLI создаст новую папку под названием dist в корневой директории вашего проекта. В этой папке будут находиться все скомпилированные файлы вашего приложения.

Перед сборкой убедитесь что в файле vue.config.js установлен базовый путь, относительно которого будут подключаться все js и css файлы в исходном файле index.html

как развернуть мини-приложение Vue 3 + ChartJS - 1

Что делать с собранными файлами?

Теперь у вас есть скомпилированное приложение, которое вы можете развернуть на веб-сервере. В папке dist вы найдете HTML, CSS и JS файлы, которые можно разместить на любом веб-сервере (например, Apache, Nginx или на хостингах вроде Netlify, Vercel и т.д.).

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

Запустить проект в режиме разработки: Если вы хотите запустить проект в режиме разработки (с горячей заменой), используйте команду:
```
npm run serve
```
Настройка конфигурации сборки: Для изменения настроек компиляции, таких как минимизация, название выходных файлов и другие параметры, откройте файл vue.config.js, если он существует, или создайте его в корневом каталоге вашего проекта.

Примечание

Не забудьте проверить, что у вас установлены все необходимые зависимости, чтобы избежать проблем при сборке. Вы можете установить зависимости, используя команду:

npm install

Заключение

Теперь у вас есть простое приложение Vue 3 с линейным графиком, построенным с помощью Chart.js. Вы можете настраивать графики по своему усмотрению, изменяя данные, цвета и параметры стиля в компоненте ChartComponent.vue.

Дополнительные настройки

Понимая данный подход, можно дальше расширить свое приложение, например, добавив пользовательскую форму ввода определенных данных для их последующей обработки и построения различных графиков с использованием Chart.js.

Вот несколько идей для дальнейшей работы с данным приложением:

Добавьте больше наборов данных, чтобы показать несколько линий на одном графике.
Изучите различные типы графиков, доступные в Chart.js, такие как гистограммы, круговые диаграммы и распечатки.
Настройте стили графика, добавив дополнительные опции в объект options.
Работайте с динамическими данными, интегрируя API для получения и отображения данных в реальном времени.

Полезные ссылки

Понимание системы взаимодействия компонентов приложения Vue3 даёт возможности к расширению своего творчества!