紅魔電競平板評測：大屏幕硬實力
前言：三年的疫情因為要上網課的原因激活了平板市場，如今網課的時代已經過去，大家的生活都恢復到了正軌，這也就意味著，真正考驗平板電腦生存的環境來了。也就是面對著這種殘酷的
近日，Vue 新一代開發者工具（DevTools）正式開源！Vue DevTools 是一個旨在增強 Vue 開發人員體驗的工具，它提供了一些功能來幫助開發者更好地了解 Vue 應用。下面就來看看新一代 Vue DevTools 的功能和使用方法！
圖片
首先來看看 Vue DevTools 中都有哪些功能！
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
在 Vue 項目中使用 Vue DevTools 的方法有多種：
圖片
下面來看看如何通過 Vite 插件和獨立應用來使用 Vue DevTools。
注意：
第一種運行 Vue DevTools 的方法就是 Vite 插件。如果項目使用 Vite，強烈建議將其作為運行 DevTools 的首選項，因為它提供了更強大的功能。
注意：Vue DevTools 需要 Vite v3.1 或更高版本。
首先，通過以下命令來安裝 Vue DevTools：
npm add -D vite-plugin-vue-devtools用法：
import { defineConfig } from 'vite'import VueDevTools from 'vite-plugin-vue-devtools'export default defineConfig({ plugins: [ VueDevTools(), ],})配置項：
interface VitePluginVueDevToolsOptions { /** * append an import to the module id ending with `appendTo` instead of adding a script into body * useful for projects that do not use html file as an entry * * WARNING: only set this if you know exactly what it does. * @default '' */ appendTo?: string | RegExp /** * Customize openInEditor host (e.g. http://localhost:3000) * @default false */ openInEditorHost?: string | false /** * DevTools client host (e.g. http://localhost:3000) * useful for projects that use a reverse proxy * @default false */ clientHost?: string | false}配置項如下：
如果使用不受支持的瀏覽器，或者有其他特定需求（例如應用位于 Electron 中），可以使用獨立應用。
圖片
首先， 通過以下命令來全局安裝 DevTools（可以全局安裝，也可以作為項目依賴項安裝，這里以全局安裝為例）：
npm add -g @vue/devtools安裝完成之后，在終端中運行以下命令：
vue-devtools然后將以下代碼添加到應用 HTML 文件的<head>部分：
<script src="http://localhost:8098"></script>或者，如果想遠程調試設備：
<script> window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098</script><script src="http://<your-local-ip>:8098"></script>可以在官方文檔查看詳情：https://devtools-next.vuejs.org/guide/standalone
本文鏈接：http://www.tebozhan.com/showinfo-26-55118-0.htmlVue 新一代開發者工具正式開源！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
下一篇： Go語言的常用基礎
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號