From 0ca3ab5cfdd9367ebdac2a29adec3c4785f60a89 Mon Sep 17 00:00:00 2001 From: webfansplz <308241863@qq.com> Date: Tue, 23 May 2023 19:42:17 +0800 Subject: [PATCH] feat: add `vue-devtools` plugin (#499) --- README.md | 2 +- README.zh-CN.md | 2 +- package.json | 2 +- pnpm-lock.yaml | 46 +++++++++++++++++++++++++++++++++++++++++++--- vite.config.ts | 10 ++++------ 5 files changed, 50 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 8b39209..acfd1c4 100644 --- a/README.md +++ b/README.md @@ -94,8 +94,8 @@ Mocking up web app with Vitesse(speed)
- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs - [`vite-ssg-sitemap`](https://github.com/jbaubree/vite-ssg-sitemap) - Sitemap generator - [`@vueuse/head`](https://github.com/vueuse/head) - manipulate document head reactively -- [`vite-plugin-vue-inspector`](https://github.com/webfansplz/vite-plugin-vue-inspector) - jump to local IDE source code while click the element of browser automatically - [`vite-plugin-webfont-dl`](https://github.com/feat-agency/vite-plugin-webfont-dl) - Zero-config webfont (Google Fonts) downloader and injector to improve website's performance. +- [`vite-plugin-vue-devtools`](https://github.com/webfansplz/vite-plugin-vue-devtools) - Designed to enhance the Vue developer experience. ### Coding Style diff --git a/README.zh-CN.md b/README.zh-CN.md index 25c7d7a..c5253f7 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -87,7 +87,7 @@ - [VueUse](https://github.com/antfu/vueuse) - 实用的 Composition API 工具合集 - [`vite-ssg-sitemap`](https://github.com/jbaubree/vite-ssg-sitemap) - 站点地图生成器 - [`@vueuse/head`](https://github.com/vueuse/head) - 响应式地操作文档头信息 -- [`vite-plugin-vue-inspector`](https://github.com/webfansplz/vite-plugin-vue-inspector) - 点击页面元素自动跳转到本地IDE对应的 Vue 组件 +- [`vite-plugin-vue-devtools`](https://github.com/webfansplz/vite-plugin-vue-devtools) - 旨在增强Vue开发者体验的Vite插件 ### 编码风格 diff --git a/package.json b/package.json index a7ac65c..2af647f 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "vite-plugin-pages": "^0.29.0", "vite-plugin-pwa": "^0.14.7", "vite-plugin-vue-component-preview": "^1.1.6", - "vite-plugin-vue-inspector": "^3.4.2", + "vite-plugin-vue-devtools": "^0.0.16", "vite-plugin-vue-layouts": "^0.8.0", "vite-plugin-vue-markdown": "^0.23.4", "vite-plugin-webfont-dl": "^3.7.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cd9817f..c8632a0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -132,9 +132,9 @@ devDependencies: vite-plugin-vue-component-preview: specifier: ^1.1.6 version: 1.1.6(rollup@2.79.1)(vite@4.3.5)(vue@3.3.2) - vite-plugin-vue-inspector: - specifier: ^3.4.2 - version: 3.4.2(vite@4.3.5) + vite-plugin-vue-devtools: + specifier: ^0.0.16 + version: 0.0.16(rollup@2.79.1)(vite@4.3.5)(vue@3.3.2) vite-plugin-vue-layouts: specifier: ^0.8.0 version: 0.8.0(vite@4.3.5)(vue-router@4.2.0)(vue@3.3.2) @@ -7510,6 +7510,12 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + /nanoid@4.0.2: + resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==} + engines: {node: ^14 || ^16 || >=18} + hasBin: true + dev: true + /natural-compare-lite@1.4.0: resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==} dev: true @@ -8848,6 +8854,10 @@ packages: - supports-color dev: true + /splitpanes@3.1.5: + resolution: {integrity: sha512-r3Mq2ITFQ5a2VXLOy4/Sb2Ptp7OfEO8YIbhVJqJXoFc9hc5nTXXkCvtVDjIGbvC0vdE7tse+xTM9BMjsszP6bw==} + dev: true + /sprintf-js@1.0.3: resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} dev: true @@ -9736,6 +9746,14 @@ packages: - rollup dev: true + /vite-hot-client@0.2.1(vite@4.3.5): + resolution: {integrity: sha512-UqsQdw5PODnSrTDT85nr09RlhV0gkm2Xat74U2l8JZ5R8M/wTCggWSyPjxbLk5fbbVnWfr0JwW+vVoosjQnYrA==} + peerDependencies: + vite: ^2.6.0 || ^3.0.0 || ^4.0.0 + dependencies: + vite: 4.3.5(@types/node@18.6.1) + dev: true + /vite-node@0.31.0(@types/node@18.6.1): resolution: {integrity: sha512-8x1x1LNuPvE2vIvkSB7c1mApX5oqlgsxzHQesYF7l5n1gKrEmrClIiZuOFbFDQcjLsmcWSwwmrWrcGWm9Fxc/g==} engines: {node: '>=v14.18.0'} @@ -9831,6 +9849,28 @@ packages: - vite dev: true + /vite-plugin-vue-devtools@0.0.16(rollup@2.79.1)(vite@4.3.5)(vue@3.3.2): + resolution: {integrity: sha512-qgyfSlv4XBpfmTbiIfcofvIK5s9ObPSek6HWUzk1CJeLnUiA5fR91Cc54GxeirPA2odpir197GPgdB7VszI+eQ==} + engines: {node: '>=14'} + peerDependencies: + vite: ^3.0.0-0 || ^4.0.0-0 + dependencies: + '@vueuse/core': 10.1.2(vue@3.3.2) + nanoid: 4.0.2 + sirv: 2.0.3 + splitpanes: 3.1.5 + vite: 4.3.5(@types/node@18.6.1) + vite-hot-client: 0.2.1(vite@4.3.5) + vite-plugin-inspect: 0.7.26(rollup@2.79.1)(vite@4.3.5) + vite-plugin-vue-inspector: 3.4.2(vite@4.3.5) + vue-router: 4.2.0(vue@3.3.2) + transitivePeerDependencies: + - '@vue/composition-api' + - rollup + - supports-color + - vue + dev: true + /vite-plugin-vue-inspector@3.4.2(vite@4.3.5): resolution: {integrity: sha512-q5OTkcZJqL78bwGJl1Zk8CNqtxZ9wP2udJYqyFIZzL1lTax0/oq7DhNkLrnPTxkJuf0QPZKdunb1vDyCByn4dQ==} peerDependencies: diff --git a/vite.config.ts b/vite.config.ts index 5482e45..ee6ec1a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -10,7 +10,7 @@ import Markdown from 'vite-plugin-vue-markdown' import { VitePWA } from 'vite-plugin-pwa' import VueI18n from '@intlify/unplugin-vue-i18n/vite' import Inspect from 'vite-plugin-inspect' -import Inspector from 'vite-plugin-vue-inspector' +import VueDevTools from 'vite-plugin-vue-devtools' import LinkAttributes from 'markdown-it-link-attributes' import Unocss from 'unocss/vite' import Shiki from 'markdown-it-shiki' @@ -137,13 +137,11 @@ export default defineConfig({ // Visit http://localhost:3333/__inspect/ to see the inspector Inspect(), - // https://github.com/webfansplz/vite-plugin-vue-inspector - Inspector({ - toggleButtonVisibility: 'never', - }), - // https://github.com/feat-agency/vite-plugin-webfont-dl WebfontDownload(), + + // https://github.com/webfansplz/vite-plugin-vue-devtools + VueDevTools(), ], // https://github.com/vitest-dev/vitest