Nuxt.js 官方开源的三个基于Nuxt + Vue的实战项目!

开发 前端
Nuxt Content 是 Nuxt.js 官方维护的一个用于快速构建静态网站的应用。它基于 Vue.js 和 Markdown ,可以轻松地将 Markdown 文件转换为渲染的 HTML 页面并在 Nuxt.js 应用中使用。

今天来分享 Nuxt.js 官方开源的 3 个基于 Nuxt + Vue 的实战项目!这些项目可以帮助我们更好地理解和掌握 Nuxt 和 Vue 的概念、编写更优雅的代码。

Nuxt Movies

Nuxt Movies 是一个使用 Nuxt 3、Vue 3、UnoCSS、Image Module 和 TypeScript 构建的电影应用,其包含了电影列表、电影详情、演员详情、影片搜索、相关推荐等功能。Nuxt Movies 采用了服务端渲染(SSR)技术,同时也支持使用 PWA 技术使网站更加快速地加载和缓存内容。

在线演示:https://movies.nuxt.space/

图片

图片

Github:https://github.com/nuxt/movies

Nuxt Hacker News

Nuxt Hacker News 是一个使用 Nuxt 构建的 HackerNews 克隆,其具有以下特点:

  • 服务端渲染
  • 基于 Vite 的热更新(HMR)开发环境
  • 无需配置即可在任何地方部署(如 Vercel、Netlify、Cloudflare 等) ,由 Nitro 提供支持
  • 代码分割
  • JS + DNS + Data 的预取/预加载功能

在线演示:https://hn.nuxt.space/

图片

图片

Github:https://github.com/nuxt/hackernews

Nuxt Content

Nuxt Content 是 Nuxt.js 官方维护的一个用于快速构建静态网站的应用。它基于 Vue.js 和 Markdown ,可以轻松地将 Markdown 文件转换为渲染的 HTML 页面并在 Nuxt.js 应用中使用。其具有以下特性:

  • 使用 Nuxt 3 构建:利用 Nuxt 3 的特性:Vue 3、自动导入、Vite 和 Nitro 服务器。
  • 基于文件的 CMS:用 Markdown、YML、CSV 或 JSON 编写内容,并在组件中查询它。
  • 查询生成器:使用类似 MongoDB 的 API 查询内容,以便在正确的时间获取正确的数据。
  • MDC 语法:在 Markdown 文件中使用 Vue 组件,支持 props、插槽和嵌套组件。
  • 代码高亮:使用支持 VS Code 主题的 Shiki 集成在网站上显示漂亮的代码块。
  • 随处部署:Nuxt Content 支持静态或节点服务器托管。

图片

Github:https://github.com/nuxt/content

责任编辑:武晓燕 来源: 前端充电宝
相关推荐

2023-01-26 00:56:41

Nuxt.js存储库开发

2019-01-22 15:28:04

Javascriptvue.jsnuxt.js

2020-04-14 12:53:01

Nuxt.jsVue.js前端

2023-07-26 10:21:26

服务端组件客户端

2021-04-30 09:32:38

服务端渲染SSR

2021-12-03 15:59:30

Nuxt3插件机制

2022-11-17 06:17:41

Nuxt 3.0.0Vue

2020-07-03 07:58:01

开源开发软件

2023-05-18 09:00:39

Nuxt类型Nuxt 2

2023-03-08 09:06:24

2021-11-29 14:18:05

Nuxt3静态Nuxt2

2021-08-31 15:53:48

Nuxt 开箱服务

2023-08-27 09:08:45

CLI工具Web

2023-06-24 22:12:23

2023-05-12 07:31:58

NuxtVue.js

2023-06-09 10:27:13

Vue开源

2022-05-19 13:33:53

Github开源项目开源

2022-05-09 07:26:56

Hoppscotch开源管理工具

2019-05-06 14:51:46

Node框架前端

2013-10-21 09:42:28

开源OpenStack
点赞
收藏

51CTO技术栈公众号