26.Nuxt3框架入门

一、前言

如今最火、最流行的前端框架是vue,但vue只能用于开发前端,这意味着前后端必须得分开开发。

对于稍大点的公司来说,这样做问题并不大,毕竟人手充足,但对于小公司、乃至个人开发者来说,前后端分离开发实际上就是一件吃力不讨好的事情,很浪费人力、精力。

而nuxt这个框架就能很好的解决这个问题,该框架直接集成了前后端,其前端依旧是使用vue框架,后端则使用nodejs生成web服务器。

这样做其性能可能比不上go、rust,但其带来的时间成本缩减效益却是绝对的显而易见,因为这意味着我们可以用同一套代码完成前后端开发、同一套环境进行测试以及发布上线,这是一个非常好的体验。

而且根据我的经验来看,对于小公司、个人开发者来说,千万不要过于看重性能,因为你前期很长一段时间内可能都不会有什么流量,这时候你去耗费时间研究搞所谓的高并发、追求极致的性能,绝对是一件吃力不讨好的事情!

二、nuxt框架搭建

目前网上我并没有找到一套足以带领新手从零入门nuxt框架的教程,尤其是最新版本nuxt3,因此大多数时候,我们最好的参考教程其实就是其官网:Nuxt: The Intuitive Vue Framework · Nuxt

但对于新手来说,直接看其官网入门还是有点难度的,所以本文将结合其官网的教程,带领大家过一遍nuxt框架的运行逻辑、以及如何使用它进行前后端网站开发。

首先我们需要初始化nuxt开发框架,运行下面这条命令:

npx nuxi@latest init <project-name>

注意后面的<project-name>需要替换为我们的项目名。

至于这里的npx,是需要你提前安装好nodejs环境的,它是npm包管理工具的一个命令执行工具,可以直接用。

但你直接用大概率会出现下面这个报错:

image.png

这是因为它需要去外网下载一些数据,解决这个问题的最好方式就是翻墙,如果不会可以微信联系我。

但仅仅是翻墙依旧不够,它这个文件存放的位置使用默认DNS很多时候都解析不到,所以还需要修改一下电脑的DNS解析:

image.png

上图是Win11设置界面中修改Ipv4的DNS解析位置,可以自行将其修改为:114.114.114.144

然后我们再执行命令,就可以执行了:

image.png

注意它第一步会让你选择包管理器,这里默认用npm即可,如果你想用其它包管理器也可自行选择使用。

至于后面两个选项,第一个是想让你参与数据收集,我选择了no,第二个是初始化git仓库,我选择了yes。

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux