手把手撸 Nuxt3

安装

全局安装 pnpm

npm i pnpm -g

安装 Nuxt3

npx nuxi@latest init <project-name>

• 选择包管理工具

> Which package manager would you like to use?
npm
> pnpm
yarn
bun

• 是否初始化 Git 仓库,这里选择了是

> Initialize git repository?
> Yes /   No

• 然后 进入项目中,执行如下命令确保项目依赖已经安装

pnpm install

• 启动项目

pnpm run dev

• 打开浏览器访问 http://localhost:3000

规定安装包

• 因为 npm 安装老是出 bug 所以这里使用 pnpm 安装

统一项目中使用的安装依赖的包管理工具为 pnpm

在项目的根目录中创建 scripts/preinstall.js 文件，在该文件中添加下面的内容

// 如果安装依赖使用的包管理工具不是 pnpm，则在终端控制台中打印警告，然后退出本次执行的命令
if (!/pnpm/.test(process.env.npm_execpath || "")) {
  console.warn(
    `\u001b[33m 本项目中必须使用 pnpm 作为包管理工具 ` +
      `请使用 'npm i -g pnpm' 或 'npm i pnpm' 安装 pnpm \u001b[39m\n`
  );
  process.exit(1);
}

• 然后再 package.json 中添加 preinstall 脚本

  "scripts": {
    "preinstall": "node ./scripts/preinstall.js",
    "build": "nuxt build",
    "dev": "nuxt dev",
  },

注意

当我们使用包管理工具安装依赖时，会触发 preinstall 脚本的执行（npm 提供的生命周期钩子），然后就会执行我们指定的 scripts/preinstall.js 文件，检查当前安装依赖使用的包管理工具是不是 pnpm。

区分服务器端还是客户端

if (import.meta.server) {
  console.log("服务器端");
} else {
  console.log("客户端");
}