开启Vue3的同构SSR渲染----入门nuxt.js

255 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天,点击查看活动详情

引言

前面文章我介绍了CSR,SSR和SRG的渲染模式。三种渲染模式可以参考我的都2023年了,还在用传统的前后端分离?来学习一下CSR,SSR与SRG吧!!! - 掘金 (juejin.cn)

今天先带来的是Vue的同构SSR的渲染答案-----nuxt.js

nuxt的初始化

在初始化nuxt项目之前,我曾想,不就是创建个项目吗?简单,直接终端开搞。然后就报错了,第一时间我以为我可能没开代理,果断科学上网,但是还是无法成功初始化nuxt项目。

纳尼?

上网百度了一番之后,终于在咱们掘金上找到了一个特别靠谱的解决方案。

文章如下:大佬解决

试了一下,确实成功初始化了nuxt项目。

简单的说,我们只需要打开我们的host文件,文件地址如下:C盘 ->  Windows -> System32 -> drives -> etc -> hosts文件。

然后在最后一行加入185.199.108.133 raw.githubusercontent.com

在配置好hosts之后,我们开始初始化我们的nuxt项目。

我们可以采取官网的方式

npx nuxi init nuxt-app

初始化模板项目。

也可以使用脚手架create-nuxt-app来创建

npx create-nuxt-app <项目名>

image.png

等待完成后,我们运行cd到项目目录,运行yarn dev启动项目。

image.png

这是什么情况,怎么这么漫长,看看控制台。

image.png

哎怎么报错了?

查一下,原来是版本的问题,我们可以选择降低node版本。

image.png

yarn dev一下试试

1675352237124.png

成功!!!!

可以参考我得配置。