Vue Designer 技术文档

Vue Designer 技术文档

vue-designer Vue component design tool 项目地址: https://gitcode.com/gh_mirrors/vu/vue-designer

安装指南

1. 下载 VSCode 扩展

首先，您需要从 Visual Studio Code 市场下载 Vue Designer 扩展。您可以通过以下步骤完成下载：

• 打开 Visual Studio Code。
• 点击左侧的扩展图标（或按 Ctrl+Shift+X）。
• 在搜索栏中输入 Vue Designer。
• 找到 Vue Designer 扩展并点击 Install 按钮进行安装。

2. 启动 Vue Designer

安装完成后，您可以通过以下步骤启动 Vue Designer：

• 打开命令面板（按 Ctrl+Shift+P）。
• 输入 Open Vue Designer 并选择该命令。
• 此时，您将看到当前打开的 .vue 文件的预览面板。

项目的使用说明

1. 预览组件

Vue Designer 允许您实时预览 .vue 文件中的组件。只需打开一个 .vue 文件，然后通过命令面板启动 Vue Designer，即可在预览面板中看到组件的实时渲染效果。

2. 设置共享样式

您可以通过配置 vueDesigner.sharedStyles 来加载全局 CSS 文件。例如，如果您有一个 reset.css 文件，可以在 settings.json 中添加如下配置：

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

请注意，目前不支持在加载的 CSS 文件中使用 @import 语句，您需要手动指定所有依赖的 CSS 文件。

3. 支持的预处理器

Vue Designer 目前支持以下预处理器：

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

其他语言可能无法在 Vue Designer 中正常工作。

项目API使用文档

1. 服务器与客户端通信

Vue Designer 分为服务器和客户端两个模块。服务器负责解析和分析组件代码，并处理客户端请求；客户端负责渲染组件预览并处理用户交互。服务器和客户端通过 WebSocket 进行通信，以同步组件数据。

2. 服务器代码

服务器代码使用 TypeScript 编写，并编译为 CommonJS 格式。

3. 客户端代码

客户端代码同样使用 TypeScript 编写，并通过 Vite 进行打包。客户端代码应放置在 src/view 目录下。

4. 代码格式化

所有代码应使用 Prettier 进行格式化。

5. 类型定义

对于外部包的类型定义，如果官方未提供，应放置在 types/(package name) 目录下。

项目安装方式

1. 开发环境设置

如果您想在开发环境中调试 Vue Designer，请按照以下步骤操作：

• 运行 yarn watch 启动开发服务器。
• 打开 Visual Studio Code 并显示左侧的调试面板。
• 运行 Launch Extension，这将打开一个新窗口并启用本地的 Vue Designer。
• 在命令面板中选择 Open Vue Designer。

如果您需要使用客户端代码的开发者工具，可以在命令面板中使用 Developer: Toggle Developer Tools 命令。

2. 常用命令

以下是一些常用的命令：

• yarn build：构建源代码。
• yarn watch：构建并监视源代码。
• yarn test：运行测试。
• yarn format：使用 Prettier 格式化源代码。

3. 发布流程

发布新版本时，请按照以下步骤操作：

• 运行 npm version XXX 更新版本并生成变更日志。
• 如果需要，编辑 CHANGELOG.md 文件。
• 运行 git add CHANGELOG.md 和 git commit -m "docs: changelog vXXX" 提交变更日志。
• 最后，运行 vsce publish 发布扩展。

vue-designer Vue component design tool 项目地址: https://gitcode.com/gh_mirrors/vu/vue-designer