Vue.js

Ülevaade

Vue.js on progressiivne JavaScripti raamistik kasutajaliideste ehitamiseks. See on loodud järk-järgult kasutuselevõtuks ja keskendub vaatekihile, muutes selle hõlpsasti integreeritavaks teiste teekide või olemasolevate projektidega.

Kiirjuhend

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>

npm install

npm run dev

npm run build
git add .
git commit -m "Initial setup"
git push origin main

Kohalik arendus Dockeriga

Kui sul ei ole Node.js-i kohalikult paigaldatud, saad Vue käskude käivitamiseks kasutada Dockerit. Projekt sisaldab tootmise ehitamiseks Dockerfile'i koos nginxiga.

Eeldused

Paigalda Docker Desktop oma operatsioonisüsteemi jaoks (Windows, Mac või Linux).

Käskude käivitamine Dockeriga

# Käivita npm install
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Käivita arendusserver (kättesaadav aadressil localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm run dev

# Ehita tootmise jaoks
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build

Projekti struktuur

Failide asukohtade mõistmine:

├── src/
│   ├── assets/               # Staatilised ressursid (pildid, fondid)
│   ├── components/           # Vue komponendid
│   ├── views/                # Lehekomponendid
│   ├── router/               # Vue Routeri seadistus
│   ├── stores/               # Pinia salvestid
│   ├── App.vue               # Juurkomponent
│   └── main.js               # Rakenduse sisendpunkt
├── public/                   # Avalikud staatilised failid
├── index.html                # HTML sisendpunkt
├── vite.config.js            # Vite seadistus
├── package.json              # Sõltuvused ja skriptid
└── Dockerfile                # Dockeri ehitamise seadistus
        

Levinud ülesanded

Komponendi loomine

Loo .vue failid kataloogis src/components/:

<!-- src/components/Button.vue -->
<script setup>
defineProps({
  label: String
});

const emit = defineEmits(['click']);
</script>

<template>
  <button
    class="bg-blue-500 text-white px-4 py-2 rounded"
    @click="emit('click')"
  >
    {{ label }}
  </button>
</template>

Marsruudi lisamine

Muuda src/router/index.js:

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

export default router;

Pinia salvesti kasutamine

Loo salvesti kataloogis src/stores/:

// src/stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    decrement() { this.count-- }
  }
});

Tailwind CSS-i kasutamine

Tailwind CSS 4 on eelseadistatud. Kasuta klasse otse oma mallides:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Kasulikud käsud

Tõrkeotsing

Juurutamise töövoog

Iga kord, kui saadad koodi Giti, ehitatakse ja juurutatakse sinu rakendus automaatselt:

Sinu juurutatud rakenduse URL järgib seda formaati:

https://<your-subdomain>-<repo-name>.<session-domain>

Näide: https://student01-module-a.demo.nstrim.app