Skip to content

创建首个 Nuxt3 应用

接下来我们通过官方推荐的方式来创建首个 Nuxt3 应用。

安装使用

前置准备

  • 版本号高于 v16.10.0Node.js
  • 安装好 VolarVisual Studio CodeVolar 开启了 Take Over Mode

初始化

打开一个终端,使用 nuxi 来创建一个新的项目:

sh
pnpm dlx nuxi init nuxt-app

接着通过 Visual Studio Code 打开该文件夹:

sh
code nuxt-app

安装项目依赖:

sh
pnpm install

由于我们打开了 Take Over Mode,我们需要关闭自动生成 Vueshim。在项目根目录下的 nuxt.config.ts 编辑项目配置:

ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  typescript: {
    shim: false,
  },
})

启动项目

通过开发模式启动 Nuxt

sh
pnpm dev

根据提示打开相应的网页,如果看到了正常的网页显示,那么项目的初始化已经完成。

最小应用

接下来我们来创建一个最小应用来初尝 Nuxt。上文提到过,Nuxt 基于文件目录来管理路由。接下来我们基于该路由系统创建几个简单的页面。

项目中默认有一个 app.vue,这个是应用的全局入口。我们将其中的内容清空,添加 Nuxt 的路由出口:

vue
<template>
  <NuxtPage />
</template>

在根目录下创建 pages/index.vue 文件,添加如下内容:

vue
<template>
  <div> Index Page </div>
</template>

刷新一下页面,可以看到已经生效。如果没有生效,可以尝试重启开发服务器:

接下来创建另一个页面 details.vue

vue
<template>
  <div> Details Page </div>
</template>

我们通过 NuxtLink 这个组件来实现路由跳转,该组件的语法类似于 RouterLink。在 index.vue 里添加一个 NuxtLink

vue
<template>
  <div> Index Page </div>

  <NuxtLink to="/details">To Details</NuxtLink>
</template>

点击该链接,现在就可以自由跳转了。

打包和预览

当项目开发完毕,我们需要将项目打包或者提供预览服务。

执行打包项目命令:

sh
pnpm build

Nuxt 会在根目录下创建 .output 目录,这是打包后的结果。

启动预览服务:

sh
pnpm preview

根据提示打开相应的网页测试结果。

Released under the MIT License.