Nuxt入门（为什么要学习Nuxt和Nuxt项目初始化）

码农悟道
283 阅读3分钟

Nuxt 是什么？

Nuxt 是一个基于Vue开发的一个开源免费的框架。提供了一种直观且可扩展的方式，用于创建类型安全、高性能和生产级的全栈网页应用和网站（官方的原话）。

Nuxt 和单页面开发有哪些优势？

  1. SEO 用户体验方面，Nuxt 提供了服务端渲染， 对SEO 更良好, 单页面项目中当你右键查看源代码时，往往body里面只有一个div标签，搜索引擎在这里面抓取不到有用的东西。 而在Nuxt 中当你配置srr为true时，页面初始化渲染的内容在服务端渲染就已经完成。返回到客户端时就是有内容的。当你查看源码，内容也一样存在。这样搜索引擎就能抓取到有价值的内容。

  2. 性能方面，开发单页面的相信都有体会，一般首次加载都会很慢，因为我们打开页面时，只有一个div标签，需要等待js加载完成之后才进行渲染，加载速度和js的大小和文件个数就有了很大关系。而在Nuxt中服务端已经完成了初始化的渲染，返回到客户端的时候就已经有内容了，不需要等到js加载完成才渲染内容。所以首次打开速度一般都会比单页面快很多。

  3. 路由配置方面， Nuxt 提供了基于文件系统的路由，你不需要做额外的配置，比如说，你想新建一个path 为article/list 访问的页面，你只需要在项目根目录下新建pages/article/list.vue 就能实现基于path 为article/list访问的页面。而在单页面中你需要安装vue-router,进行路由配置。

  4. 自动导入功能，Nuxt 默认就提供了自动导入的功能，比如你需要使用Vue的计算属性，你可以直接使用即可，不需要写import...。 而在纯Vue开发中你需要自己手动导入，或者借助插件完成导入。

  5. 项目结构更加规范，Nuxt 规定好了很多目录结构和作用，使得在开发中更加规范。

  6. 在Nuxt 中你可以轻松的进入全栈开发，在Nuxt 中你不仅可以写前端代码，你也可以在根目录的server中编写接口

以上就是Nuxt 和单页面开发的一些主要优势。当然Nuxt 还有很多优点，比如内置了很多组件和方法方便进行快速快发。 下面我们初始化一个项目来体验一下吧！

Nuxt 项目初始化之Hello World编写

执行 pnpm dlx nuxi@latest init nuxt3-hello

这时候可能会发生下面的错误：

image.png

这怎么解决呢？ 打开： C:\Windows\System32\drivers\etc\hosts 文件在末尾加上

185.199.108.133 raw.githubusercontent.com 
185.199.109.133 raw.githubusercontent.com
185.199.110.133 raw.githubusercontent.com
185.199.111.133 raw.githubusercontent.com

然后win+r 输入： ipconfig /flushdns 命令刷新hosts 缓存。

再次执行pnpm dlx nuxi@latest init nuxt3-hello

这个时候就能成功了。

image.png

执行 cd nuxt3-hello 切换到项目目录

执行pnpm run dev 运行项目：

访问http://localhost:3000/ 这样我们的nuxt第一个项目就运行起来了。

image.png 找到项目根目录下面的app.vue 会看到NuxtRouteAnnouncer组件和NuxtWelcome 组件，这就是刚才我们在页面上看到的内容。 将其删除，改成Hello World, 现在我们再来看页面显示。

image.png

页面就显示了Hello World, 我们第一个Hello World 就开发完成了，这时候我们来右键查看下源代码。然后ctrl+f 搜索Hello World。

image.png

可以发现有Hello World ,这就说明了Nuxt 在服务端渲染完成之后才返回到页面上的。

总结：

通过本篇我们对Nuxt 有了大概的了解，知道了Nuxt 的优点，并且编写了第一个程序Hello World 。感谢您的观看，您若对Nuxt 感兴趣可以订阅Nuxt全站开启之路专栏， 后续会不断更新

avatar
文章
阅读
粉丝