vue designer

Diseñador de vue

Herramienta de diseño de componentes VUE.

Esta extensión sigue funcionando en progreso. Si tiene algunos comentarios para esta extensión, ¡sería realmente útil!

Comienzo rápido

• Descargar VSCODE Extension

• Abra el comando de Pallete y seleccione Open Vue Designer . Luego puede ver un panel de vista previa del componente de archivo único actualmente abierto ( .vue ).

Ajustes

vueDesigner.sharedStyles

Una variedad de rutas CSS que se cargarán en la vista previa. Es útil cuando su aplicación tiene CSS global, como RESET CSS.

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

Tenga en cuenta que aún no admite @import en el CSS cargado. Debe especificar todos los archivos CSS dependientes.

Preprocesadores compatibles

Vue Designer actualmente no admite activamente los preprocesadores en <template> , <script> y <style> bloques. Los idiomas que no se incluyen en la siguiente lista pueden no funcionar en Vue Designer.

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

Desarrollo

Vue Designer está separado por dos módulos: servidor y cliente.

El servidor es ejecutado por el proceso del editor y responsable con el análisis/análisis del código de componentes y el manejo de las solicitudes del cliente. El cliente es para representar la vista previa de Compnent y manejar la interacción de los usuarios. El servidor y el cliente se comunican por WebSocket para sincronizar los datos de los componentes.

El código del servidor está escrito en TypeScript y se compila en el formato CommonJS, mientras que el código del cliente también está en TypeScript pero que vite.

Los códigos solo para el cliente deben estar en src/view .

Todos los códigos deben ser formateados por Prettier.

Para los tipos de paquetes externos que no existen deben estar en types/(package name) .

Extensión del código de Visual Studio

Para depurar en VScode, siga los pasos a continuación:

1. Ejecute yarn watch para iniciar el servidor Dev.
2. Abra VScode y muestre panel de depuración en el lado izquierdo del editor.
3. Ejecute Launch Extension para que abra una nueva ventana con habilitar el diseñador VUE local.
4. Seleccione Open Vue Designer en el comando de Pallete.

Si desea utilizar herramientas de desarrollo para el código del cliente, use el comando de desarrollador: alternar las herramientas de desarrollador en el comando pallete.

Comandos

 # build sources
$ yarn build

# build and watch sources
$ yarn watch

# run test
$ yarn test

# format sources with prettier
$ yarn format

Liberar

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

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

$ vsce publish