vue designer

VUE设计师

VUE组件设计工具。

此扩展仍在进行中。如果您对此扩展程序有一些反馈，那真的很有帮助！

快速开始

• 下载VSCODE扩展

• 打开命令pallete，然后选择Open Vue Designer 。然后，您可以看到当前打开的单个文件组件（ .vue ）的预览窗格。

设置

vueDesigner.sharedStyles

预览中将加载的CSS路径数组。当您的应用程序具有重置CSS等全局CS时，这很有用。

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

请注意，它不支持已加载的CSS中的@import 。您需要根据CSS文件指定所有。

支持的预处理器

Vue Designer当前并不积极支持<template> ， <script>和<style>块上的预处理器。以下列表中未包含的语言可能对Vue Designer不起作用。

• html（ <template> ）
• JavaScript（ <script> ）
• 打字稿（ <script lang="ts"> ）
• CSS（ <style> >）

发展

Vue Designer由两个模块 - 服务器和客户端分开。

服务器由编辑器流程执行，负责解析/分析组件代码和处理客户端请求。客户端用于渲染组合预览和处理用户的交互。服务器和客户端通过Websocket通信，以同步组件数据。

服务器代码以打字稿编写，并将其编译为Commonjs格式，而客户端代码也在打字稿中，但被Vite捆绑在一起。

仅适用于客户端的代码应在src/view中。

所有代码均应由漂亮的格式。

对于不存在的外部软件包的键入，应该在types/(package name)中。

视觉工作室代码扩展

要在VSCODE上进行调试，请执行以下步骤：

1. 运行yarn watch以启动开发服务器。
2. 打开Vscode并在编辑器左侧显示Debug Pane。
3. 运行Launch Extension ，以便通过启用本地VUE设计师打开一个新窗口。
4. 在命令pallete上选择Open Vue Designer 。

如果要使用开发工具作为客户端代码，请使用开发人员：command pallete上的开发人员工具命令。

命令

 # build sources
$ yarn build

# build and watch sources
$ yarn watch

# run test
$ yarn test

# format sources with prettier
$ yarn format

发布

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

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

$ vsce publish