Nuxt 3 简介 (二)：你好，Nuxt 3

2024-02-22 15:02:41

Nuxt 3 简介

Nuxt 3 是一个基于 Vue 3 的前端框架，用于构建单页应用程序 (SPA)。它提供了丰富的功能和组件，可以帮助开发人员快速构建现代、响应式和交互式的应用程序。Nuxt 3 相比 Nuxt 2 有了许多改进，包括更好的性能、更强大的路由系统和对最新 Web 标准的支持。

初始化 Nuxt 3 项目

要在本地计算机上初始化 Nuxt 3 项目，我们需要执行以下步骤：

安装 Node.js 和 npm：确保你的电脑上已经安装了 Node.js 和 npm。你可以从 Node.js 官网下载安装包。
安装 Nuxt CLI：使用 npm 全局安装 Nuxt CLI。
```
npm install -g @nuxt/cli
```
创建 Nuxt 3 项目：使用 Nuxt CLI 创建一个新的 Nuxt 3 项目。
```
npx nuxi init my-nuxt3-project
```

这将创建一个新的 Nuxt 3 项目文件夹名为 my-nuxt3-project。

项目结构

Nuxt 3 项目的结构如下：

my-nuxt3-project/
  |── .gitignore
  |── node_modules/
  |── package-lock.json
  |── package.json
  |── public/
  |── src/
  |── nuxt.config.js

.gitignore：Git 忽略文件。
node_modules/：Node.js 模块文件夹。
package-lock.json：记录了项目中所有依赖项及其版本。
package.json：项目配置文件。
public/：静态资源文件夹，如图像、CSS 和 JavaScript 文件。
src/：源代码文件夹，包含应用程序的组件、页面和路由。
nuxt.config.js：Nuxt 配置文件，用于自定义 Nuxt 的行为。

添加组件

要向项目中添加组件，我们需要在 src/components/ 目录下创建一个新文件，例如 HelloWorld.vue。组件的内容如下：

<template>
  <div>Hello World!</div>
</template>

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

然后，我们在 src/pages/index.vue 页面中引用组件：

<template>
  <HelloWorld />
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>