《Nuxt.js 实战：从放弃到入门》一、项目初始，图片尺寸缩放

环境准备

在开始之前，确保你的开发环境已经安装了以下工具：

• Node.js：建议安装最新的 LTS 版本，可以从 Node.js 官网 下载安装。
• npm 或 yarn：npm 会随着 Node.js 一起安装，yarn 可以通过 npm install -g yarn​ 进行全局安装。

同时，为了方便管理 Node.js 版本，推荐安装 nvm​（Node Version Manager），安装命令如下：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

安装完成后，重新打开终端或者执行 source ~/.nvm/nvm.sh​ 使其生效。

‍

创建 Nuxt.js 项目

环境搭建好后，就可以开始创建 Nuxt.js 项目啦。打开终端，依次执行下面这些命令：

mkdir outeasy
cd outeasy
npx nuxi@latest init
npm install

这些命令分别是什么意思呢？

• mkdir outeasy：创建一个名为outeasy的文件夹，用来存放我们的项目文件。
• cd outeasy：进入刚刚创建的outeasy文件夹，后续的操作都在这个目录下进行。
• npx nuxi@latest init：使用 npx 工具调用 nuxi ，把当前目录初始化为一个 Nuxt.js 项目。npx是 npm 5.2.0 引入的一个工具，它能直接运行依赖包，不用提前全局安装。
• npm install：安装项目所需要的各种依赖包。这些依赖包是项目运行必不可少的，比如 Nuxt.js 的核心模块、各种插件等。

项目初始结构与页面

项目创建好后，会有一些初始文件。

​​

比如app.vue文件，它的初始代码如下：

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

执行npm run dev​启动服务，就能在浏览器里看到默认页面了。

​​

这个默认页面是 Nuxt.js 帮我们生成的，展示了一些基本信息。

​​

添加图片处理页面

现在，我们要给项目添加一个新页面，这个页面能上传图片、调整图片大小，还能提供下载。

首先，创建pages目录，并在里面创建resize.vue文件。pages目录在 Nuxt.js 里很重要，Nuxt.js 会根据这个目录下的文件自动生成路由。

​​

​resize.vue​的内容如下：

<template>
  <div class="container mx-auto p-4 max-w-2xl">
    <h1 class="text-2xl font-bold mb-6">图片尺寸调整</h1>
  
    <!-- 图片上传区域 -->
    <div
      class="border-2 border-dashed border-gray-300 rounded-lg p-8 mb-6 text-center"
      @drop.prevent="handleDrop"
      @dragover.prevent
      @dragenter.prevent
    >
      <input
        type="file"
        ref="fileInput"
        @change="handleFileSelect"
        accept="image/*"
        class="hidden"
      />
      <div v-if="isLoading" class="text-center py-8">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-blue-500 border-t-transparent"></div>
        <p class="mt-2 text-gray-600">正在处理图片...</p>
      </div>