functionVitePluginInspector():Plugin{return{name:"vite-plugin-vue-inspector",// 应用顺序enforce:"pre",// 应用模式 (只在开发模式应用)apply:"serve",// 含义: 转换钩子,接收每个传入请求模块的内容和文件路径// 应用: 在这个钩子对SFC模版进行解析并注入自定义属性transform(code,id){},// 含义: 配置开...
Inspect:Inspect 与 vite-plugin-inspect 集成,可以检查 Vite 的转换步骤。 Inspector:Inspector 与 vite-plugin-vue-inspector 集成,可以检查应用的 DOM 树,并查看渲染它的组件,这样可以更轻松地找到需要进行更改的位置。 独立窗口:Vue DevTools 可以作为一个独立的窗口运行,当你想在小屏幕上调试应用时,它非常有帮助。
inspector({ /** * Toggle button visibility / 切换按钮隐藏展示 * @default 'active' */ toggleButtonVisibility?: 'always' | 'active' | 'never' /** * Default enable state * @default false */ enabled?: boolean /** * Define a combo key to toggle inspector * @default 'control-shift' on...
Build Mode To inspect transformation in build mode, you can pass thebuild: trueoption: // vite.config.tsimportInspectfrom'vite-plugin-inspect'exportdefault{plugins:[Inspect({build:true,outputDir:'.vite-inspect'})],} After runningvite build, the inspector client will be generated under.vite-ins...
Inspector 你也可以使用“Inspector”特性来检查DOM树,看看是哪个组件在渲染它。单击以转到特定行的编辑器。使更改更容易,而不需要彻底了解项目结构。(此功能基于vite-plugin-vue-inspector实现) Vue DevTools用法 安装 # vite-plugin-vue-devtoolsnpm install vite-plugin-vue-devtools -D ...
vite-plugin-vue-inspector的功能是点击页面元素,自动打开本地IDE并跳转到对应的Vue组件.类似于Vue DevTools的Open component in editor功能. 用法 vite-plugin-vue-inspector支持Vue2 & Vue3,并且只需要进行简单的配置就可以使用. Vue2 // vite.config.ts ...
inspector", + "version": "1.0.0", + "description": "", + "main": "src/index.ts", + "scripts": { + "lint": "eslint --fix --ext .js,.ts,.vue ." + }, + "repository": { + "type": "git", + "url": "git+https://github.com/webfansplz/vite-vue-inspector.git" +...
version(require('../../package.json').version) // 开始执行解析 cli.parse() 总结 vite在cli部分判断了包括profile,debugger等多类参数,并针对build,server,preview等不同类型提供对应的配置内容。cli本身借助cac的能力,相当简洁清晰。 备注 inspector库:WebKit inspector API的node实现 cac:cli 参数识别工具包...
该插件功能强大,可以展示系统的路由信息、页面信息、组件、静态资源、Pinia 全局状态管理等。点击左侧 Inspector 图标,点击页面元素,会自动在 IDE 中定位到对应组件的位置。 插件使用 1. 安装依赖 pnpmaddvite-plugin-vue-devtools -D 2.引入插件 在vite.config.ts 中引入插件,并在 plugins 中添加该插件: ...
支持点击组件跳转到对应的文件 实际开发中,往往是使用 UI 组件来写业务组件,组件内就没有几个 Html 元素。而 Inspector 目前只支持检查原生 Html 元素,遇到这种情况就无法愉快工作了,为了解决这个问题,需要扩展到组件节点也能被检查到。 Jul 01 '22 18:07 tazyong ...