smalljs$molRechercher⌘ KDocsPlaygroundComparerÉcosystèmeÀ proposFR
DémarrageGetting StartedIntroductionModèle mentalDémarrageDe TypeScript à view.treeStructure d'un projetOutillageEssentialsInstallationVuesÉtat et réactivitéRoutageRenduTestsDéploiementDépannageDataRécupération de donnéesSchémas de donnéesGiper BazaMoreVitrineDe React, Vue et SvelteRecettesAdvancedPluginsMétadonnées de moduleHors-ligneVues fantômesAboutFAQÉquipeVersionsAPI$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

Démarrage

Vous venez de React ou de Vue et rien n'a de sens ? Lisez d'abord Modèle mental : cinq minutes sur ce que sont devenus computed, watch, les hooks de cycle de vie et le chargement des données.Cette page vous mène d'un dossier vide à une application $mol réactive et fonctionnelle. Comptez environ quinze minutes. Chaque extrait ci-dessous est du code réel qui fonctionne — copiez-le tel quel.Vous écrirez le composant en TypeScript ordinaire. $mol dispose aussi d'un format plus court pour décrire les composants, view.tree, que vous rencontrerez à la page suivante. Rien ici n'en a besoin : un composant $mol reste une classe ordinaire dans les deux cas.

Ce qu'il vous faut

Node.js 18+ et git. C'est toute la liste.Vous n'installez pas de CLI globale ni ne générez du code passe-partout qu'il vous faudra comprendre plus tard. Les applications $mol vivent à l'intérieur de l'espace de travail MAM, qui sait déjà comment les construire et les servir.

1. Récupérer l'espace de travail

MAM est l'outil de build et le registre de modules de $mol. Clonez-le et installez-le une seule fois.1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start lance le serveur de développement sur http://localhost:9080/. Il surveille vos fichiers et reconstruit automatiquement — laissez-le tourner dans son propre terminal.

2. Créer un module

Une application $mol n'est qu'un dossier. Choisissez un espace de noms (le vôtre, par ex. my) et un nom (hello).1mkdir -p my/helloUne règle à retenir : les traits de soulignement dans un nom de composant sont des séparateurs de dossiers. $my_hello vit dans my/hello/, $my_hello_form vivrait dans my/hello/form/. Les noms de dossiers de modules ne contiennent jamais de trait de soulignement.Ajoutez maintenant deux fichiers dans my/hello/.

index.html — le point d'entrée

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>L'attribut mol_view_root="$my_hello" monte votre composant au chargement de la page.

hello.view.ts — le composant

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}Modifier cette page sur GitHubÉtait-ce utile ?OuiNonPrécédentModèle mentalSuivantDe TypeScript à view.treeSur cette pageCe qu'il vous faut1. Récupérer l'espace de travail2. Créer un moduleindex.html — le point d'entréehello.view.ts — le composant3. Lancer l'application4. Ajouter une deuxième valeur réactive5. Vérifier votre buildVous avez construit une application $mol
Type to search the documentation.