Štítek: npm

Quasar

admin

Inicializace projektu

$ npm i -g @quasar/cli 
$ npm init quasar

Spuštění projektu

cd projek-folder
quasar dev

Nová komponenta

quasar new component <name> [--format ts]

Boot soubor

quasar new boot <name> [--format ts]

Základní příkazy

$ quasar
   ...
   Commands
      init       Create a project folder
      dev       Start a dev server for your App
      build       Build your app for production
      clean       Clean all build artifacts
      new       Quickly scaffold page/layout/component/... vue file
      mode       Add/remove Quasar Modes for your App
      info       Display info about your machine and your App
      serve       Create an ad-hoc (production-ready) server on App distributables
      help       Displays this message

Vue.js 3 – Hello world

admin 
npm create vue@3

Budeme vyzváni k zadání:

  • názvu projektu
  • podpory TypeStcriptu
  • podpory JSX
  • testů, ESlintu, …

Po vytvoření kostry projektu stačí nainstalovat balíčky a projekt spustit:

cd vue-project
npm install
npm run dev

Tip

Pokud se při spuštění vyskytnou problémy (failed to load config from vite.config.js, Error: Cannot find module ‚node:url‘, …) aktualizujte node.js na najnovější LTS verzi.

Spuštění projektu

Pokud vše prošlo, uvidíte v konzoli:

VITE v4.0.4 ready in 307 ms

➜ Local: http://localhost:5173/
➜ Network: use –host to expose
➜ press h to show help

Otevřee internetový prohlížeč a zadejte do něj adresu z konzole: http://localhost:5173/

Angular – Hello world

admin

Instalace

  1. Nainstalovat Node.js https://nodejs.org/en/
  2. Po nainstalovaná Node.js začnou v příkazové řádce fungovat příkazy:
    node –version
    npm –v
  3. Nainstalujeme Angular CLI: npm install -g @angular/cli
    Po nainstalování začne fungovat příkaz zobrazující verzi Angular CLI:
    ng –version

První aplikace – Hello world

Skelet první aplikace vygenerujeme příkazem:

ng new hello-world

Budeme dotázání, zda chceme použít knihovnu Angular routing a jaký stylesheet chceme použít pro stylování (SCSS, Sass, Less, Stylus). Stačí potvrdit předpřipravené hodnoty, nebo vyberte to co umíte.

Pří kazové řádce vstoupíme do složky s vytvořeným projektem:

cd hello-world

Spustíme aplikaci:

ng serve

Aplikace se defaultně spustí na portu 4200. Teď jen do internetového prohlížeče zadáte adresu: http://localhost:4200/ kde rovnou vidíte výsledek.

Pokud chcete aplikaci spustit na jiném portu, provedete to příkazem:

ng serve --port 7777

Úprava kódu

Nyní se můžete vrhnout a úpravu kódu. Všechny úpravy můžete průběžně kontrolovat v internetovém prohlížeči, kde se projevují bez nutnosti ručního obnovení stránky. Skvělé.

Nová komponenta

Pro znovu použitelnost kód který využíváme na několika místech dáváme do komponent. Komponentu vygenerujeme:

ng generate component hero-detail