vue designer

Vue Designer

Outil de conception des composants Vue.

Cette extension est toujours en cours. Si vous avez des commentaires pour cette extension, ce serait vraiment utile!

Démarrage rapide

• Télécharger l'extension VScode

• Ouvrez la commande palette et sélectionnez Open Vue Designer . Ensuite, vous pouvez voir un volet d'aperçu du composant de fichier unique actuellement ouvert ( .vue ).

Paramètres

vueDesigner.sharedStyles

Un tableau de chemins CSS qui seront chargés dans l'aperçu. Il est utile lorsque votre application a un CSS global tel que réinitialiser CSS.

{
  "vueDesigner.sharedStyles" : [ " reset.css " ]
}

Notez qu'il ne prend pas en charge @import dans le CSS chargé. Vous devez spécifier tous en fonction des fichiers CSS.

Préprocesseurs pris en charge

Vue Designer ne prend actuellement pas en charge activement les préprocesseurs sur les blocs <template> , <script> et <style> . Les langues non incluses dans la liste suivante peuvent ne pas fonctionner sur Vue Designer.

• Html ( <template> )
• Javascript ( <script> )
• TypeScript ( <script lang="ts"> )
• CSS ( <style> )

Développement

Vue Designer est séparé par deux modules - serveur et client.

Le serveur est exécuté par le processus de l'éditeur et responsable de l'analyse / analyse du code des composants et de la gestion des demandes du client. Le client est destiné à rendre l'aperçu compnel et à gérer l'interaction des utilisateurs. Le serveur et le client communiquent par WebSocket pour synchroniser les données des composants.

Le code du serveur est écrit en TypeScript et compilé au format CommonJS tandis que le code client est également en type TypeScript mais regroupé par Vite.

Les codes uniquement pour le client doivent être dans src/view .

Tous les codes doivent être formatés par des plus jolis.

Pour les dactages de packages externes qui n'existe pas, il faut être dans types/(package name) .

Extension de code Visual Studio

Pour déboguer sur VScode, suivez les étapes ci-dessous:

1. Exécutez yarn watch pour démarrer le serveur de développement.
2. Ouvrez VScode et affichez le volet de débogage sur le côté gauche de l'éditeur.
3. Exécutez Launch Extension afin qu'il ouvre une nouvelle fenêtre avec l'activation du concepteur Vue local.
4. Sélectionnez Open Vue Designer sur Commande Pallete.

Si vous souhaitez utiliser Dev Tools pour le code client, utilisez le développeur: Toggle Developer Tools Commande sur la commande palette.

Commandes

 # build sources
$ yarn build

# build and watch sources
$ yarn watch

# run test
$ yarn test

# format sources with prettier
$ yarn format

Libérer

$ npm version XXX # -> update version & generate changelog

# after edit changelog if needed
$ git add CHANGELOG.md
$ git commit -m " docs: changelog vXXX "

$ vsce publish