Nuxt3 初体验大坑实录：吐血指南踩坑干货
2023-10-13 11:00:50
Nuxt3 初体验大坑实录：吐血指南踩坑干货
大家好，我是【你的名字】。今天，我想和大家分享一下我使用 Nuxt3 时踩过的坑，以及如何避免这些坑。希望能给正在使用或准备使用 Nuxt3 的同学一些参考。
1. 基础框架搭建
首先，我们先来了解一下 Nuxt3 的基础框架搭建。Nuxt3 的基础框架搭建非常简单，只需要创建一个新的 Nuxt3 项目，然后安装必要的依赖项即可。我们可以使用以下命令来创建一个新的 Nuxt3 项目：
npx create-nuxt-app my-app
安装完必要的依赖项后，我们就可以启动 Nuxt3 项目了。我们可以使用以下命令来启动 Nuxt3 项目：
npm run dev
启动 Nuxt3 项目后，我们就可以在浏览器中访问我们的项目了。默认情况下，Nuxt3 项目会在端口 3000 上运行。
2. 基本目录介绍
Nuxt3 项目的基本目录结构如下：
my-app
├── node_modules
├── package.json
├── package-lock.json
├── nuxt.config.js
├── .gitignore
├── README.md
├── src
│ ├── assets
│ ├── components
│ ├── layouts
│ ├── middleware
│ ├── pages
│ ├── plugins
│ ├── router
│ ├── store
│ └── utils
└── static
其中，以下几个目录是比较重要的：
src/pages：这是页面目录，存放着我们的页面组件。src/components：这是组件目录，存放着我们的组件。src/store：这是状态管理目录，存放着我们的状态管理代码。src/router：这是路由目录，存放着我们的路由配置。
3. 环境变量设置
在 Nuxt3 中，我们可以通过 .env 文件来设置环境变量。.env 文件是一个隐藏文件，不会被提交到 Git 仓库中。我们可以使用以下命令来创建 .env 文件：
touch .env
在 .env 文件中，我们可以设置各种各样的环境变量。例如，我们可以设置以下环境变量：
# 数据库连接字符串
DB_CONNECTION_STRING=mysql://user:password@host:port/database
# Redis 连接字符串
REDIS_CONNECTION_STRING=redis://host:port
# API 服务器地址
API_SERVER_URL=https://api.example.com
4. 按需引入antd
Nuxt3 中默认集成了 antd。但是，如果我们只想按需引入 antd，我们可以使用以下命令：
npm install --save-dev @ant-design/create-antd-app
安装完成后，我们可以使用以下命令来按需引入 antd：
npx create-antd-app my-app
5. 错误页面介绍
Nuxt3 提供了丰富的错误页面，我们可以通过 .nuxt/error.vue 文件来定制错误页面。在 .nuxt/error.vue 文件中，我们可以自定义错误页面的内容和样式。
6. 状态管理
Nuxt3 集成了 Vuex 状态管理库。我们可以通过 .nuxt/store 目录来管理我们的状态。在 .nuxt/store 目录中，我们可以创建状态管理模块和状态管理操作。
7. 接口内容封装
在 Nuxt3 中，我们可以通过 $fetch 方法来发送 HTTP 请求。$fetch 方法是一个异步方法，它会返回一个 Promise 对象。我们可以通过 await 来等待 $fetch 方法返回结果。
8. 开发过程中遇到的问题
在开发 Nuxt3 项目的过程中，我遇到了一些问题。以下是我遇到的问题以及解决办法：
- 问题：在使用
$fetch方法发送 HTTP 请求时，遇到了 CORS 问题。 - 解决办法：在服务器端设置 CORS 头部。
- 问题：在使用 antd 时，遇到了一些样式问题。
- 解决办法：在 Nuxt3 项目中安装了
@ant-design/css-loader插件。 - 问题：在使用 Vuex 时，遇到了一些状态管理问题。
- 解决办法：在 Nuxt3 项目中安装了
vuex-module-decorators插件。
总结
以上就是我使用 Nuxt3 时踩过的坑，以及如何避免这些坑。我希望这些经验能够帮助正在使用或准备使用 Nuxt3 的同学。
如果您在使用 Nuxt3 时遇到了其他问题，欢迎在评论区留言，我会尽力帮助您解决问题。
