Nuxt3来了!送给你们最全的Nuxt3 Demo

4,471 阅读2分钟

Nuxt 官网顶部公告 Nuxt3 倒计时的时候,我满怀期待,前几天打开,发现已经 Beta 了,趁着热乎,赶紧试一试!

image.png

==========================================================================

2022-02-11 更新

针对 Nuxt3 的使用,我做了一个项目,是基于 Nuxt3 的低代码平台,可以去 GitHub 看一下,GitHub 上也有项目的视频演示,项目应该会覆盖一部分 Nuxt3 的使用场景,希望可以帮助到大家。

==========================================================================

前言

Nuxt 的新特性大家可以去官网看一下,官网是最好的学习文档。很多官网提供的基本 API,我在 Demo 中并没有体现,我关注的重点是一些工程化相关的问题,旨在解决大家在项目架构搭建过程中,可能遇到的问题。

项目集成功能列表

  • Saas
  • ESLint + Prettier
  • Element Plus
  • I18n
  • 数据库
  • Server
  • 多环境部署

开发

导入 init.sql

$ yarn install
$ yarn dev

# 健康检查
$ curl http://localhost:3000/api/health
# 数据库API接口
$ curl http://localhost:3000/api/user

上线

  • 参考 Dockerfile,我部署使用的是 Kubernetes,部署相对比较简单,使用 pm2 等工具也都是可以的。

你可能遇到的问题 & 解决方案

  • Nuxt3 I18n
  • Nuxt3 I18n Discussions
  • Nuxt3 Element Plus Demo
  • 静态资源 CDN: 目前这是个 Open Issue,是在构建时,将资源路径改为 CDN Path,需要等待官方解决,但如果你整个站点都在 CDN 上,我觉得这个问题也不大
  • 环境配置
    • 可以参考 config 目录以及 server/db.ts 中的使用
    • Dockerfile 注入 NODE_ENV 变量,确保打包时的环境变量和上线后统一
  • 数据库: 使用的是 Sequelize ,如果使用 Typeorm 可能在配置 entities 有问题,所以也没有尝试使用

最后要说的话

  • 目前 Nuxt3 仍存在很多问题,包括相关配套工具的没有适配,不建议此时放到生产环境,但如果是一些比较简单的项目,我倒觉得可以试一试
  • 喜欢的帮忙点个 Star

相关链接