Установка и создание

Рекомендации к совместимости

Vite требует Node.js версии 14.18+, 16+. Так что рекомендуется использовать именно их.

flue3 реализуется как отдельный npm пакет со своей конфигурацией и CLI командами.

Поэтому производим установку:

npm install flue3 --save

После установки flue3, он так же подтянет vite и vue пакеты, поэтому отдеально их устанавливать не надо.

Входная точка и инициализация приложения

По умолчанию рабочая папка является src, поэтому нам нужно создать входную точку по пути src/app.(js|ts).

TypeScript?

В дальнейшем все примеры будут на TypeScript языке, но вы так же можете писать и на ванильном JavaScript.

Входная точка должна экспортировать метод createApp:

src/app.ts

typescript

import { createApp } from 'flue3';

import App from './App.vue';

export default createApp(App);

Так же нам нужно создать корневой компонент Vue, который в будущем передадим первым аргументом в createApp.

Внутри этого компонента мы должны импортировать компонет AppRoot и использовать его как корневой.

src/App.vue

vue

<template>
    <AppRoot>
        Hello from flue3
    </AppRoot>
</template>

<script lang="ts" setup>
import { AppRoot } from 'flue3';
</script>

Итоговая структура у нас выглядит примерно так:

.
├─ src
│  ├─ app.ts
│  └─ App.vue
└─ package.json

flue3 предоставляет CLI, для запуска вашего приложение в режиме разработки и сборки итогового бандла.

json

{
  "scripts": {
    "dev": "flue3 dev", // запуск приложения в режиме разработки
    "build": "flue3 build", // сборка бандла
  }
}

Если мы запустим npm run dev и перейдём на указанный URL, то увидим наше стартовое приложение.