2023年Q2用戶偏好榜：12+256G版本成新主流
3月份的性能榜、性價比榜和好評榜之后，就要輪到2023年的第二季度偏好榜了，上半年的新機潮已經(jīng)過去，最明顯的肯定就是大內(nèi)存和存儲的機型了，另外部分中端機也取消了屏幕塑料支架
近日，Vue 新一代開發(fā)者工具（DevTools）正式開源！Vue DevTools 是一個旨在增強 Vue 開發(fā)人員體驗的工具，它提供了一些功能來幫助開發(fā)者更好地了解 Vue 應(yīng)用。下面就來看看新一代 Vue DevTools 的功能和使用方法！
圖片
首先來看看 Vue DevTools 中都有哪些功能！
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
在 Vue 項目中使用 Vue DevTools 的方法有多種：
圖片
下面來看看如何通過 Vite 插件和獨立應(yīng)用來使用 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}配置項如下：
如果使用不受支持的瀏覽器，或者有其他特定需求（例如應(yīng)用位于 Electron 中），可以使用獨立應(yīng)用。
圖片
首先， 通過以下命令來全局安裝 DevTools（可以全局安裝，也可以作為項目依賴項安裝，這里以全局安裝為例）：
npm add -g @vue/devtools安裝完成之后，在終端中運行以下命令：
vue-devtools然后將以下代碼添加到應(yīng)用 HTML 文件的<head>部分：
<script src="http://localhost:8098"></script>或者，如果想遠程調(diào)試設(shè)備：
<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-55099-0.htmlVue 新一代開發(fā)者工具正式開源！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號