nuxt的学习

最新推荐文章于 2025-08-05 22:17:37 发布

原创最新推荐文章于 2025-08-05 22:17:37 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端框架 #javascript

本文介绍了Nuxt.js的基本使用，包括先决条件（如最新LTS版本的Node.js，Vetur或WebStorm编辑器，VS Code或WebStorm终端），项目构建和启动过程，以及与Vue CLI的对比。Nuxt.js根据pages目录自动生成路由，其入口页面为layouts/default.vue，提供了内置的webpack配置，并支持asyncData方法在服务端预渲染数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nuxt的学习

基本使用

先决条件

节点-我们建议您安装最新的 LTS 版本。
文本编辑器，我们推荐带有Vetur扩展或WebStorm的 VS Code。
终端，我们推荐使用 VS Code 的集成终端或WebStorm 终端。

构建、启动项目

确保安装了yarn、npx、npm

yarn
yarn create nuxt-app <project-name>
npx
npx create-nuxt-app <project-name>
npm
npx create-nuxt-app <project-name>

yarn 安装后示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-chuaLR6E-1648195408081)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220325155337834.png)]

它会问你一些问题（名称、Nuxt 选项、UI 框架、TypeScript、linter、测试框架等）。要了解有关所有选项的更多信息，请参阅官网

回答完所有问题后，它将安装所有依赖项。下一步是导航到项目文件夹并启动它(俩种启动方式，根据自己需要)

cd <project-name>
yarn dev

cd <project-name>
npm run dev

和vue-cli对比

路由配置不同 nuxt按照 pages 文件夹的目录结构自动生成路由，vue-cli需在 src/router/index.js 手动配置路由
入口页面不同 nuxt页面入口为 layouts/default.vue vue页面入口为 src/App.vue
nuxt 类似 router-view , nuxt-link 类似 router-link
webpack配置差别 nuxt内置webpack，允许根据服务端需求，在 nuxt.config.js 中的build属性自定义构建webpack的配置，覆盖默认配置 vue关于webpack的配置存放在build文件夹下，需要自己配置。
asyncData 里面发送ajax 这个东西跟生命周期这些都是平级的
要理解asyncData方法执行时，就是理解数据在服务端已经渲染好了，是在服务端完成的。