vite-plugin-vue-devtools 1.0.0-alpha.1 → 1.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +184 -0
- package/README.zh-CN.md +185 -0
- package/dist/client/assets/{Icon.vue_vue_type_script_setup_true_lang-f867c918.js → Icon.vue_vue_type_script_setup_true_lang-38720372.js} +1 -1
- package/dist/client/assets/{IconButton.vue_vue_type_script_setup_true_lang-74db1ae6.js → IconButton.vue_vue_type_script_setup_true_lang-3d53773c.js} +2 -2
- package/dist/client/assets/{IconTitle.vue_vue_type_script_setup_true_lang-d82eff77.js → IconTitle.vue_vue_type_script_setup_true_lang-968221a7.js} +1 -1
- package/dist/client/assets/{IframeView.vue_vue_type_script_setup_true_lang-778923b2.js → IframeView.vue_vue_type_script_setup_true_lang-1f94d0bf.js} +1 -1
- package/dist/client/assets/{PanelGrids-93648569.js → PanelGrids-e26dc60c.js} +1 -1
- package/dist/client/assets/{SectionBlock-a8928e3c.js → SectionBlock-667aa26c.js} +3 -3
- package/dist/client/assets/{StateFields.vue_vue_type_script_setup_true_lang-019c8d08.js → StateFields.vue_vue_type_script_setup_true_lang-0dc54647.js} +4 -4
- package/dist/client/assets/{Switch.vue_vue_type_script_setup_true_lang-3e126052.js → Switch.vue_vue_type_script_setup_true_lang-cfc899d5.js} +2 -2
- package/dist/client/assets/{TextInput.vue_vue_type_script_setup_true_lang-13bb76a1.js → TextInput.vue_vue_type_script_setup_true_lang-70f3e7d2.js} +2 -2
- package/dist/client/assets/{__eyedropper-44f84f34.js → __eyedropper-f3285f90.js} +3 -3
- package/dist/client/assets/{assets-114c5f0e.js → assets-64b2ffca.js} +16 -20
- package/dist/client/assets/{component-docs-6d7e057c.js → component-docs-1355cb40.js} +4 -4
- package/dist/client/assets/{components-fc711123.js → components-cecf8f86.js} +8 -400
- package/dist/client/assets/data-0c1c61ff.js +396 -0
- package/dist/client/assets/dayjs.min-93c9346c.js +13 -0
- package/dist/client/assets/{documentations-4d7aa8fe.js → documentations-6b999162.js} +2 -2
- package/dist/client/assets/{graph-0860970b.js → graph-0b56328e.js} +81 -46
- package/dist/client/assets/index-5bcfd23e.js +70738 -0
- package/dist/client/assets/{index-95398468.js → index-7ef2f30b.js} +1 -1
- package/dist/client/assets/{index-d3dcbe9e.css → index-b16c49d4.css} +2 -1
- package/dist/client/assets/{inspect-6bd0f86e.js → inspect-ad782456.js} +2 -2
- package/dist/client/assets/{npm-ee43d18c.js → npm-9609cf07.js} +5 -6
- package/dist/client/assets/{overview-8e63c4fa.js → overview-609f4827.js} +4 -4
- package/dist/client/assets/{pages-323386ca.js → pages-2b0994fe.js} +5 -5
- package/dist/client/assets/{pinia-58865e70.js → pinia-924058d4.js} +6 -6
- package/dist/client/assets/rerender-trace-6c5229c1.css +14 -0
- package/dist/client/assets/rerender-trace-7eea1e61.js +369 -0
- package/dist/client/assets/{routes-cd907bae.js → routes-fbe5ad5a.js} +7 -7
- package/dist/client/assets/{settings-b93aee1f.js → settings-b014e3df.js} +6 -7
- package/dist/client/assets/{splitpanes.es-36fe45c8.js → splitpanes.es-5dbf052f.js} +1 -1
- package/dist/client/assets/{timeline-8ce18510.js → timeline-486f65de.js} +8 -18
- package/dist/client/index.html +2 -2
- package/dist/vite.cjs +18 -7
- package/dist/vite.d.ts +10 -0
- package/dist/vite.mjs +19 -8
- package/package.json +2 -2
- package/src/views/composables.ts +2 -3
- package/dist/client/assets/_commonjsHelpers-65004790.js +0 -37
- package/dist/client/assets/index-9f1190d8.js +0 -18422
package/README.md
ADDED
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/bg.png" />
|
|
3
|
+
</p>
|
|
4
|
+
<h1 align="center">
|
|
5
|
+
Vue DevTools <sup>Preview</sup>
|
|
6
|
+
</h1>
|
|
7
|
+
|
|
8
|
+
<p align="center">
|
|
9
|
+
English | <a href="./README.zh-CN.md">简体中文</a>
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
<p align="center">
|
|
13
|
+
<a href="https://www.npmjs.com/package/vite-plugin-vue-devtools" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/v/vite-plugin-vue-devtools" alt="NPM Version" /></a>
|
|
14
|
+
<a href="https://www.npmjs.com/package/vite-plugin-vue-devtools" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/dt/vite-plugin-vue-devtools" alt="NPM Downloads" /></a>
|
|
15
|
+
<a href="https://github.com/webfansplz/vite-plugin-vue-devtools/blob/main/LICENSE" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/github/license/webfansplz/vite-plugin-vue-devtools" alt="License" /></a>
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
<p align="center">
|
|
19
|
+
<a href="https://github.com/webfansplz/vite-plugin-vue-devtools/discussions/1">💡 Ideas & Suggestions</a> |
|
|
20
|
+
<a href="https://github.com/webfansplz/vite-plugin-vue-devtools/discussions/2">🗺️ Project Roadmap</a>
|
|
21
|
+
</p>
|
|
22
|
+
|
|
23
|
+
<p align="center">
|
|
24
|
+
<a href="https://stackblitz.com/edit/vitejs-vite-oxbwzk?file=vite.config.ts&view=preview"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
|
|
25
|
+
</p>
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## 📖 Introduction
|
|
29
|
+
|
|
30
|
+
`vite-plugin-vue-devtools` is a `Vite` plugin designed to enhance the `Vue` developer experience.
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
## 🎉 Features
|
|
35
|
+
|
|
36
|
+
### Pages
|
|
37
|
+
|
|
38
|
+
The pages tab shows your current routes and provide a quick way to navigate to them. For dynamic routes, it also provide a form to fill with each params interactively. You can also use the textbox to play and test how each route is matched.
|
|
39
|
+
|
|
40
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/pages.png" />
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
### Components
|
|
44
|
+
|
|
45
|
+
Components tab show all the components you are using in your app and hierarchy. You can also select them to see the details of the component (e.g. data,props).
|
|
46
|
+
|
|
47
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/components.png" />
|
|
48
|
+
|
|
49
|
+
### Assets
|
|
50
|
+
|
|
51
|
+
Assets tab that shows all your static assets and their information. You can open the asset in the browser or download it.
|
|
52
|
+
|
|
53
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/assets.png" />
|
|
54
|
+
|
|
55
|
+
### Timeline
|
|
56
|
+
|
|
57
|
+
Timeline tab has three categories: Performance, Router Navigations, and Pinia. You can switch between them to see the state changes and timelines.
|
|
58
|
+
|
|
59
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/timeline.png" />
|
|
60
|
+
|
|
61
|
+
### Routes
|
|
62
|
+
|
|
63
|
+
Routes tab is a feature integrated with [Vue Router](https://github.com/vuejs/router), allowing you to view the registered routes and their details.
|
|
64
|
+
|
|
65
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/routes.png" />
|
|
66
|
+
|
|
67
|
+
### Pinia
|
|
68
|
+
|
|
69
|
+
Pinia tab is a feature integrated with [Pinia](https://github.com/vuejs/pinia), allowing you to view the registered modules and their details.
|
|
70
|
+
|
|
71
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/pinia.png" />
|
|
72
|
+
|
|
73
|
+
### Graph
|
|
74
|
+
|
|
75
|
+
Graph tab provides a graph view that show the relationship between components.
|
|
76
|
+
|
|
77
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/graph.png" />
|
|
78
|
+
|
|
79
|
+
### Inspect
|
|
80
|
+
|
|
81
|
+
Inspect expose the [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) integration, allowing you to inspect transformation steps of Vite. It can be helpful to understand how each plugin is transforming your code and spot potential issues.
|
|
82
|
+
|
|
83
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/inspect.png" />
|
|
84
|
+
|
|
85
|
+
### Inspector
|
|
86
|
+
|
|
87
|
+
You can also use the "Inspector" feature to inspect the DOM tree and see which component is rendering it. Click to go to your editor of the specific line. Making it much easier to make changes, without the requirement of understanding the project structure thoroughly. (This feature is implemented based on the [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector))
|
|
88
|
+
|
|
89
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/inspector.png" height=450 />
|
|
90
|
+
|
|
91
|
+
## 📦 Installation
|
|
92
|
+
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
# vite-plugin-vue-devtools
|
|
96
|
+
|
|
97
|
+
pnpm install vite-plugin-vue-devtools -D
|
|
98
|
+
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## 🦄 Usage
|
|
102
|
+
|
|
103
|
+
### Configuration Vite
|
|
104
|
+
|
|
105
|
+
```ts
|
|
106
|
+
import { defineConfig } from 'vite'
|
|
107
|
+
import VueDevTools from 'vite-plugin-vue-devtools'
|
|
108
|
+
|
|
109
|
+
export default defineConfig({
|
|
110
|
+
plugins: [
|
|
111
|
+
VueDevTools(),
|
|
112
|
+
vue(),
|
|
113
|
+
],
|
|
114
|
+
})
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### Options
|
|
118
|
+
|
|
119
|
+
```ts
|
|
120
|
+
interface AnalyzeOptions {
|
|
121
|
+
/**
|
|
122
|
+
* @default true
|
|
123
|
+
*/
|
|
124
|
+
rerenderTrace: boolean
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
interface VitePluginVueDevToolsOptions {
|
|
128
|
+
/**
|
|
129
|
+
* append an import to the module id ending with `appendTo` instead of adding a script into body
|
|
130
|
+
* useful for projects that do not use html file as an entry
|
|
131
|
+
*
|
|
132
|
+
* WARNING: only set this if you know exactly what it does.
|
|
133
|
+
*/
|
|
134
|
+
appendTo?: string | RegExp
|
|
135
|
+
/**
|
|
136
|
+
* Enable Vue DevTools to analyze the codebase by using Babel
|
|
137
|
+
* @default
|
|
138
|
+
* {
|
|
139
|
+
* rerenderTrace: true, // enable rerenderTrace feature
|
|
140
|
+
* }
|
|
141
|
+
*/
|
|
142
|
+
analyze?: Partial<AnalyzeOptions>
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
## 💡 Notice
|
|
147
|
+
|
|
148
|
+
- Only available in `development mode`.
|
|
149
|
+
- Only support `Vue3.0+` .
|
|
150
|
+
- Only supports single-instance `Vue` applications.
|
|
151
|
+
- Doesn't support `SSR` (If you're using `Nuxt`, use [nuxt/devtools](https://github.com/nuxt/devtools) directly).
|
|
152
|
+
- The plugin follows `Vue's DevTools` configuration, so if you have configured the `hide` option, it will also be applied in this plugin. e.g.
|
|
153
|
+
|
|
154
|
+
```js
|
|
155
|
+
// This Vue instance will be ignored by the plugin.
|
|
156
|
+
createApp({
|
|
157
|
+
render: () => h(App),
|
|
158
|
+
devtools: {
|
|
159
|
+
hide: true,
|
|
160
|
+
},
|
|
161
|
+
})
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
## 📖 Blog Post
|
|
165
|
+
|
|
166
|
+
- [Introducing Vue DevTools (Vite Plugin)](https://gist.github.com/webfansplz/bc90a773a0dd474a34e043ab2d2a37a4)
|
|
167
|
+
|
|
168
|
+
## 🌸 Credits
|
|
169
|
+
|
|
170
|
+
- This project is highly inspired by [nuxt/devtools](https://github.com/nuxt/devtools). Kudos to [Anthony Fu](https://github.com/antfu) and `Nuxt` team for the awesome work!
|
|
171
|
+
|
|
172
|
+
- [vuejs/devtools](https://github.com/vuejs/devtools)
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
## 👨💻 Contributors
|
|
176
|
+
|
|
177
|
+
<a href="https://github.com/webfansplz/vite-plugin-vue-devtools/graphs/contributors">
|
|
178
|
+
<img src="https://contrib.rocks/image?repo=webfansplz/vite-plugin-vue-devtools" />
|
|
179
|
+
</a>
|
|
180
|
+
|
|
181
|
+
## 📄 License
|
|
182
|
+
|
|
183
|
+
[MIT LICENSE](./LICENSE)
|
|
184
|
+
|
package/README.zh-CN.md
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/bg.png" />
|
|
3
|
+
</p>
|
|
4
|
+
<h1 align="center">
|
|
5
|
+
Vue DevTools <sup>预览</sup>
|
|
6
|
+
</h1>
|
|
7
|
+
|
|
8
|
+
<p align="center">
|
|
9
|
+
<a href="./README.md">English</a> | 简体中文
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
<p align="center">
|
|
13
|
+
<a href="https://www.npmjs.com/package/vite-plugin-vue-devtools" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/v/vite-plugin-vue-devtools" alt="NPM Version" /></a>
|
|
14
|
+
<a href="https://www.npmjs.com/package/vite-plugin-vue-devtools" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/dt/vite-plugin-vue-devtools" alt="NPM Downloads" /></a>
|
|
15
|
+
<a href="https://github.com/webfansplz/vite-plugin-vue-devtools/blob/main/LICENSE" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/github/license/webfansplz/vite-plugin-vue-devtools" alt="License" /></a>
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
<p align="center">
|
|
19
|
+
<a href="https://github.com/webfansplz/vite-plugin-vue-devtools/discussions/1">💡 想法 & 建议</a> |
|
|
20
|
+
<a href="https://github.com/webfansplz/vite-plugin-vue-devtools/discussions/2">🗺️ 项目路线图</a>
|
|
21
|
+
</p>
|
|
22
|
+
|
|
23
|
+
<p align="center">
|
|
24
|
+
<a href="https://stackblitz.com/edit/vitejs-vite-oxbwzk?file=vite.config.ts&view=preview"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
|
|
25
|
+
</p>
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## 📖 介绍
|
|
29
|
+
|
|
30
|
+
`vite-plugin-vue-devtools` 是一个旨在增强 `Vue` 开发者体验的 `Vite` 插件。
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
## 🎉 特性
|
|
35
|
+
|
|
36
|
+
### Pages
|
|
37
|
+
|
|
38
|
+
`Pages` 选项卡显示您当前的页面路由并提供快速导航的方法。对于动态路由,它还提供了一个表单来交互式地填写每个参数。您还可以使用文本框来测试每个路由的匹配情况。
|
|
39
|
+
|
|
40
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/pages.png" />
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
### Components
|
|
44
|
+
|
|
45
|
+
`Components` 选项卡显示您应用程序的所有组件树,您还可以选择它们来查看组件的详细信息(例如数据、属性)。
|
|
46
|
+
|
|
47
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/components.png" />
|
|
48
|
+
|
|
49
|
+
### Assets
|
|
50
|
+
|
|
51
|
+
`Assets` 选项卡显示所有静态资源及其信息,您可以在浏览器中打开或下载它。
|
|
52
|
+
|
|
53
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/assets.png" />
|
|
54
|
+
|
|
55
|
+
### Timeline
|
|
56
|
+
|
|
57
|
+
`Timeline` 选项卡包含三个类别:性能、路由导航和 Pinia,您可以在它们之间切换以查看状态变化和时间线。
|
|
58
|
+
|
|
59
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/timeline.png" />
|
|
60
|
+
|
|
61
|
+
### Routes
|
|
62
|
+
|
|
63
|
+
`Routes` 选项卡是与 [Vue Router](https://github.com/vuejs/router) 集成的功能,允许您查看注册的路由及其详细信息。
|
|
64
|
+
|
|
65
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/routes.png" />
|
|
66
|
+
|
|
67
|
+
### Pinia
|
|
68
|
+
|
|
69
|
+
`Pinia` 选项卡是与 [Pinia](https://github.com/vuejs/pinia) 集成的功能,允许您查看注册的模块及其详细信息。
|
|
70
|
+
|
|
71
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/pinia.png" />
|
|
72
|
+
|
|
73
|
+
### Graph
|
|
74
|
+
|
|
75
|
+
`Graph` 选项卡提供了显示组件依赖关系的视图。
|
|
76
|
+
|
|
77
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/graph.png" />
|
|
78
|
+
|
|
79
|
+
### Inspect
|
|
80
|
+
|
|
81
|
+
`Inspect` 公开 [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) 集成,允许您检查 Vite 的转换步骤,了解每个插件如何改变您的代码并发现潜在问题可能会有所帮助。
|
|
82
|
+
|
|
83
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/inspect.png" />
|
|
84
|
+
|
|
85
|
+
### Inspector
|
|
86
|
+
|
|
87
|
+
您还可以使用 `Inspector` 功能来检查 `DOM` 树并查看哪个组件正在渲染它,单击可转到特定行的编辑器,使更改变得更加容易,而无需彻底了解项目结构。 (该功能基于 [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector))
|
|
88
|
+
|
|
89
|
+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/inspector.png" height=450 />
|
|
90
|
+
|
|
91
|
+
## 📦 安装
|
|
92
|
+
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
# vite-plugin-vue-devtools
|
|
96
|
+
|
|
97
|
+
pnpm install vite-plugin-vue-devtools -D
|
|
98
|
+
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## 🦄 示例
|
|
102
|
+
|
|
103
|
+
### Vite 配置
|
|
104
|
+
|
|
105
|
+
```ts
|
|
106
|
+
import { defineConfig } from 'vite'
|
|
107
|
+
import VueDevTools from 'vite-plugin-vue-devtools'
|
|
108
|
+
|
|
109
|
+
export default defineConfig({
|
|
110
|
+
plugins: [
|
|
111
|
+
VueDevTools(),
|
|
112
|
+
vue(),
|
|
113
|
+
],
|
|
114
|
+
})
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### 选项
|
|
118
|
+
|
|
119
|
+
```ts
|
|
120
|
+
interface AnalyzeOptions {
|
|
121
|
+
/**
|
|
122
|
+
* @default true
|
|
123
|
+
*/
|
|
124
|
+
rerenderTrace: boolean
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
interface VitePluginVueDevToolsOptions {
|
|
128
|
+
/**
|
|
129
|
+
* append an import to the module id ending with `appendTo` instead of adding a script into body
|
|
130
|
+
* useful for projects that do not use html file as an entry
|
|
131
|
+
*
|
|
132
|
+
* WARNING: only set this if you know exactly what it does.
|
|
133
|
+
*/
|
|
134
|
+
appendTo?: string | RegExp
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* Enable Vue DevTools to analyze the codebase by using Babel
|
|
138
|
+
* @default
|
|
139
|
+
* {
|
|
140
|
+
* rerenderTrace: true, // enable rerenderTrace feature
|
|
141
|
+
* }
|
|
142
|
+
*/
|
|
143
|
+
analyze?: Partial<AnalyzeOptions>
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
## 💡 注意
|
|
148
|
+
|
|
149
|
+
- 仅在 `开发模式` 下可用。
|
|
150
|
+
- 仅支持 `Vue3.0+` 。
|
|
151
|
+
- 仅支持单实例 `Vue` 应用程序。
|
|
152
|
+
- 不支持 `SSR` (如果您使用 `Nuxt` ,请使用 [nuxt/devtools](https://github.com/nuxt/devtools))。
|
|
153
|
+
- 该插件遵循 `Vue` 的 `DevTools` 配置,因此如果您配置了 `hide` 选项,它也将应用于该插件。例如
|
|
154
|
+
|
|
155
|
+
```js
|
|
156
|
+
// This Vue instance will be ignored by the plugin.
|
|
157
|
+
createApp({
|
|
158
|
+
render: () => h(App),
|
|
159
|
+
devtools: {
|
|
160
|
+
hide: true,
|
|
161
|
+
},
|
|
162
|
+
})
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
## 📖 博客
|
|
166
|
+
|
|
167
|
+
- [介绍 Vue DevTools (Vite 插件)](https://gist.github.com/webfansplz/bc90a773a0dd474a34e043ab2d2a37a4)
|
|
168
|
+
|
|
169
|
+
## 🌸 致谢
|
|
170
|
+
|
|
171
|
+
- 该项目深受 [nuxt/devtools](https://github.com/nuxt/devtools) 的启发,感谢 [Anthony Fu](https://github.com/antfu) 和 `Nuxt` 团队的出色工作
|
|
172
|
+
|
|
173
|
+
- [vuejs/devtools](https://github.com/vuejs/devtools)
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
## 👨💻 贡献者
|
|
177
|
+
|
|
178
|
+
<a href="https://github.com/webfansplz/vite-plugin-vue-devtools/graphs/contributors">
|
|
179
|
+
<img src="https://contrib.rocks/image?repo=webfansplz/vite-plugin-vue-devtools" />
|
|
180
|
+
</a>
|
|
181
|
+
|
|
182
|
+
## 📄 License
|
|
183
|
+
|
|
184
|
+
[MIT LICENSE](./LICENSE)
|
|
185
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { v as defineComponent, o as openBlock, e as createElementBlock, q as normalizeClass } from './index-
|
|
1
|
+
import { v as defineComponent, o as openBlock, e as createElementBlock, q as normalizeClass } from './index-5bcfd23e.js';
|
|
2
2
|
|
|
3
3
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
4
4
|
__name: "Icon",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { _ as _sfc_main$1 } from './Icon.vue_vue_type_script_setup_true_lang-
|
|
2
|
-
import { v as defineComponent, o as openBlock, c as createBlock, h as withCtx, u as createVNode, k as mergeProps, j as resolveDynamicComponent } from './index-
|
|
1
|
+
import { _ as _sfc_main$1 } from './Icon.vue_vue_type_script_setup_true_lang-38720372.js';
|
|
2
|
+
import { v as defineComponent, o as openBlock, c as createBlock, h as withCtx, u as createVNode, k as mergeProps, j as resolveDynamicComponent } from './index-5bcfd23e.js';
|
|
3
3
|
|
|
4
4
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
5
5
|
__name: "IconButton",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { v as defineComponent, o as openBlock, e as createElementBlock, q as normalizeClass, g as createCommentVNode, f as renderSlot, x as createBaseVNode, y as toDisplayString } from './index-
|
|
1
|
+
import { v as defineComponent, o as openBlock, e as createElementBlock, q as normalizeClass, g as createCommentVNode, f as renderSlot, x as createBaseVNode, y as toDisplayString } from './index-5bcfd23e.js';
|
|
2
2
|
|
|
3
3
|
const _hoisted_1 = {
|
|
4
4
|
flex: "~ gap-3",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { v as defineComponent,
|
|
1
|
+
import { v as defineComponent, cs as useColorMode, a$ as ref, a1 as computed, aZ as reactive, ct as useElementBounding, aP as onMounted, n as nextTick, bz as watchEffect, aU as onUnmounted, o as openBlock, e as createElementBlock, z as unref, g as createCommentVNode, x as createBaseVNode } from './index-5bcfd23e.js';
|
|
2
2
|
|
|
3
3
|
const _hoisted_1 = {
|
|
4
4
|
key: 0,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { bM as _export_sfc, o as openBlock, e as createElementBlock, f as renderSlot } from './index-5bcfd23e.js';
|
|
2
2
|
|
|
3
3
|
/* unplugin-vue-components disabled */const _sfc_main = {};
|
|
4
4
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { _ as _sfc_main$1 } from './IconTitle.vue_vue_type_script_setup_true_lang-
|
|
2
|
-
import { _ as _sfc_main$2 } from './Icon.vue_vue_type_script_setup_true_lang-
|
|
3
|
-
import { v as defineComponent,
|
|
1
|
+
import { _ as _sfc_main$1 } from './IconTitle.vue_vue_type_script_setup_true_lang-968221a7.js';
|
|
2
|
+
import { _ as _sfc_main$2 } from './Icon.vue_vue_type_script_setup_true_lang-38720372.js';
|
|
3
|
+
import { v as defineComponent, bN as useVModel, b as resolveDirective, o as openBlock, e as createElementBlock, x as createBaseVNode, q as normalizeClass, u as createVNode, h as withCtx, f as renderSlot, g as createCommentVNode, c as createBlock, z as unref, d as withDirectives, F as Fragment, a9 as createTextVNode, y as toDisplayString, p as pushScopeId, a as popScopeId, bM as _export_sfc } from './index-5bcfd23e.js';
|
|
4
4
|
|
|
5
5
|
const _withScopeId = (n) => (pushScopeId("data-v-e966339e"), n = n(), popScopeId(), n);
|
|
6
6
|
const _hoisted_1 = ["open"];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { _ as _sfc_main$3 } from './Icon.vue_vue_type_script_setup_true_lang-
|
|
2
|
-
import { v as defineComponent, o as openBlock, c as createBlock, q as normalizeClass, aC as isRef, bd as toRaw, a1 as computed,
|
|
3
|
-
import { a as isComputed, b as isArray, c as isMap, d as isSet, e as isRegExp, t as toRawType, f as isPlainObject, g as escape } from './index-
|
|
4
|
-
import { _ as _sfc_main$4 } from './IconButton.vue_vue_type_script_setup_true_lang-
|
|
1
|
+
import { _ as _sfc_main$3 } from './Icon.vue_vue_type_script_setup_true_lang-38720372.js';
|
|
2
|
+
import { v as defineComponent, o as openBlock, c as createBlock, q as normalizeClass, aC as isRef, bd as toRaw, a1 as computed, cx as useCopy, r as resolveComponent, e as createElementBlock, i as renderList, z as unref, cy as nanoid, x as createBaseVNode, y as toDisplayString, g as createCommentVNode, F as Fragment, a$ as ref, cz as useNotification, u as createVNode, bG as withModifiers, d as withDirectives, bv as vShow } from './index-5bcfd23e.js';
|
|
3
|
+
import { a as isComputed, b as isArray, c as isMap, d as isSet, e as isRegExp, t as toRawType, f as isPlainObject, g as escape } from './index-7ef2f30b.js';
|
|
4
|
+
import { _ as _sfc_main$4 } from './IconButton.vue_vue_type_script_setup_true_lang-3d53773c.js';
|
|
5
5
|
|
|
6
6
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
7
7
|
__name: "ExpandIcon",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { _ as _sfc_main$2 } from './Icon.vue_vue_type_script_setup_true_lang-
|
|
2
|
-
import { v as defineComponent,
|
|
1
|
+
import { _ as _sfc_main$2 } from './Icon.vue_vue_type_script_setup_true_lang-38720372.js';
|
|
2
|
+
import { v as defineComponent, bN as useVModel, o as openBlock, e as createElementBlock, f as renderSlot, d as withDirectives, bt as vModelSelect, z as unref, x as createBaseVNode, y as toDisplayString, g as createCommentVNode, aC as isRef, c as createBlock, bq as vModelCheckbox, bE as withKeys } from './index-5bcfd23e.js';
|
|
3
3
|
|
|
4
4
|
const _hoisted_1$1 = { class: "n-text-input flex flex items-center border n-border-base rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base" };
|
|
5
5
|
const _hoisted_2$1 = ["disabled"];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { _ as _sfc_main$1 } from './Icon.vue_vue_type_script_setup_true_lang-
|
|
2
|
-
import { v as defineComponent,
|
|
1
|
+
import { _ as _sfc_main$1 } from './Icon.vue_vue_type_script_setup_true_lang-38720372.js';
|
|
2
|
+
import { v as defineComponent, bN as useVModel, o as openBlock, e as createElementBlock, f as renderSlot, d as withDirectives, br as vModelDynamic, z as unref, x as createBaseVNode, k as mergeProps, aC as isRef, c as createBlock, g as createCommentVNode } from './index-5bcfd23e.js';
|
|
3
3
|
|
|
4
4
|
const _hoisted_1 = { class: "n-text-input flex flex items-center border n-border-base rounded py-1 pl-1 pr-2 focus-within:n-focus-base focus-within:border-context n-bg-base" };
|
|
5
5
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { _ as __unplugin_components_0 } from './PanelGrids-
|
|
2
|
-
import { v as defineComponent,
|
|
3
|
-
import { h as checkIsSecurityContext } from './index-
|
|
1
|
+
import { _ as __unplugin_components_0 } from './PanelGrids-e26dc60c.js';
|
|
2
|
+
import { v as defineComponent, cG as useRouter, a$ as ref, a1 as computed, cx as useCopy, ci as useEventListener, aP as onMounted, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, z as unref, e as createElementBlock, l as normalizeStyle, a9 as createTextVNode, y as toDisplayString, c8 as useDevToolsClient, b_ as useFrameState, u as createVNode } from './index-5bcfd23e.js';
|
|
3
|
+
import { h as checkIsSecurityContext } from './index-7ef2f30b.js';
|
|
4
4
|
|
|
5
5
|
const _hoisted_1 = {
|
|
6
6
|
key: 0
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { _ as __unplugin_components_0 } from './PanelGrids-
|
|
2
|
-
import { v as defineComponent, a$ as ref,
|
|
3
|
-
import { _ as _sfc_main$9 } from './IconButton.vue_vue_type_script_setup_true_lang-
|
|
4
|
-
import { _ as __unplugin_components_3 } from './SectionBlock-
|
|
5
|
-
import { _ as _sfc_main$b } from './TextInput.vue_vue_type_script_setup_true_lang-
|
|
6
|
-
import { _ as _sfc_main$c } from './Icon.vue_vue_type_script_setup_true_lang-
|
|
1
|
+
import { _ as __unplugin_components_0 } from './PanelGrids-e26dc60c.js';
|
|
2
|
+
import { v as defineComponent, a$ as ref, cA as useElementSize, cB as onClickOutside, o as openBlock, c as createBlock, h as withCtx, e as createElementBlock, u as createVNode, x as createBaseVNode, f as renderSlot, k as mergeProps, z as unref, g as createCommentVNode, P as Transition, a1 as computed, y as toDisplayString, q as normalizeClass, cC as useStyleTag, l as normalizeStyle, cD as computedAsync, cx as useCopy, cE as useTimeAgo, F as Fragment, a9 as createTextVNode, cf as rpc, c8 as useDevToolsClient, bO as _sfc_main$a, cF as onKeyDown, aC as isRef, i as renderList, _ as __unplugin_components_7 } from './index-5bcfd23e.js';
|
|
3
|
+
import { _ as _sfc_main$9 } from './IconButton.vue_vue_type_script_setup_true_lang-3d53773c.js';
|
|
4
|
+
import { _ as __unplugin_components_3 } from './SectionBlock-667aa26c.js';
|
|
5
|
+
import { _ as _sfc_main$b } from './TextInput.vue_vue_type_script_setup_true_lang-70f3e7d2.js';
|
|
6
|
+
import { _ as _sfc_main$c } from './Icon.vue_vue_type_script_setup_true_lang-38720372.js';
|
|
7
7
|
import { F as Fuse } from './fuse.esm-c317b696.js';
|
|
8
|
-
import './IconTitle.vue_vue_type_script_setup_true_lang-
|
|
8
|
+
import './IconTitle.vue_vue_type_script_setup_true_lang-968221a7.js';
|
|
9
9
|
|
|
10
10
|
const _hoisted_1$7 = {
|
|
11
11
|
relative: "",
|
|
@@ -1077,19 +1077,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
1077
1077
|
setup(__props) {
|
|
1078
1078
|
const props = __props;
|
|
1079
1079
|
const icon = computed(() => {
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
return "i-carbon-document";
|
|
1090
|
-
if (props.asset.type === "json")
|
|
1091
|
-
return "i-carbon-json";
|
|
1092
|
-
return "i-carbon-document-blank";
|
|
1080
|
+
const assets = {
|
|
1081
|
+
image: "i-carbon-image",
|
|
1082
|
+
video: "i-carbon-video",
|
|
1083
|
+
audio: "i-carbon-volume-up",
|
|
1084
|
+
font: "i-carbon-text-small-caps",
|
|
1085
|
+
text: "i-carbon-document",
|
|
1086
|
+
json: "i-carbon-json"
|
|
1087
|
+
};
|
|
1088
|
+
return assets[props.asset.type] ?? "i-carbon-document-blank";
|
|
1093
1089
|
});
|
|
1094
1090
|
return (_ctx, _cache) => {
|
|
1095
1091
|
return openBlock(), createElementBlock("button", _hoisted_1$3, [
|