Vue.js

Pilnas diegimo vadovas, skirtas Vue.js NStrim platformoje

Apžvalga

Vue.js yra progresyvus JavaScript karkasas vartotojo sąsajoms kurti. Jis sukurtas taip, kad būtų palaipsniui priimamas, ir orientuojasi į vaizdo sluoksnį, todėl jį lengva integruoti su kitomis bibliotekomis ar esamais projektais.

Prieš pradėdami
Įsitikinkite, kad jūsų valdymo skydelis atidarytas - jums reikės ten rodomų Git prisijungimo duomenų. Šiame šablone yra Vue 3, Tailwind CSS 4, Pinia būsenos valdymui ir Vue Router.

Greitas startas

1

Sukurkite repozitoriją iš šablono

Valdymo skydelyje pereikite į skirtuką Tools & Deployment. Spauskite mygtuką "New Repository", išskleidžiamame sąraše pasirinkite Vue.js šabloną, įveskite repozitorijos pavadinimą ir subdomeną, tada spauskite "Create Repository".

2

Klonuokite savo repozitoriją

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

Įdiekite priklausomybes

npm install
4

Paleiskite kūrimo serverį

npm run dev

Naršyklėje atidarykite http://localhost:4200.

5

Sukompiliuokite ir įkelkite

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Kiekvienas push į Git automatiškai įdiegia jūsų aplikaciją. Patikrinkite Modulio darbo URL valdymo skydelyje, kad pamatytumėte savo gyvą svetainę.

Vietinis kūrimas su Docker

Jei vietoje neturite įdiegto Node.js, galite naudoti Docker Vue komandoms vykdyti. Projekte yra Dockerfile produkcijos versijoms su nginx.

Kas yra Docker?
Docker sukuria izoliuotus „konteinerius" su visa reikalinga programine įranga (Node.js, npm) jos neįdiegiant į jūsų kompiuterį. Įsivaizduokite tai kaip lengvą virtualią mašiną.

Reikalavimai

Įdiekite Docker Desktop savo operacinei sistemai (Windows, Mac arba Linux).

Komandų vykdymas su Docker

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

# Paleisti kūrimo serverį (pasiekiamas adresu localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm run dev

# Sukompiliuoti produkcijai
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Pastaba
Docker yra neprivalomas vietiniam kūrimui. NStrim platforma diegimą tvarko automatiškai - Docker reikia tik tuomet, jei norite vykdyti komandas vietoje neįdiegę Node.js.

Projekto struktūra

Kur yra failai:

├── src/
│   ├── assets/               # Statiniai resursai (paveikslėliai, šriftai)
│   ├── components/           # Vue komponentai
│   ├── views/                # Puslapio komponentai
│   ├── router/               # Vue Router konfigūracija
│   ├── stores/               # Pinia saugyklos
│   ├── App.vue               # Šaknies komponentas
│   └── main.js               # Aplikacijos įėjimo taškas
├── public/                   # Vieši statiniai failai
├── index.html                # HTML įėjimo taškas
├── vite.config.js            # Vite konfigūracija
├── package.json              # Priklausomybės ir skriptai
└── Dockerfile                # Docker kompiliavimo konfigūracija

Įprastos užduotys

Komponento kūrimas

Kurkite .vue failus src/components/ kataloge:

<!-- 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>

Maršruto pridėjimas

Redaguokite 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 saugyklos naudojimas

Sukurkite saugyklą src/stores/ kataloge:

// 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 naudojimas

Tailwind CSS 4 yra iš anksto sukonfigūruotas. Naudokite klases tiesiogiai savo šablonuose:

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

Naudingos komandos

npm run dev Paleisti kūrimo serverį (prievadas 4200)
npm run build Sukompiliuoti produkcijai
npm run preview Peržiūrėti produkcijos versiją vietoje
npm run test:unit Vykdyti vienetų testus su Vitest
npm run lint Patikrinti ir pataisyti kodo stilių
npm run format Formatuoti kodą su Prettier

Trikčių šalinimas

npm install nepavyksta su leidimo klaidomis

Priežastis: Leidimų problemos su npm talpykla arba node_modules.

Sprendimas: Ištrinkite node_modules aplanką ir package-lock.json, tada vėl paleiskite npm install.

Prievadas 4200 jau naudojamas

Priežastis: Kitas procesas naudoja prievadą 4200.

Sprendimas: Naudokite kitą prievadą: npm run dev -- --port 3000 arba sustabdykite kitą procesą.

Komponentas neatnaujinamas

Priežastis: Reaktyvumas netinkamai sukonfigūruotas.

Sprendimas: Naudokite ref() primityvams ir reactive() objektams. Pasiekite ref reikšmes naudodami .value skripte, bet ne šablone.

Router neveikia

Priežastis: RouterView nėra App.vue arba router neregistruotas.

Sprendimas: Įsitikinkite, kad <RouterView /> yra App.vue ir router pridėtas su app.use(router) main.js faile.

Kompiliavimas nepavyksta po diegimo

Priežastis: Kompiliavimo klaidos arba trūkstamos priklausomybės.

Sprendimas: Pirmiausia vietoje paleiskite npm run build, kad patikrintumėte klaidas prieš įkeldami.

Diegimo eiga

Kiekvieną kartą, kai įkeliate kodą į Git, jūsų aplikacija automatiškai sukompiliuojama ir įdiegiama:

Kodo pakeitimas git push npm run build Diegti į nginx Gyvai!

Jūsų įdiegtos aplikacijos URL atitinka šį formatą: 

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

Pavyzdys: https://student01-module-a.demo.nstrim.app

Daugiau informacijos rasite oficialioje Vue.js dokumentacijoje.