vue designer

Designer Vue

Ferramenta de design de componentes VUE.

Esta extensão ainda está em andamento. Se você tiver alguns feedbacks para esta extensão, seria realmente útil!

Início rápido

• Faça o download da extensão do vscode

• Abra o comando palete e selecione Open Vue Designer . Em seguida, você pode ver um painel de visualização do componente de arquivo único atualmente aberto ( .vue ).

Configurações

vueDesigner.sharedStyles

Uma matriz de caminhos CSS que serão carregados na visualização. É útil quando seu aplicativo possui CSS global, como redefinir CSS.

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

Observe que ele ainda não suporta @import no CSS carregado. Você precisa especificar todos os arquivos CSS dependendo.

Pré -processadores suportados

Atualmente, o Vue Designer não suporta ativamente os pré -processadores nos blocos <template> , <script> e <style> . Os idiomas não incluídos na lista a seguir podem não funcionar no Vue Designer.

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

Desenvolvimento

O Designer Vue é separado por dois módulos - servidor e cliente.

O servidor é executado pelo processo do editor e responsável por analisar/analisar o código do componente e o manuseio de solicitações do cliente. O cliente é para renderizar a visualização Compnent e lidar com a interação dos usuários. O servidor e o cliente se comunicam pelo WebSocket para sincronizar dados de componentes.

O código do servidor é escrito no TypeScript e compilado ao formato CommonJS, enquanto o código do cliente também está no TypeScript, mas incluído pelo Vite.

Os códigos apenas para o cliente devem estar no src/view .

Todos os códigos devem ser formatados por mais bonitos.

Para tímidos de pacotes externos que não existem, devem estar em types/(package name) .

Extensão do código do Visual Studio

Para depurar no vscode, siga as etapas abaixo:

1. Execute yarn watch para iniciar o servidor dev.
2. Abra o vscode e mostre o painel Debug no lado esquerdo do editor.
3. Execute Launch Extension para abrir uma nova janela para ativar o designer de vue local.
4. Selecione Open Vue Designer On Command Pallete.

Se você deseja usar as ferramentas de dev para código do cliente, use o desenvolvedor: alternar o comando do desenvolvedor Ferramentas no comando palete.

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