Pierwsze kroki

Przychodzisz z React albo Vue i nic się nie składa? Przeczytaj najpierw

Model mentalny: pięć minut o tym, gdzie podziały się computed, watch, haki cyklu życia i ładowanie danych.Ta strona przeprowadzi cię od pustego folderu do działającej, reaktywnej aplikacji $mol. Powinno to zająć około piętnastu minut. Każdy fragment poniżej to prawdziwy, działający kod — skopiuj go bez zmian.Komponent napiszesz w zwykłym TypeScripcie. $mol ma też krótszy format opisu komponentów, view.tree, i spotkasz go na następnej stronie. Tutaj nie jest potrzebny: komponent $mol tak czy inaczej pozostaje zwykłą klasą.

Czego potrzebujesz

Node.js 18+ i git. To cała lista.Nie instalujesz globalnego CLI ani nie generujesz szablonowego kodu, który później musisz zrozumieć. Aplikacje $mol żyją wewnątrz przestrzeni roboczej MAM, która już wie, jak je budować i serwować.

1. Pobierz przestrzeń roboczą

MAM to narzędzie budujące i rejestr modułów dla $mol. Sklonuj je i zainstaluj raz.1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start uruchamia serwer deweloperski pod http://localhost:9080/. Obserwuje twoje pliki i przebudowuje automatycznie — zostaw go działającego we własnym terminalu.

2. Utwórz moduł

Aplikacja $mol to po prostu folder. Wybierz przestrzeń nazw (własną, np. my) i nazwę (hello).1mkdir -p my/helloJedna zasada do zapamiętania: podkreślenia w nazwie komponentu to separatory folderów. $my_hello mieszka w my/hello/, a $my_hello_form mieszkałby w my/hello/form/. Nazwy folderów modułów nigdy nie zawierają podkreślenia.Teraz dodaj dwa pliki wewnątrz my/hello/.

index.html — punkt wejścia

1<!doctype html>2<html mol_view_root>3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 </head>7 <body mol_view_root>8 <div mol_view_root="$my_hello"></div>9 <script src="web.js"></script>10 </body>11</html>Atrybut mol_view_root="$my_hello" montuje twój komponent przy ładowaniu strony.

hello.view.ts — komponent

1namespace $ {2 3 export class $my_hello extends $mol_page {4 5 title() {6 return 'Greeting'7 }8 9 body() {10 return [ this.Name(), this.Message() ]11 }12 13 @ $mol_mem14 Name() {15 const obj = new this.$.$mol_string16 obj.hint = () => 'Enter your name'17 obj.value = ( next?: string ) => this.name( next )18 return obj19 }20 21 @ $mol_mem22 name( next?: string ) {23 return next ?? ''24 }25 26 @ $mol_mem27 Message() {28 const obj = new this.$.$mol_view29 obj.sub = () => [ this.greeting() ]30 return obj31 }32 33 greeting() {34 const name = this.name()35 return name ? `Hello, ${ name }!` : 'Please enter your name'36 }37 38 }39 40}Edytuj tę stronę na GitHubieCzy to było pomocne?TakNiePoprzedniaModel mentalny NastępnaZ TypeScriptu do view.treeNa tej stronieCzego potrzebujesz 1. Pobierz przestrzeń roboczą 2. Utwórz moduł index.html — punkt wejścia hello.view.ts — komponent 3. Uruchom 4. Dodaj drugą reaktywną wartość 5. Sprawdź swój build Zbudowałeś aplikację $mol