kwa-ui/install.md

Installation de l'environnement de travail

• Télécharger et installer Node.js (version utilisée : v24.15.0-x64)
• Vérification de l'installation

node -v
    v24.15.0

npm -v
    9.1.1

Initialiser le projet vue.js

npm create vue@latest
┌  Vue.js - The Progressive JavaScript Framework
│
◇  Project name (target directory):
│  kwa-ui
│
◇  Use TypeScript?
│  Yes
│
◇  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  Router (SPA development), Pinia (state management)
│
◇  Select experimental features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  none
│
◇  Skip all example code and start with a blank Vue project?
│  No

Scaffolding project in C:\Users\sschn\kwa-ui...
│
└  Done. Now run:
        cd kwa-ui
        npm install
        npm run dev

Installation des outils complémentaires

npm install primevue @primeuix/themes
npm install primeicons

npm install

Configuration initiale

Modification du fichier main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
import 'primeicons/primeicons.css';
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())

app.use(router)

app.use(PrimeVue, {
    theme: {
        // Use the Aura theme. It's a modern and elegant theme 
        // that provides a great user experience.
        preset: Aura, 

        options: {
            // Adapts to the Windows dark mode
            darkModeSelector: 'system', 
        }
    }
});

app.mount('#app')

Adaptation du Router

Modification du fichier src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHashHistory(), 
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
  ],
})

export default router

Modification du fichier vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  base: './', 
  build: {
    // Optional: specify the output directory for the build
    outDir: 'dist',
    assetsDir: 'assets',
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

Construction de l'application

cd kwa-ui
npm run build