262 - 《Nuxt Devtool 和 Umi UI》

1、前几天看到 Nuxt Devtool 就想起了被我们废弃的 Umi UI，截图如下，第一眼还是挺惊艳的。简单试用了下，发现功能上比较纯粹简单，至少相比之前的 Umi UI 更简单一些，只有读和展示，没有比如修改配置、修改代码之类的写功能。

2、由于 Nuxt 脚手架是通过 git clone 的方式做项目初始化，国内用户可能会遇到墙的问题。如果要尝鲜，可尝试以下三种方法。

1）命令行配代理，然后用官方脚手架创建的命令。（我试过没成功）

2）clone nuxt/starter 然后开启 devtools。

git clone git@github.com:nuxt/starter.git
cd starter
git checkout v3
pnpm i
pnpx nuxi@latest devtools enable
pnpm dev

3）clone nuxt/devtools 然后 npm run dev。

git clone git@github.com:nuxt/devtools.git
cd devtools
pnpm i
pnpm dev

3、基本原理是这样。1）提供两个路由，entry 和 client，entry 做 socket 连接用，client 提供 devtools 的客户端代码，2）添加 runtime/plugins/devtools.client 为 client plugin，随项目代码一起打包运行，3）devtools.client 点击后会通过 iframe 的方式加载 /client 路由，4）/client 路由会和 /entry 建立 socket 连接，继而做后续的数据拉取和展示。

为啥通过 iframe 挂载 /client，而不是让 /client 随着项目一起打包运行？我觉得是这样可以让 /client 对应用的影响控制在最小。

4、插件机制。Nuxt Devtools 提供了一套插