返回

Nuxt3 入门指南：安装和用法

前端

Nuxt3 简介

Nuxt3 是一个功能强大的 JavaScript 框架，可用于构建各种类型的 Web 应用程序。它基于 Vue.js，并提供了许多开箱即用的功能，包括路由、组件、插件和文件结构。Nuxt3 还支持服务端渲染 (SSR) 和静态网站生成 (SSG)，这可以提高应用程序的性能和安全性。

安装 Nuxt3

要安装 Nuxt3，请运行以下命令：

npm install -g @nuxt/cli

安装完成后，你就可以使用 npx nuxt 命令创建新的 Nuxt3 项目了。

npx nuxt create my-nuxt-project

Nuxt3 文件结构

Nuxt3 项目的文件结构如下：

my-nuxt-project
├── node_modules
├── package.json
├── package-lock.json
├── nuxt.config.js
├── src
│   ├── assets
│   ├── components
│   ├── layouts
│   ├── pages
│   ├── plugins
│   ├── router
│   ├── store
│   └── views
├── static
└── .gitignore
  • node_modules 目录包含项目所需的依赖项。
  • package.json 文件包含项目的元数据和依赖项。
  • package-lock.json 文件包含项目的依赖项的具体版本。
  • nuxt.config.js 文件是 Nuxt3 的配置文件，用于配置项目的各种设置。
  • src 目录包含项目的源代码。
  • static 目录包含项目的静态文件，如图像、CSS 文件和 JavaScript 文件。
  • .gitignore 文件指定了哪些文件应该被 Git 忽略。

创建第一个 Nuxt3 页面

要创建一个新的 Nuxt3 页面，请在 src/pages 目录中创建一个新的 .vue 文件。例如，你可以创建一个名为 Home.vue 的文件，并输入以下内容：

<template>
  <div>
    <h1>Home</h1>
    <p>This is the home page.</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>

<style>
</style>

然后，你可以在 src/router/index.js 文件中添加以下路由：

export default [
  {
    path: '/',
    component: 'Home'
  }
]

现在，你就可以在浏览器中打开 http://localhost:3000 来查看你的 Nuxt3 项目了。

总结

本指南向你介绍了如何安装和使用 Nuxt3。你已经创建了一个基本的 Nuxt3 项目，并添加了第一个页面。现在，你就可以开始使用 Nuxt3 来构建自己的 Web 应用程序了。