NUXT 使用指南

520 阅读3分钟

NUXT 使用指南

下载 命令 (这里 使用 bun 作为 包管理器 进行安装)

npx bun x nuxi@latest init guac-nuxt@3

服了,一开始的 时候就踩坑了,真无语

在 初始化的时候,终端 直接 报网络 fetch 错误,一开始以为是开了 代理的问题,但是在 关闭了代理后,初始化依旧报错

2024-10-28-22-26-47-{CCDEF526-964F-4BAA-9752-6319A9C27931}.png

这里的 url 点击 是 可以访问的,说明 本地的网络应该是没有问题的

在网上查找了 一些资料,感觉 可能 是DNS 解析 出问题了,需要去修改 windows的 hosts 文件。这会不会太麻烦了。

所以我还是选择 直接把 压缩包下下来吧

这是 压缩包 解压后的内容

2024-10-30-23-42-22-image.png)

我之前 是初始化 过Nuxt 项目的,所以着这个文件的 目录结构和内容 是完全正确的,只是缺少了 包管理器而已。

所以 是不是其初始化的底层就是 去拿到这个 tar 包,然后 解压到 当前的cmd 路径,使用 对应的包管理器 进行初始化。

使用 bun 管理器 进行项目的初始化

这里我本地 是 没有 安装 bun的,我一般都是 使用 pnpm,因为之前经常 看到 bun,就想着用一下,哈哈

npx bun install

安装 完后,就可以 启动项目了!!!

看一下 bun 官方的说法

bun CLI 包含一个与 Node.js 兼容的包管理器,旨在以极快的速度替代 npmyarn 和 pnpm。它是一个独立的工具,可以在预先存在的 Node.js 项目中工作;如果您的项目有 package.json,Bun Install 可以帮助您加快工作流程。

⚡️ 速度提高 25 倍 — 在任何 Node.js 项目中从 npm install 切换到 bun install,使您的安装速度提高 25 倍。

太 有说法了,下载速度 直接提高 25

这里看到 一个好玩的,将做 试运行 (Dry run), 什么玩意?看名字,好像 是 不用安装 包就可以运行,这样看 还不错呢,可以玩一下

喵的,草率了,我以为是 不用 在本地安装 包,就能 跑起来呢,结果就相当于是 检查一下 这次的安装 是否可以成功?失望了

这是 GPT 的回答 (bun 官方太不严谨了吧)

bun install --dry-run 是一种运行 bun install 的模拟模式。在使用 --dry-run 参数时,Bun 不会真正安装依赖,而是只模拟安装过程,展示将会执行的操作。这可以帮助你在实际执行安装前检查依赖更新、版本冲突等内容。

到目前为止我们的Nuxt 就可以正常启动访问了。

App.vue

这是初始化 App.vue的内容

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtWelcome />
  </div>
</template>

这里一开始的时候 真的挺好奇的,因为我想看看 Nuxt 的这两个默认的组件在那个地方。一般这种 都是在什么 components 或者是 pages 里面的,结果 根本找不到

感觉 Nuxt 的项目一开始的贼干净,这一点还是不错的,因为不会给我 搞什么 乱七八糟的配置啥的。

但是,哥们 你直接 把这个 欢迎 界面 作为 node_modules 里面的一个 文件(也就是说是Nuxt 默认的组件),这种 强绑定,还是 挺难受的。

在 .nuxt 下面的 components的类型 声明文件里面 可以看到,组件的导入 地址。

2024-10-31-00-12-12-image.png

2024-10-31-00-12-56-image.png

我靠,这么多组件,看来又有的学了。。

感觉这种有点像 umi 那个 启动的时候,非要来个 广告一样,确实有的时候 挺难受的。

这里还是去看看 welcome 组件(毕竟就是喜欢看)

2024-10-31-00-20-10-image.png

2024-10-31-00-20-23-image.png 感觉这个 useHead 的 script 有点eval的感觉了(初学nuxt,不是很懂)

ok,现在我们的Nuxt 项目应该就差不多搞好了。