smalljs$molSuche⌘ KDokuPlaygroundVergleichÖkosystemÜberDE
Erste SchritteGetting StartedEinführungMentales ModellErste SchritteVon TypeScript zu view.treeProjektstrukturWerkzeugeEssentialsInstallationViewsZustand und ReaktivitätRoutingRenderingTestenDeploymentFehlerbehebungDataDatenabrufDatenschemasGiper BazaMoreSchaufensterVon React, Vue und SvelteKochbuchAdvancedPluginsModul-MetadatenOfflineGhost-AnsichtenAboutFAQTeamReleasesAPI$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

Erste Schritte

Du kommst von React oder Vue und nichts ergibt einen Sinn? Lies zuerst Mentales Modell: fünf Minuten darüber, wo computed, watch, die Lifecycle-Hooks und das Laden von Daten geblieben sind.Diese Seite führt dich von einem leeren Ordner zu einer laufenden, reaktiven $mol-App. Es sollte etwa fünfzehn Minuten dauern. Jeder Ausschnitt unten ist echter, funktionierender Code — kopiere ihn unverändert.Du schreibst die Komponente in reinem TypeScript. $mol hat auch ein kürzeres Format für die Beschreibung von Komponenten, view.tree, und dem begegnest du auf der nächsten Seite. Hier braucht es das nicht: Eine $mol-Komponente ist so oder so eine gewöhnliche Klasse.

Was du brauchst

Node.js 18+ und git. Das ist die ganze Liste.Du installierst keine globale CLI und generierst keinen Boilerplate-Code, den du später verstehen musst. $mol-Apps leben innerhalb des MAM-Workspace, der bereits weiß, wie man sie baut und ausliefert.

1. Den Workspace holen

MAM ist das Build-Werkzeug und die Modul-Registry für $mol. Klone es und installiere es einmal.1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start startet den Entwicklungsserver auf http://localhost:9080/. Er überwacht deine Dateien und baut automatisch neu — lass ihn in einem eigenen Terminal laufen.

2. Ein Modul erstellen

Eine $mol-App ist einfach ein Ordner. Wähle einen Namensraum (deinen eigenen, z. B. my) und einen Namen (hello).1mkdir -p my/helloEine Regel zum Merken: Unterstriche in einem Komponentennamen sind Ordner-Trenner. $my_hello liegt in my/hello/, $my_hello_form läge in my/hello/form/. Modul-Ordnernamen enthalten niemals einen Unterstrich.Füge nun zwei Dateien in my/hello/ hinzu.

index.html — der Einstiegspunkt

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>Das Attribut mol_view_root="$my_hello" bindet deine Komponente beim Laden der Seite ein.

hello.view.ts — die Komponente

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}Diese Seite auf GitHub bearbeitenWar das hilfreich?JaNeinZurückMentales ModellWeiterVon TypeScript zu view.treeAuf dieser SeiteWas du brauchst1. Den Workspace holen2. Ein Modul erstellenindex.html — der Einstiegspunkthello.view.ts — die Komponente3. Ausführen4. Einen zweiten reaktiven Wert hinzufügen5. Deinen Build prüfenDu hast eine $mol-App gebaut
Type to search the documentation.