JakeXu / vscode-webview-extension-example

Vscode 的 extension webview 开发示例,提供 Vue 和 React 实现,文档详细,举例丰富

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

简介

Vscode 的 extension webview 开发示例,提供 Vue 和 React 实现,文档详细,举例丰富

该项目已发布为 vscode 插件,可搜索 vscode-webview-extension-example 获取

运行

git clone git@github.com:liutaigang/vscode-webview-extension-example.git

使用 vscode 打开项目,运行:

(如果没有安装 pnpm)

npm i pnpm -g
pnpm install
pnpm dev

脚本执行完成后:

  • 按 F5 开启调试
  • 调试窗口打开后,点击 activitybar 上的图标:
  • 键入 ctrl+shift+p 在指令输入框中输入:panel-view-container.show

特点

  • 完整示例:提供 Vue 和 React 的完整示例
  • 解决方案:资源路径、通讯、架构等问题的解决方案一应俱全
  • 拿来即用:可运行、架构完善、易扩展、生产级的示例项目
  • 文档详细:记录每一个踩过的坑

详细文档

手把手教你创建这个示例:https://github.com/liutaigang/vscode-webview-extension-example/blob/main/documents/detail.md

About

Vscode 的 extension webview 开发示例,提供 Vue 和 React 实现,文档详细,举例丰富

License:MIT License


Languages

Language:TypeScript 54.1%Language:Vue 32.0%Language:CSS 9.2%Language:JavaScript 2.9%Language:HTML 1.8%